elementui的button主要使通过给button添加限定来修改样式的,具体使如何实现的我还不是很清楚,但是,不妨碍修改样式
elementui中button主要是靠字体、内边距(padding)撑起来的,因此,修改字体大小和内边距(padding)可以修改其大小(介绍按钮大小限定会详细介绍),下面来看elementui中button的各种限定:
element的各种限定:
限定的话主要有以下几方面:
颜色限定:颜色限定主要包含的样式有:字体颜色(color) 背景颜色(background-color) 边框颜色(border-color)
primary 主要
success 成功
info 信息
warning 警告
danger 危险
plain 朴素
大小限定:大小限定主要包含样式有 字体大小(font-size) 内边距大小(padding)
medium 中等
small 小型
mini 迷你
形状限定:形状限定主要包含的就是圆角样式实现的(border-radius)
round 圆角按钮
circle 圆形按钮
介绍完按钮限定,接下来就是修改样式了。
如果是自己从头开始写项目,那么可以使用普通按钮直接使用:.el-button(样式类名)修改样式,button主要有哪些样式上面也有介绍,这里就不赘述了,不过有一点要注意,如果官方给的四种大小没有你想要的,需要自己修改,不要直接修改按钮的高度(height);上面提到过官方的按钮是靠字体大小(font-size)和内边距(padding)撑起来的,如果直接高度,可能会导致按钮字体不居中,宽度(width)也一样。颜色、字体颜色的都可以自己加。
但如过是别人的模板,但是又要自己修改样式,就需要把模板中不同的按钮样式改统一了,那么就需要改不同样式的按钮了
如果是普通按钮,使用.el-button 就好如:
.el-button {
background-color: #000;
color: red;
}
如果有各种限定的,.el-button 就不好使了,需要在给类也加上同样的限定,如成功按钮就要 .el-button--success 来修改,别的限定也一样类名如下:
.el-button--primary 主要按钮
.el-button--success 成功
.el-button--info 信息
.el-button--warning 警告
.el-button--danger 危险
.el-button--medium 中等
.el-button--small 小型
.el-button--mini 迷你
如:
.el-button--info,
.el-button--default,
.el-button--cyan,
.el-button--primary,
.el-button--success,
.el-button--warning,
.el-button--danger {
border: 1px solid #cococo;
color: red;
}
以上这些是可以用来修改限定按钮的样式,但是还有几个限定修改方式不是加限定了是加.is-[限定名],主要有 plain round circle disabled(这个是html按钮本身的属性,虽然有elementui的样式,但是我没有归类到element的限定中)
如需修改,需要用下面的方式:
.el-button--primary.is-plain
如果是还有别的这种方式的限定,继续 . 就好,如主要按钮(primary)+朴素(plain )+不可用就需要
.el-button--primary.is-plain.is-disabled
如:
.el-button--primary.is-disabled:active {
background-color: #eee;
border: 1px solid #ccc;
}
在此就不一一列举了。
如果有鼠标悬停的,直接使用伪类选择器 :hover就好。
如:
.el-button--danger.is-disabled:hover{
background-color: #eee;
border: 1px solid #ccc;
}
}