用type、plain、round和circle属性来定义 Button 的样式,按钮样式、尺寸、类型

最新推荐文章于 2024-03-23 10:41:03 发布

`胖呼呼

最新推荐文章于 2024-03-23 10:41:03 发布

阅读量400

点赞数 6

文章标签： css 前端

本文链接：https://blog.csdn.net/weixin_56911431/article/details/134582094

版权

1. 以按钮组的方式出现，常用于多项类似操作。

在这里插入图片描述

<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>
<el-button-group>
  <el-button type="primary" icon="el-icon-edit"></el-button>
  <el-button type="primary" icon="el-icon-share"></el-button>
  <el-button type="primary" icon="el-icon-delete"></el-button>
</el-button-group>`

> 使用el-button-group标签来嵌套你的按钮。

2.点击按钮后进行数据加载操作，在按钮上显示加载状态。

在这里插入图片描述

<el-button type="primary" :loading="true">加载中</el-button>
   

> 要设置为 loading 状态，只要设置loading属性为true即可。

3.Button 组件提供除了默认值以外的三种尺寸，可以在不同场景下选择合适的按钮尺寸。

<el-row>
  <el-button>默认按钮</el-button>
  <el-button size="medium">中等按钮</el-button>
  <el-button size="small">小型按钮</el-button>
  <el-button size="mini">超小按钮</el-button>
</el-row>
<el-row>
  <el-button round>默认按钮</el-button>
  <el-button size="medium" round>中等按钮</el-button>
  <el-button size="small" round>小型按钮</el-button>
  <el-button size="mini" round>超小按钮</el-button>
</el-row>

> 额外的尺寸：medium、small、mini，通过设置size属性来配置它们。