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 el-row el-col 布局组件详解
本文目录 1. 背景 2. 分栏布局 3. 分栏间隔 4. 分栏偏移 4. 对齐方式 5. 响应式布局 6. 小结
6817 0
Element el-row el-col 布局组件详解
Element UI之el-tabs的样式修改字体颜色、下划线、选中/未选中
Element UI之el-tabs的样式修改字体颜色、下划线、选中/未选中
3226 0
Element el-select 选择器(下拉框)详解
本文目录 1. 用途 2. 数据绑定 2.1 固定选项 2.2 选项绑定数组 3. 功能效果 3.1 可清空选项 3.2 多选 3.3 可搜索 4. 事件响应 5. 小结
7021 0
Element el-select 选择器(下拉框)详解
|
关系型数据库 MySQL 数据库
Element el-date-picker 日期选择器详解
本文目录 1. 前言 2. 基本用法 3. 日期格式化 4. 选择其他日期单位 5. 选择多个日期 6. 带快捷选项 7. 禁用部分日期 8. 小结
5823 0
Element el-date-picker 日期选择器详解
【1】ElementUI 组件实际应用===》按钮的使用
这篇文章详细介绍了Element UI库中的按钮组件的使用方法,包括基础用法、禁用状态、文字按钮、图标按钮、按钮组、加载中状态、不同尺寸的按钮以及按钮的属性说明。文章通过实例代码展示了如何定义按钮样式、添加图标、设置按钮尺寸和类型,并解释了如何绑定方法到按钮以执行操作。
|
JavaScript
如何对ElementUI、ElementPlus中的Tree树组件进行美化,如增加辅助线、替换展开收起图标、点击节点后文字高亮等效果?本文给你答案!
本文介绍了如何对ElementUI和ElementPlus的Tree树组件进行美化,包括增加辅助线、替换展开收起图标、点击节点后文字高亮等效果,并提供了详细的代码示例和实现效果。
2907 0
如何对ElementUI、ElementPlus中的Tree树组件进行美化,如增加辅助线、替换展开收起图标、点击节点后文字高亮等效果?本文给你答案!
Vue3单选框(Radio)
这是一个可高度定制的单选框组件,支持多种配置项,如单选元素数据、禁用状态、垂直排列、间距、按钮样式及大小等。组件具备普通与按钮样式,并可根据需求调整样式风格。提供了丰富的示例代码及在线预览,便于理解和使用。
584 1
Vue3单选框(Radio)
|
JavaScript Java 测试技术
基于SpringBoot+Vue的在线教育系统的设计与实现(源码+lw+部署文档+讲解等)
基于SpringBoot+Vue的在线教育系统的设计与实现(源码+lw+部署文档+讲解等)
236 0