element |
您所在的位置:网站首页 › elementui按钮loading › element |
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; } } 最后,elementUI自带一个左边的外边距(margin-left),如果排版需要,记得将其去掉 |
今日新闻 |
推荐新闻 |
CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |