button样式篇一（ant Design React）
首页
Python
Java
IOS
Andorid
NodeJS
JavaScript
HTML5
button样式篇一（ant Design React）
核桃大号
2022-10-26
原文
这篇来介绍button中elementUi、iview、ant中样式结构
ant Design react
ant-react中button分两个文件less:
mixins.less：根据button功能样式不同封装成函数。
index.less：调用mixins.less中的函数来声明button的相关class
我们先来看mixins.less的结构
btn(基础样式，主要用设置按钮通用样式)：
.btn() {
display: inline-block;//行内块元素
font-weight: @btn-font-weight;//字体粗细
text-align: center;//字体居中
touch-action: manipulation;//浏览器只允许进行滚动和持续缩放操作
cursor: pointer;//鼠标移上去形状
background-image: none;//背景图片为空
border: @border-width-base @border-style-base transparent;//边框透明
white-space: nowrap;//不换行
.button-size(@btn-height-base; @btn-padding-base; @font-size-base; @btn-border-radius-base);//padding height font-size border-radius设置
user-select: none;//文本不能被选择
transition: all .3s @ease-in-out;//过渡
position: relative;//相对定位
> .@{iconfont-css-prefix} {
line-height: 1;//行高不带单位是相对字体的比例
&,
&:active,
&:focus {
outline: 0;//是绘制于元素周围的一条线，位于边框边缘的外围，可起到突出元素的作用
&:not([disabled]):hover {
text-decoration: none;//定义标准的文本
&:not([disabled]):active {
outline: 0;
transition: none;
&.disabled,
&[disabled] {
cursor: not-allowed;
> * {
pointer-events: none;//元素永远不会成为鼠标事件的target
&-lg {
.button-size(@btn-height-lg; @btn-padding-lg; @btn-font-size-lg; @btn-border-radius-base);
&-sm {
.button-size(@btn-height-sm; @btn-padding-sm; @btn-font-size-sm; @btn-border-radius-sm);
其中的具体属性不多说了，不知道的可以百度属性就知道了，大概就是设置字体粗细、字体居中、不换行、过渡、定位、边框、激活、焦点、hover、disabled等样式，其中btn中调用了button-size函数。&-lg、&-sm设置大按钮和小按钮，调用了button-size函数
button-size(设置按钮大小):
.button-size(@height; @padding; @font-size; @border-radius) {
padding: @padding;
font-size: @font-size;
border-radius: @border-radius;
height: @height;
以height、padding、font-size、border-radius为输入参数来设置按钮大小，宽度通过padding和font-size就能设置宽度。
下一个部分是设置按钮类型为主按钮、次按钮、虚线按钮、危险按钮、幽灵按键样式函数：
.button-variant-primary(@color; @background) {
.button-color(@color; @background; @background);
&:hover,
&:focus {
.button-color(@color; ~`colorPalette("@{background}", 5)`; ~`colorPalette("@{background}", 5)`);
&:active,
&.active {
.button-color(@color; ~`colorPalette("@{background}", 7)`; ~`colorPalette("@{background}", 7)`);
.button-disabled();
.button-variant-other(@color; @background; @border) {
.button-color(@color; @background; @border);
&:hover,
&:focus {
.button-color(@primary-5; @background; @primary-5);
&:active,
&.active {
.button-color(@primary-7; @background; @primary-7);
.button-disabled();
.button-variant-danger(@color; @background; @border) {
.button-color(@color; @background; @border);
&:hover {
.button-color(@btn-primary-color; ~`colorPalette("@{color}", 5)`; ~`colorPalette("@{color}", 5)`);
&:focus {
.button-color(~`colorPalette("@{color}", 5)`; #fff; ~`colorPalette("@{color}", 5)`);
&:active,
&.active {
.button-color(@btn-primary-color; ~`colorPalette("@{color}", 7)`; ~`colorPalette("@{color}", 7)`);
.button-disabled();
.button-variant-ghost(@color) {
.button-color(@color; transparent; @color);
&:hover,
&:focus {
.button-color(~`colorPalette("@{color}", 5)`; transparent; ~`colorPalette("@{color}", 5)`);
&:active,
&.active {
.button-color(~`colorPalette("@{color}", 7)`; transparent; ~`colorPalette("@{color}", 7)`);
.button-disabled();
代码中我们可以看到这些函数都是调用button-color来设置按钮的边框，背景，文字颜色，和调用button-disabled来设置禁用样式。主要还是基础颜色样式不同，而且hover，active颜色样式不一样。而且在后面函数中btn-primary、btn-default、btn-ghost、btn-dashed、btn-danger调用上面的对应函数。代码如下：
// primary button style
.btn-primary() {
.button-variant-primary(@btn-primary-color; @btn-primary-bg);
// default button style
.btn-default() {
.button-variant-other(@btn-default-color; @btn-default-bg; @btn-default-border);
&:hover,
&:focus,
&:active,
&.active {
background: @btn-default-bg;
text-decoration: none;
// ghost button style
.btn-ghost() {
.button-variant-other(@btn-ghost-color, @btn-ghost-bg, @btn-ghost-border);
// dashed button style
.btn-dashed() {
.button-variant-other(@btn-default-color, @btn-default-bg, @btn-default-border);
border-style: dashed;
// danger button style
.btn-danger() {
.button-variant-danger(@btn-danger-color, @btn-danger-bg, @btn-danger-border);
剩下就是按钮组的样式和圆按钮的样式
.button-group-base(@btnClassName) {//按钮组的基础样式
position: relative;
display: inline-block;
> .@{btnClassName},
> span > .@{btnClassName} {
position: relative;
line-height: @btn-height-base - 2px;
&:hover,
&:focus,
&:active,
&.active {
z-index: 2;
&:disabled {
z-index: 0;
// size
&-lg > .@{btnClassName},
&-lg > span > .@{btnClassName} {
.button-size(@btn-height-lg; @btn-padding-lg; @btn-font-size-lg; 0);
line-height: @btn-height-lg - 2px;
&-sm > .@{btnClassName},
&-sm > span > .@{btnClassName} {
.button-size(@btn-height-sm; @btn-padding-sm; @font-size-base; 0);
line-height: @btn-height-sm - 2px;
> .@{iconfont-css-prefix} {
font-size: @font-size-base;
.btn-group(@btnClassName: btn) {//按钮组主要是设置里面一排按钮的边框和圆角
.button-group-base(@btnClassName);
.@{btnClassName} + .@{btnClassName},
.@{btnClassName} + &,
span + .@{btnClassName},
.@{btnClassName} + span,
> span + span,
& + .@{btnClassName},
& + & {
margin-left: -1px;
.@{btnClassName}-primary + .@{btnClassName}:not(.@{btnClassName}-primary):not([disabled]) {
border-left-color: transparent;
.@{btnClassName} {
border-radius: 0;
> .@{btnClassName}:first-child,
> span:first-child > .@{btnClassName} {
margin-left: 0;
> .@{btnClassName}:only-child {
border-radius: @btn-border-radius-base;
> span:only-child > .@{btnClassName} {
border-radius: @btn-border-radius-base;
> .@{btnClassName}:first-child:not(:last-child),
> span:first-child:not(:last-child) > .@{btnClassName} {
border-bottom-left-radius: @btn-border-radius-base;
border-top-left-radius: @btn-border-radius-base;
> .@{btnClassName}:last-child:not(:first-child),
> span:last-child:not(:first-child) > .@{btnClassName} {
border-bottom-right-radius: @btn-border-radius-base;
border-top-right-radius: @btn-border-radius-base;
&-sm {
> .@{btnClassName}:only-child {
border-radius: @btn-border-radius-sm;
> span:only-child > .@{btnClassName} {
border-radius: @btn-border-radius-sm;
> .@{btnClassName}:first-child:not(:last-child),
> span:first-child:not(:last-child) > .@{btnClassName} {
border-bottom-left-radius: @btn-border-radius-sm;
border-top-left-radius: @btn-border-radius-sm;
> .@{btnClassName}:last-child:not(:first-child),
> span:last-child:not(:first-child) > .@{btnClassName} {
border-bottom-right-radius: @btn-border-radius-sm;
border-top-right-radius: @btn-border-radius-sm;
& > & {
float: left;
& > &:not(:first-child):not(:last-child) > .@{btnClassName} {
border-radius: 0;
& > &:first-child:not(:last-child) {
> .@{btnClassName}:last-child {
border-bottom-right-radius: 0;
border-top-right-radius: 0;
padding-right: 8px;
& > &:last-child:not(:first-child) > .@{btnClassName}:first-child {
border-bottom-left-radius: 0;
border-top-left-radius: 0;
padding-left: 8px;
button样式篇一（ant Design React）的更多相关文章
Ant Design React按需加载
Ant Design是阿里巴巴为React做出的组件库,有统一的样式及一致的用户体验 官网地址:https://ant.design 1.安装: npm install ant --save 2.引用 ...
ant.design React使用Echarts，实力踩坑
最近项目用到Echarts(以下用ec代替),于是照猫画虎得引入到团队的antd项目中,但是遇到2个棘手问题: 1. ec对dom不渲染,检查后发现,原来是全局存在id重复,所以使用React时,最好 ...
ant design + react，自动获取上传音频的时长（react-audio-player）
在后台管理项目中,用户要求上传音频,并且自动获取音频时长. 第一步, import { Upload, Button, Icon } from 'antd'; 第二步,在表单中使用 Upload 组件 ...
button JS篇ant Design of react之二
最近更新有点慢,更新慢的原因最近在看 <css世界>这本书,感觉很不错 <JavaScript高级程序设计> 这本书已经看了很多遍了,主要是复习前端的基础知识,基础知识经常会过 ...
Ant Design 常用命令汇总
Ant Design React 安装 1. 安装脚手架工具# antd-init 是一个用于演示 antd 如何使用的脚手架工具,真实项目建议使用 dva-cli. $ npm install an ...
Ant Design Pro （中后台系统）教程
一.概念:https://pro.ant.design/docs/getting-started-cn(官方网站) 1.Ant Design Pro 是什么: https://www.cnblogs ...
button JS篇ant Design of react
这篇看ant Desgin of react的button按钮的js代码,js代码部分是typescript+react写的. button组件里面引用了哪些组件: import * as React ...
十九、React UI框架Antd(Ant Design)的使用——及react Antd的使用 button组件 Icon组件 Layout组件 DatePicker日期组件
一.Antd(Ant Design)的使用:引入全部Css样式 1.1 antd官网: https://ant.design/docs/react/introduce-cn 1.2 React中使用A ...
通过Blazor使用C#开发SPA单页面应用程序(4) - Ant Design Button
前面学习了Blazor的特点.环境搭建及基础知识,现在我们尝试的做个实际的组件. Ant Design是蚂蚁金服是基于Ant Design设计体系的 UI 组件库,主要用于研发企业级中后台产品.目前官 ...
随机推荐
在java中怎样实现多线程？线程的4种状态
一.在java中怎样实现多线程? extends Thread implement Runnable 方法一:继承 Thread 类,覆盖方法 run(),我们在创建的 Thread 类的子类中重写 ...
CAS机制与自旋锁
CAS(Compare-and-Swap),即比较并替换,java并发包中许多Atomic的类的底层原理都是CAS. 它的功能是判断内存中某个地址的值是否为预期值,如果是就改变成新值,整个过程具有原子 ...
【重学计算机】计组D3章：运算方法与运算器
1. 定点数运算及溢出 定点数加减法:减法化加法,用补码直接相加,忽略进位 溢出:运算结果超出了某种数据类型的表示范围 溢出检测方法:统一思想概括为正正得负或负负得正则溢出,正负或负正不可能溢出 方法 ...
【Python3爬虫】教你怎么利用免费代理搭建代理池
一.写在前面 有时候你的爬虫刚开始的时候可以正常运行,能够正常的爬取数据,但是过了一会,却出现了一个“403 Forbidden",或者是”您的IP访问频率太高“这样的提示,这就意味着你的I ...
JavaScript夯实基础系列（四）：原型
在JavaScript中有六种数据类型:number.string.boolean.null.undefined以及对象,ES6加入了一种新的数据类型symbol.其中对象称为引用类型,其他数据类 ...
Java 加密、解密PDF文档
本篇文章将介绍通过Java编程来设置PDF文档保护的方法.我们可以设置仅用于查阅文档的密码,即该通过该密码打开文档仅用于文档阅读,无法编辑:也可以设置文档编辑权限的密码,即通过该密码打开文档时,文档为 ...
Java运行时环境---ClassLoader类加载机制
背景:听说ClassLoader类加载机制是进入BAT的必经之路. ClassLoader总述: 普通的Java开发其实用到ClassLoader的地方并不多,但是理解透彻ClassLoader类的加 ...
Java开发相关的linux一些基础命令，必须要掌握的
1.查找文件 find / -name filename.txt 根据名称查找/目录下的filename.txt文件. find . -name "*.xml" 递归查找所有的 ...
jenkins实现以gitlab为代码仓库的构建
简介 前一篇随笔是安装jenkins的过程,比较简单,这一次说一下用jenkins配置以gitlab为代码管理仓库的maven项目的完整个构建过程,以及我碰到的一些问题.由于是maven项目,所以我们 ...
CSS实现无外边框列表效果
方法一:使用外层容器切割 给每一个 li 设定右边框和下边框线 把ul放置在一个外层div中,设定div的宽高,通过overflow:hidden将一部分li的边框隐藏 此方法只需要计算父容器的宽高, ...
热门专题
mysql 表 状态 status
Java 对象属性名称排序
openLDAP 主机控制策略
vnc如何打开同一个桌面
datagridview锁定当前单元格
matlab画光滑曲线图 plot是折线
mysql 删除指定字符串及逗号
python学生信息管理系统
k3wiseBOM多级展开
initialize_list是什么
tortoisegit 怎么上传文件到指定目录下
python将有向网络图中节点定位在不同分区内
csv.DictReade分隔符
写一个win10显示流量窗口代码java
limux安装百度网盘
android 安装linux
怎么在ubunto中找到下载的软件
微信小程序代码包上限2048kb
powerbi刷新快捷键
公众号文章之间是否能相互跳转
Home
Powered By WordPress