栏目分类:
子分类:
返回
名师互学网用户登录
快速导航关闭
当前搜索
当前分类
子分类
实用工具
热门搜索
名师互学网 > IT > 软件开发 > Web开发 > Vue.js

Element el-button 按钮组件详解

Vue.js 更新时间: 发布时间: IT归档 最新发布 模块sitemap 名妆网 法律咨询 聚返吧 英语巴士网 伯小乐 网商动力

Element el-button 按钮组件详解

1. 背景

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

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

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

转载请注明:文章转载自 www.mshxw.com
我们一直用心在做
关于我们 文章归档 网站地图 联系我们

版权所有 (c)2021-2022 MSHXW.COM

ICP备案号:晋ICP备2021003244-6号