组件默认支持六种类型的按钮,每种类型对应不同的颜色: primary(蓝色) success(绿色) warning(黄色) danger(红色) info(灰色) 默认按钮(无 type 属性)这些颜色类型可以通过 type 属性来设置,例如: html <el-button type="primary">Primary Button</el-button> <el-button type="success">...
element-ui为我们提供了几种颜色的按钮,只需要设置 type属性就可以达到对应效果 <el-button>默认按钮</el-button><el-buttontype="primary">主要按钮</el-button><el-buttontype="success">成功按钮</el-button><el-buttontype="info">信息按钮</el-button><el-buttontype="warning">警告按钮</el-button><...
type:"primary", //按钮是否隐藏 hide:false, // icon颜色 icon:"icon-back", //背景颜色 color:"pink" },{ name:"歌谣1", type:"default", icon:"icon-back" },{ name:"歌谣2", type:"primary" },{ name:"歌谣3", type:"default", //背景颜色 color:"pink" }], 1. 2. 3. 4. 5. ...
<el-button round><span>圆形按钮</span></el-button> <el-button type="primary" round><span>主要按钮</span></el-button> <el-button type="success" round><span>成功按钮</span></el-button> <el-button type="info" round><span>信息按钮</span></el-button> <el-button type="warning" ro...
.el-button--primary { background-color: #105EED !important; color: white !important; font-size: 20px; height: 66px; } 用按钮切换界面 <el-button type="info" data-id="2" plain :style="{'background-color': tab == 2 ? '#839DB9' : '','color': tab == 2 ? 'white' : 'blac...
<el-button type="text">文字按钮</el-button> <!-- 朴素(plain):true,false --> <el-button type="primary" plain>主要按钮</el-button> <!-- 圆角(round):true,false --> <el-button round>主要按钮</el-button> <!-- 圆形(circle):true,false。一般与图标 icon 连用 --> ...
type:按钮类型,可以取值为primary、success、warning、danger、info和text,分别对应不同的颜色和样式。 size:按钮尺寸,可以取值为medium、small和mini,分别对应不同的尺寸大小。 disabled:禁用按钮,当设置为true时,按钮将无法点击。 loading:按钮加载状态,当设置为true时,按钮将显示加载状态。
el-button按钮的分类基本是靠颜色区分的,另外还有一种文本按钮type="text",文本按钮由于比较小,比较适合用于表格每行的操作栏部分。 按钮分类:<el-button>默认</el-button><el-buttontype="primary">primary</el-button><el-buttontype="success">success</el-button><el-buttontype="info">info</el-button>...
在写一个系统的css文件的时候,发现了不同类型的button的初始颜色不同,为了完美的使button的颜色和背景的颜色相映照,就去搜了一下,小做总结,为以后的使用做准备。 <div><el-button><span>默认按钮</span></el-button><el-buttontype="primary"><span>主要按钮</span></el-button><el-buttontype="success...
type: "primary", //按钮是否隐藏 hide: false, // icon颜色 // icon:"icon-back", //背景颜色 color: "pink", disabled: true, }, { name: "歌谣1", type: "default", icon: "icon-back", }, { name: "歌谣2", type: "primary", ...