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-select 选择器(下拉框)详解
本文目录 1. 用途 2. 数据绑定 2.1 固定选项 2.2 选项绑定数组 3. 功能效果 3.1 可清空选项 3.2 多选 3.3 可搜索 4. 事件响应 5. 小结
7714 0
Element el-select 选择器(下拉框)详解
|
API
uniapp使用u-checkbox
uniapp使用u-checkbox
1289 1
|
开发框架 JavaScript 前端开发
百度富文本编辑器配置(vue3)
百度富文本编辑器配置(vue3)
隐藏el-table-column过多的内容并进行浮窗展示
隐藏el-table-column过多的内容并进行浮窗展示
隐藏el-table-column过多的内容并进行浮窗展示
|
NoSQL Java Redis
Java中使用RedisTemplate根据前缀获取key列表
我们在使用 Redis 的时候,会需要获取以某个字符串开头的所有 key
1461 0
【1】ElementUI 组件实际应用===》按钮的使用
这篇文章详细介绍了Element UI库中的按钮组件的使用方法,包括基础用法、禁用状态、文字按钮、图标按钮、按钮组、加载中状态、不同尺寸的按钮以及按钮的属性说明。文章通过实例代码展示了如何定义按钮样式、添加图标、设置按钮尺寸和类型,并解释了如何绑定方法到按钮以执行操作。
|
9月前
|
XML 人工智能 IDE
Springboot整合SSMP报错分析
本文介绍了Springboot整合SSMP框架时常见的报错及解决方案,包括MyBatis-Plus版本不兼容导致的Lambda表达式条件构造器报错及表名不匹配问题。通过升级或降级MyBatis-Plus版本、使用@TableName注解或配置table-prefix属性,可有效解决上述问题,帮助开发者避免在整合SSMP时出现不必要的错误。
698 0
|
前端开发 JavaScript 开发者
UI 框架:element-ui(二)
在当今快速发展的前端开发领域,用户界面的设计和交互体验日益成为软件成功的关键因素之一。Element UI,作为一款基于Vue.js的组件库,以其精美的界面和丰富的功能受到了广泛的关注与应用。它为开发者提供了一整套高质量的组件,帮助他们快速构建具有现代感的应用程序。 Element UI不仅注重美观的设计,还提供了良好的文档支持和社区活跃度,使得开发者能够轻松上手并解决实施过程中的各种问题。在这篇文章中,我们将深入探讨Element UI的基本特点、安装步骤,以及如何利用其强大的组件系统高效地构建用户友好的界面。无论您是初学者还是有经验的开发者,这篇文章都将为您开辟一条通向更高效开发的道路。
1128 4
|
JavaScript
如何对ElementUI、ElementPlus中的Tree树组件进行美化,如增加辅助线、替换展开收起图标、点击节点后文字高亮等效果?本文给你答案!
本文介绍了如何对ElementUI和ElementPlus的Tree树组件进行美化,包括增加辅助线、替换展开收起图标、点击节点后文字高亮等效果,并提供了详细的代码示例和实现效果。
4456 0
如何对ElementUI、ElementPlus中的Tree树组件进行美化,如增加辅助线、替换展开收起图标、点击节点后文字高亮等效果?本文给你答案!
|
编解码 前端开发
【Vue3】解决电脑分辨率125%、150%及缩放导致页面变形的问题
【Vue3】解决电脑分辨率125%、150%及缩放导致页面变形的问题
2447 0