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来修改默认样式,容易导致外观不统一。

相关文章
Element UI之el-tabs的样式修改字体颜色、下划线、选中/未选中
Element UI之el-tabs的样式修改字体颜色、下划线、选中/未选中
3834 0
Element el-select 选择器(下拉框)详解
本文目录 1. 用途 2. 数据绑定 2.1 固定选项 2.2 选项绑定数组 3. 功能效果 3.1 可清空选项 3.2 多选 3.3 可搜索 4. 事件响应 5. 小结
7561 0
Element el-select 选择器(下拉框)详解
【1】ElementUI 组件实际应用===》按钮的使用
这篇文章详细介绍了Element UI库中的按钮组件的使用方法,包括基础用法、禁用状态、文字按钮、图标按钮、按钮组、加载中状态、不同尺寸的按钮以及按钮的属性说明。文章通过实例代码展示了如何定义按钮样式、添加图标、设置按钮尺寸和类型,并解释了如何绑定方法到按钮以执行操作。
|
资源调度 JavaScript API
【Vue2 / Vue3】 一个贼nb,贼强大的自定义打印插件
【Vue2 / Vue3】 一个贼nb,贼强大的自定义打印插件
11109 120
Ant Design Vue UI框架的基础使用,及通用后台管理模板的小demo【简单】
这篇文章介绍了如何使用Ant Design Vue UI框架创建一个简单的后台管理模板,包括创建Vue项目、安装和使用ant-design-vue、以及编写后台管理通用页面的代码和样式。
Ant Design Vue UI框架的基础使用,及通用后台管理模板的小demo【简单】
|
JavaScript
如何对ElementUI、ElementPlus中的Tree树组件进行美化,如增加辅助线、替换展开收起图标、点击节点后文字高亮等效果?本文给你答案!
本文介绍了如何对ElementUI和ElementPlus的Tree树组件进行美化,包括增加辅助线、替换展开收起图标、点击节点后文字高亮等效果,并提供了详细的代码示例和实现效果。
4001 0
如何对ElementUI、ElementPlus中的Tree树组件进行美化,如增加辅助线、替换展开收起图标、点击节点后文字高亮等效果?本文给你答案!
|
资源调度 JavaScript Windows
'vue-cli-service' 不是内部或外部命令,也不是可运行的程序问题解决
【5月更文挑战第7天】'vue-cli-service' 不是内部或外部命令,也不是可运行的程序问题解决
20642 3
|
编解码 前端开发
【Vue3】解决电脑分辨率125%、150%及缩放导致页面变形的问题
【Vue3】解决电脑分辨率125%、150%及缩放导致页面变形的问题
2233 0
node node-sass sass-loader版本对应问题,对于npm编译大家经常遇到这个问题
node node-sass sass-loader版本对应问题,对于npm编译大家经常遇到这个问题
2838 2
|
NoSQL 关系型数据库 网络安全
前后端分离项目Docker部署指南(上)
前后端分离项目Docker部署指南(上)
1567 1