• 售前

  • 售后

热门帖子
入门百科

Element el-button 按钮组件的利用详解

[复制链接]
小太阳823 显示全部楼层 发表于 2021-10-25 20:44:16 |阅读模式 打印 上一主题 下一主题
1. 配景


按钮是很常用的,Element的按钮功能照旧比较全面的,本篇就来先容下。
先看下各种按钮的效果图:

在分析源码前,我们先来看一下官方文档对于button的使用阐明:

2. 按钮分类


el-button按钮的分类基本是靠颜色区分的,另外另有一种文本按钮type="text",文本按钮由于比较小,比较恰当用于表格每行的操作栏部分。
按钮分类:
  1.   <el-button>默认</el-button>
  2.   <el-button type="primary">primary</el-button>
  3.   <el-button type="success">success</el-button>
  4.   <el-button type="info">info</el-button>
  5.   <el-button type="warning">warning</el-button>
  6.   <el-button type="danger">danger</el-button>
  7.   <el-button type="text">text</el-button>
复制代码
3. 按钮样式


Element提供了朴素按钮、圆角按钮、圆形按钮,需要留意的是圆形按钮一样平常只放一个图标进去,代码如下:
按钮样式:
  1.   <el-button type="primary" plain>朴素按钮</el-button>
  2.   <el-button type="primary" round>圆角按钮</el-button>
  3.   <el-button type="primary" circle icon="el-icon-search"></el-button>
复制代码
4. 按钮状态


按钮状态着实就是HTML尺度的功能,通过disabled实现禁用即可。
按钮状态:
  1. <el-button type="primary">正常</el-button>
  2. <el-button type="primary" disabled>禁用</el-button>
复制代码
5. 按钮分组


按钮分组很好用,像常见的分页按钮,分成一组的话更加好看,通过<el-button-group>将按钮包裹起来,即可实现。
按钮分组:
  1.   <el-button-group>
  2.    <el-button type="primary" icon="el-icon-arrow-left">上一页</el-button>
  3.    <el-button type="primary">下一页<i class="el-icon-arrow-right el-icon--right"></i></el-button>
  4.   </el-button-group>
复制代码
6. 按钮尺寸


饿了提供了默认、中、小、很小四种尺寸,代码如下:
  按钮的尺寸:
  1. <el-button>默认</el-button>
  2. <el-button type="primary" size="medium ">medium</el-button>
  3. <el-button type="primary" size="small">small</el-button>
  4. <el-button type="primary" size="mini">mini</el-button>
复制代码
7. 小结


el-button提供的功能已经比较完善了,拿来即可即可。留意不推荐本身界说style来修改默认样式,容易导致外观差异一。
到此这篇关于Element el-button 按钮组件的使用详解的文章就先容到这了,更多相关Element el-button 按钮组件内容请搜索草根技能分享从前的文章或继承欣赏下面的相关文章希望各人以后多多支持草根技能分享!

本帖子中包含更多资源

您需要 登录 才可以下载或查看,没有帐号?立即注册

x

帖子地址: 

回复

使用道具 举报

分享
推广
火星云矿 | 预约S19Pro,享500抵1000!
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

草根技术分享(草根吧)是全球知名中文IT技术交流平台,创建于2021年,包含原创博客、精品问答、职业培训、技术社区、资源下载等产品服务,提供原创、优质、完整内容的专业IT技术开发社区。
  • 官方手机版

  • 微信公众号

  • 商务合作