基础按钮用法

　　按钮分为：默认按钮、朴素按钮（plain）、圆角按钮（round）、圆形按钮（circle）。eg：

　　<el-button plain>朴素按钮</el-button>

　　通过 type 属性指定 primary、success、info、warning、danger、text 其中的值设置按钮样式，其中若设置值为 text ，则为文字按钮，没有边框和背景颜色

 1 <el-row>2   <el-button>默认按钮</el-button>3   <el-button type="primary">主要按钮</el-button>4   <el-button type="success">成功按钮</el-button>5   <el-button type="info">信息按钮</el-button>6   <el-button type="warning">警告按钮</el-button>7   <el-button type="danger">危险按钮</el-button>8 </el-row>9
10 <el-row>
11   <el-button plain>朴素按钮</el-button>
12   <el-button type="primary" plain>主要按钮</el-button>
13   <el-button type="success" plain>成功按钮</el-button>
14   <el-button type="info" plain>信息按钮</el-button>
15   <el-button type="warning" plain>警告按钮</el-button>
16   <el-button type="danger" plain>危险按钮</el-button>
17 </el-row>
18
19 <el-row>
20   <el-button round>圆角按钮</el-button>
21   <el-button type="primary" round>主要按钮</el-button>
22   <el-button type="success" round>成功按钮</el-button>
23   <el-button type="info" round>信息按钮</el-button>
24   <el-button type="warning" round>警告按钮</el-button>
25   <el-button type="danger" round>危险按钮</el-button>
26 </el-row>
27
28 <el-row>
29   <el-button icon="el-icon-search" circle></el-button>
30   <el-button type="primary" icon="el-icon-edit" circle></el-button>
31   <el-button type="success" icon="el-icon-check" circle></el-button>
32   <el-button type="info" icon="el-icon-message" circle></el-button>
33   <el-button type="warning" icon="el-icon-star-off" circle></el-button>
34   <el-button type="danger" icon="el-icon-delete" circle></el-button>
35 </el-row>

按钮样式

添加 disabled 属性设置按钮禁用；设置 loading 属性值为 true ，在按钮上显示加载状态

图标按钮

　　设置 icon 属性值即可。eg：

　<el-button type="primary" icon="el-icon-search">搜索</el-button>

按钮组

　　使用 <el-button-group> 标签嵌套标签组。eg：

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

标签组

Button 组件提供了除默认按钮大小以外的 medium、small、mini 三种大小，通过设置 size 属性来配置

elementUI 学习入门之 Button 按钮相关推荐

elementui 按钮表单_elementUI 学习入门之 Button 按钮
基础按钮用法按钮分为:默认按钮.朴素按钮(plain).圆角按钮(round).圆形按钮(circle).eg: 朴素按钮通过 type 属性指定 primary.success.info.war ...
elementUi基础入门学习
elementUi基础入门学习 1.前后端分离(理解) 1.1什么是前后端分离 1.2 前后端分离开发的理解 1.3 为什么要进行前端分离开发: 2 . 先去搭建前端服务 3 elementui 4 ...
无废话ExtJs 入门教程六[按钮：Button]
无废话ExtJs 入门教程六[按钮:Button] extjs技术交流,欢迎加群(201926085) 继上一节内容,我们在表单里加了个两个按钮"提交"与重置.如下所示代码区的第6 ...
html添加按钮语句,快速入门：添加按钮 (HTML)
快速入门:添加按钮 (HTML) 03/04/2016 本文内容 [ 本文适用于编写 Windows 运行时应用的 Windows 8.x 和 Windows Phone 8.x 开发人员.如果你要针 ...
JS实现点击button按钮切换图片
JS实现点击button按钮切换图片放暑假在家打算学习html/css/js制作网页,只有html/css的一些基础.实现效果如图: 这个网页很简单,是用Dreamweaver写的,但是是通过自己做 ...
LeCun亲授的深度学习入门课：从飞行器的发明到卷积神经网络
Root 编译整理量子位出品 | 公众号 QbitAI 深度学习和人脑有什么关系?计算机是如何识别各种物体的?我们怎样构建人工大脑? 这是深度学习入门者绕不过的几个问题.很幸运,这里有位大牛很乐意 ...
Android 自定义Button按钮显示样式（正常、按下、获取焦点）
2019独角兽企业重金招聘Python工程师标准>>> 现在的用户对APP的外观看得很重要,如果APP内所有元件都用Android默认样式写,估计下面评论里就有一堆在骂UI丑的.今天 ...
android倒角按钮,Android实现圆角Button按钮
本文实例讲述了Android开发圆角Button按钮实现过程,分享给大家供大家参考,具体内容如下需求及效果图: 实现思路: 1.shape实现圆角在drawable新建两个xml 文件, 这两个 ...
bootstrap基础学习【菜单、按钮、导航】（四）
<!DOCTYPE html> <html><head><meta charset="UTF-8"><title>boo ...

elementUI 学习入门之 Button 按钮

基础按钮用法

elementUI 学习入门之 Button 按钮相关推荐

最新文章

热门文章