按钮是很常用的,Element的按钮功能还是比较全面的,本篇就来介绍下。
先看下各种按钮的效果图:
在分析源码前,我们先来看一下官方文档对于button的使用说明:
el-button按钮的分类基本是靠颜色区分的,另外还有一种文本按钮type="text",文本按钮由于比较小,比较适合用于表格每行的操作栏部分。
按钮分类:
<el-button>默认</el-button> <el-button type="primary">primary</el-button> <el-button type="success">success</el-button> <el-button type="info">info</el-button> <el-button type="warning">warning</el-button> <el-button type="danger">danger</el-button> <el-button type="text">text</el-button>
Element提供了朴素按钮、圆角按钮、圆形按钮,需要注意的是圆形按钮一般只放一个图标进去,代码如下:
按钮样式:
<el-button type="primary" plain>朴素按钮</el-button> <el-button type="primary" round>圆角按钮</el-button> <el-button type="primary" circle icon="el-icon-search"></el-button>
按钮状态其实就是HTML标准的功能,通过disabled实现禁用即可。
按钮状态:
<el-button type="primary">正常</el-button> <el-button type="primary" disabled>禁用</el-button>
按钮分组很好用,像常见的分页按钮,分成一组的话更加好看,通过<el-button-group>将按钮包裹起来,即可实现。
按钮分组:
<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>默认</el-button> <el-button type="primary" size="medium ">medium</el-button> <el-button type="primary" size="small">small</el-button> <el-button type="primary" size="mini">mini</el-button>
el-button提供的功能已经比较完善了,拿来即可即可。注意不推荐自己定义style来修改默认样式,容易导致外观不统一。
到此这篇关于Element el-button 按钮组件的使用详解的文章就介绍到这了,更多相关Element el-button 按钮组件内容请搜索站长技术以前的文章或继续浏览下面的相关文章希望大家以后多多支持站长技术!
文章目录 前言 一、Less 二、引入你的组件 三、修改配置文件 第一步直接引入less...
一、导读 本文主要介绍Redhat7.6系统安装oracle 12201版本RAC的一些坑以及避坑方...
3月22日消息 据外媒 Windows Latest 报道,微软在周五停止了 Windows 10 KB50016...
XML的未来 现在你已经知道XML。确实,结构有点复杂,而且DTD有各种可 以定义文档...
只能在/userfiles/文件夹下。对于多用户会员系统的网站系统,这显然是不合适的,...
一.前言 开局先唠嗑一下,许久未曾更新博客,一直在调整自己的状态,去年是我的...
近日在腾讯云AI大数据新品发布会上腾讯云副总裁王龙向听众全面介绍了当前腾讯云...
Servlet中操作文件详解及实例 因为Servlet本来就是一个.Java文件,因此servlet中...
python实现基于八方向判断的断裂连接 讲解 略 代码 八方向连接算法 import numpy...
Struts中的Action 单例与多例详解 struts2中action是多例的,即每次访问网络地址...