Element el-button 按钮组件详解

简介: 本文目录1. 背景2. 按钮分类3. 按钮样式4. 按钮状态5. 按钮分组6. 按钮尺寸7. 小结

1. 背景

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

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

image.png

2. 按钮分类

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


   按钮分类:

   <el-button>默认</el-button>

   <el-button type="primary">primary</el-button>

   <el-button type="success">success</el-button>

   <el-button type="info">info</el-button>

   <el-button type="warning">warning</el-button>

   <el-button type="danger">danger</el-button>

   <el-button type="text">text</el-button>


3. 按钮样式

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


   按钮样式:

   <el-button type="primary" plain>朴素按钮</el-button>

   <el-button type="primary" round>圆角按钮</el-button>

   <el-button type="primary" circle icon="el-icon-search"></el-button>


4. 按钮状态

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


   按钮状态:

   <el-button type="primary">正常</el-button>

   <el-button type="primary" disabled>禁用</el-button>


5. 按钮分组

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


   按钮分组:

   <el-button-group>

     <el-button type="primary" icon="el-icon-arrow-left">上一页</el-button>

     <el-button type="primary">下一页<i class="el-icon-arrow-right el-icon--right"></i></el-button>

   </el-button-group>


6. 按钮尺寸

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


 按钮的尺寸:

   <el-button>默认</el-button>

   <el-button type="primary" size="medium ">medium</el-button>

   <el-button type="primary" size="small">small</el-button>

   <el-button type="primary" size="mini">mini</el-button>


7. 小结

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

相关文章
|
开发框架 JavaScript 前端开发
百度富文本编辑器配置(vue3)
百度富文本编辑器配置(vue3)
|
API
uniapp使用u-checkbox
uniapp使用u-checkbox
1378 1
详解Vue3——#default=“scope”
详解Vue3——#default=“scope”
1469 0
隐藏el-table-column过多的内容并进行浮窗展示
隐藏el-table-column过多的内容并进行浮窗展示
隐藏el-table-column过多的内容并进行浮窗展示
|
存储 JavaScript 前端开发
使用CDN方法的方式进行Vue.js的安装
最近公司需要进行一些前端的开发工作用到了Vue前端框架,所以准备自学Vue,顺便几下学习的过程以及一些问题。
1246 0
使用CDN方法的方式进行Vue.js的安装
Element el-select 选择器(下拉框)详解
本文目录 1. 用途 2. 数据绑定 2.1 固定选项 2.2 选项绑定数组 3. 功能效果 3.1 可清空选项 3.2 多选 3.3 可搜索 4. 事件响应 5. 小结
7832 0
Element el-select 选择器(下拉框)详解
|
NoSQL Java Redis
Java中使用RedisTemplate根据前缀获取key列表
我们在使用 Redis 的时候,会需要获取以某个字符串开头的所有 key
1535 0
【1】ElementUI 组件实际应用===》按钮的使用
这篇文章详细介绍了Element UI库中的按钮组件的使用方法,包括基础用法、禁用状态、文字按钮、图标按钮、按钮组、加载中状态、不同尺寸的按钮以及按钮的属性说明。文章通过实例代码展示了如何定义按钮样式、添加图标、设置按钮尺寸和类型,并解释了如何绑定方法到按钮以执行操作。
|
10月前
|
XML 人工智能 IDE
Springboot整合SSMP报错分析
本文介绍了Springboot整合SSMP框架时常见的报错及解决方案,包括MyBatis-Plus版本不兼容导致的Lambda表达式条件构造器报错及表名不匹配问题。通过升级或降级MyBatis-Plus版本、使用@TableName注解或配置table-prefix属性,可有效解决上述问题,帮助开发者避免在整合SSMP时出现不必要的错误。
879 0
|
资源调度 JavaScript API
【Vue2 / Vue3】 一个贼nb,贼强大的自定义打印插件
【Vue2 / Vue3】 一个贼nb,贼强大的自定义打印插件
13355 120

热门文章

最新文章