elementUI 学习入门之 Button 按钮
基础按钮用法
按钮分为:默认按钮、朴素按钮(plain)、圆角按钮(round)、圆形按钮(circle)。eg:
<el-button plain>朴素按钮</el-button>
通过 type 属性指定 primary、success、info、warning、danger、text 其中的值设置按钮样式,其中若设置值为 text ,则为文字按钮,没有边框和背景颜色
<el-row>
<el-button>默认按钮</el-button>
<el-button type="primary">主要按钮</el-button>
<el-button type="success">成功按钮</el-button>
<el-button type="info">信息按钮</el-button>
<el-button type="warning">警告按钮</el-button>
<el-button type="danger">危险按钮</el-button>
</el-row> <el-row>
<el-button plain>朴素按钮</el-button>
<el-button type="primary" plain>主要按钮</el-button>
<el-button type="success" plain>成功按钮</el-button>
<el-button type="info" plain>信息按钮</el-button>
<el-button type="warning" plain>警告按钮</el-button>
<el-button type="danger" plain>危险按钮</el-button>
</el-row> <el-row>
<el-button round>圆角按钮</el-button>
<el-button type="primary" round>主要按钮</el-button>
<el-button type="success" round>成功按钮</el-button>
<el-button type="info" round>信息按钮</el-button>
<el-button type="warning" round>警告按钮</el-button>
<el-button type="danger" round>危险按钮</el-button>
</el-row> <el-row>
<el-button icon="el-icon-search" circle></el-button>
<el-button type="primary" icon="el-icon-edit" circle></el-button>
<el-button type="success" icon="el-icon-check" circle></el-button>
<el-button type="info" icon="el-icon-message" circle></el-button>
<el-button type="warning" icon="el-icon-star-off" circle></el-button>
<el-button type="danger" icon="el-icon-delete" circle></el-button>
</el-row>
按钮样式
添加 disabled 属性设置按钮禁用;设置 loading 属性值为 true ,在按钮上显示加载状态
图标按钮
设置 icon 属性值即可。eg:
<el-button type="primary" icon="el-icon-search">搜索</el-button>
按钮组
使用 <el-button-group> 标签嵌套标签组。eg:
<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>
标签组
Button 组件提供了除默认按钮大小以外的 medium、small、mini 三种大小,通过设置 size 属性来配置
elementUI 学习入门之 Button 按钮的更多相关文章
- 【Flutter学习】之button按钮
一,概述 由于Flutter是跨平台的,所以有适用于Android和iOS的两种风格的组件.一套是Google极力推崇的Material,一套是iOS的Cupertino风格的组件.无论哪种风格,都是 ...
- elementUI 学习入门之 inputNumber 计数器
InputNumber 计数器 基础用法 <el-input-number v-model="num2"></el-input-number> v-mode ...
- elementUI 学习入门之 input 输入框
基础用法 <el-input v-model="input1" palcehoder="请输入"></el-input> var Mai ...
- elementUI 学习入门之 checkbox 复选框
CheckBox 复选框 与单选框基本类似.如:按钮样式.带边框.复选框按钮大小. eg: <template> <el-checkbox-group v-model="s ...
- elementUI 学习入门之 Select 选择器
Select 选择器 基础用法 <el-select v-model="val1" placeholder="请输入"> <el-option ...
- elementUI 学习入门之 radio 单选框
Radio 单选框 基础用法 选项默认可见,选项不宜过多,选项过多建议使用 select 选择器 使用 Radio 组件,需要设置 v-model 绑定变量,选中意味着变量的值为相应 Radio l ...
- elementUI 学习入门之 container 布局容器
Container 布局容器 用于布局的容器组件,方便快速搭建页面基本结构 <el-container> : 外层容器.当子元素包含 <el-header> 或 <el- ...
- elementUI 学习入门之 layout 布局
layout 布局 通过基础的 24 分栏,可进行快速布局 基础布局 使用单一分栏创建基础的栅格布局, 通过 span 属性指定每栏的大小 <el-col :span="8" ...
- 无废话ExtJs 入门教程六[按钮:Button]
无废话ExtJs 入门教程六[按钮:Button] extjs技术交流,欢迎加群(201926085) 继上一节内容,我们在表单里加了个两个按钮“提交”与重置.如下所示代码区的第68行位置, butt ...
随机推荐
- Nexus(Maven仓库私服)安装
一.Nexus介绍 Nexus 是Maven仓库管理器,如果你使用Maven,你可以从Maven中央仓库 下载所需要的构件(artifact),但这通常不是一个好的做法,你应该在本地架设一个Maven ...
- horizon源码分析(二)
源码版本:H版 一.简要回顾 对于请求: 地址:/dashboard/admin/instances/ 方式:POST 参数: instances_filter_q: action:instances ...
- CodeBlocks调试器设置错误问题
错误如下: Building to ensure sources are up-to-date Selecting target: Debug ERROR: You need to specify ...
- Elasticsearch技术解析与实战(七)Elasticsearch partial update
普通的partial update 1.插入测试数据 PUT /test_index/test_type/10 { "test_field1": "test1" ...
- Linux 安装tomcat,搭建web app运行环境
Tomcat 8 下载地址:https://tomcat.apache.org/download-80.cgi 解压tomcat:tar -xf apache-tomcat-8.5.31.tar.gz ...
- c++ poco 使用mysql中文乱码问题
poco 是c++ 一个比较好的库,现在正在学习使用它,碰到一些问题记录在此. poco版本:poco-1.46-all ,带有数据库的支持模块 操作系统:ubuntu 1.使用poco的MySQL模 ...
- phpcms取内容发布管理中的来源
调取内容发布管理中的来源,如果直接写{$val['copyfrom']}调取出来的内容为 内容|0 ,要先根据“|”进行拆分,然后再写. 示例: <!--新闻开始--> {pc:co ...
- 2017ACM暑期多校联合训练 - Team 8 1002 HDU 6134 Battlestation Operational (数论 莫比乌斯反演)
题目链接 Problem Description The Death Star, known officially as the DS-1 Orbital Battle Station, also k ...
- 实验吧CTF题库之二叉树遍历
题目链接:http://www.shiyanbar.com/ctf/1868 直接推算出来这棵树是: 后序遍历是:ACBFGED 参考资料: 1. http://www.shiyanbar.com/c ...
- $.when()方法翻译2
mac不知道为何,文章字数一多,浏览器就重启.只好分开写了. In the event a Deferred was resolved with no value, the corresponding ...