热门标签 | HotTags
当前位置:  开发笔记 > 前端 > 正文

Elementel-button按钮组件的使用详解

这篇文章主要介绍了Elementel-button按钮组件的使用详解,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧

1. 背景

按钮是很常用的,Element的按钮功能还是比较全面的,本篇就来介绍下。

先看下各种按钮的效果图:

在分析源码前,我们先来看一下官方文档对于button的使用说明:

2. 按钮分类

el-button按钮的分类基本是靠颜色区分的,另外还有一种文本按钮type="text",文本按钮由于比较小,比较适合用于表格每行的操作栏部分。

按钮分类:

  默认
  primary
  success
  info
  warning
  danger
  text

3. 按钮样式

Element提供了朴素按钮、圆角按钮、圆形按钮,需要注意的是圆形按钮一般只放一个图标进去,代码如下:

按钮样式:

  朴素按钮
  圆角按钮
  

4. 按钮状态

按钮状态其实就是HTML标准的功能,通过disabled实现禁用即可。

按钮状态:

正常
禁用

5. 按钮分组

按钮分组很好用,像常见的分页按钮,分成一组的话更加好看,通过将按钮包裹起来,即可实现。

按钮分组:

  
   上一页
   下一页
  

6. 按钮尺寸

饿了提供了默认、中、小、很小四种尺寸,代码如下:

  按钮的尺寸:

默认
medium
small
mini

7. 小结

el-button提供的功能已经比较完善了,拿来即可即可。注意不推荐自己定义style来修改默认样式,容易导致外观不统一。

到此这篇关于Element el-button 按钮组件的使用详解的文章就介绍到这了,更多相关Element el-button 按钮组件内容请搜索以前的文章或继续浏览下面的相关文章希望大家以后多多支持! 


推荐阅读
  • 使用WinForms 实现 RabbitMQ RPC 示例
    本文通过两个WinForms应用程序演示了如何使用RabbitMQ实现远程过程调用(RPC)。一个应用作为客户端发送请求,另一个应用作为服务端处理请求并返回响应。 ... [详细]
  • 本文详细介绍如何通过设置SSH密钥来获取连接GitHub远程仓库的权限,包括生成密钥、添加到GitHub账户以及验证连接等步骤。 ... [详细]
  • 本文介绍了如何使用JFreeChart库创建一个美观且功能丰富的环形图。通过设置主题、字体和颜色等属性,可以生成符合特定需求的图表。 ... [详细]
  • Google排名优化-面向Google(Search Engine Friendly)的URL设计 ... [详细]
  • 解决Hive操作无响应问题:drop table和create table的处理方法
    本文详细介绍了在Hive中执行drop table和create table命令时遇到无响应的情况,并提供了完整的解决方案。通过调整MySQL字符集编码,确保Hive数据库与MySQL之间的兼容性,从而有效解决问题。 ... [详细]
  • cJinja:C++编写的轻量级HTML模板引擎
    本文介绍了cJinja,这是一个用C++编写的轻量级HTML模板解析库。它利用ejson来处理模板中的数据替换(即上下文),其语法与Django Jinja非常相似,功能强大且易于学习。 ... [详细]
  • 本文探讨了C#语言中类的嵌套使用,特别是当嵌套类作为方法参数时,其内部状态是否会因方法调用而发生改变的问题。通过实例分析,详细说明了引用类型在不同情况下的行为。 ... [详细]
  • 如何从python读取sql[mysql基础教程]
    从python读取sql的方法:1、利用python内置的open函数读入sql文件;2、利用第三方库pymysql中的connect函数连接mysql服务器;3、利用第三方库pa ... [详细]
  • TortoiseSVN与VisualSVN Server的安装及基本操作指南
    本文详细介绍了如何安装VisualSVN Server以及TortoiseSVN客户端,并提供了基本的操作步骤,包括配置仓库、用户管理及权限设置等关键环节。 ... [详细]
  • Servlet过滤器入门:实现与配置
    本文介绍如何在Java Web应用中实现和配置Servlet过滤器,通过实现`javax.servlet.Filter`接口来创建过滤器,并详细说明其在web.xml文件中的配置方法。 ... [详细]
  • 深入解析:OpenShift Origin环境下的Kubernetes Spark Operator
    本文探讨了如何在OpenShift Origin平台上利用Kubernetes Spark Operator来管理和部署Apache Spark集群与应用。作为Radanalytics.io项目的一部分,这一开源工具为大数据处理提供了强大的支持。 ... [详细]
  • 本文探讨了天才与疯子之间的微妙界限,介绍了如何利用巨人的工具提升自我,以及如何通过科学决策、数据洞察和智慧的尺度来指导我们的生活和工作。 ... [详细]
  • 本文详细介绍了Java的安装、配置、运行流程以及有效的学习方法,旨在帮助初学者快速上手Java编程。 ... [详细]
  • 理解与应用:独热编码(One-Hot Encoding)
    本文详细介绍了独热编码(One-Hot Encoding)与哑变量编码(Dummy Encoding)两种方法,用于将分类变量转换为数值形式,以便于机器学习算法处理。文章不仅解释了这两种编码方式的基本原理,还探讨了它们在实际应用中的差异及选择依据。 ... [详细]
  • JavaScript 动态向 HTML 添加内容的方法
    本文介绍了使用 JavaScript 的 insertAdjacentHTML 和 insertAdjacentText 方法动态向 HTML 页面中添加内容或文本的技术。这些方法允许开发者根据指定的位置精确地插入新的 HTML 或纯文本。 ... [详细]
author-avatar
本多天舞
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有