1.Layout布局(柵格基礎(chǔ)布局)
標簽:
el-row包裹一行齐婴,距下20px
?el-col,一列 ? 用法(el-col :span="24", 1-24自由選擇)
屬性
gutter: 指定欄與欄之間的間隔血久,默認為零凶朗。 用法 <el-row :gutter="20">
offset: 分欄偏移敬锐。 用法 <el-col :span="6" :offset="6">
flex布局
將type屬性賦值為 'flex'快耿,可以啟用 flex 布局莫秆,并可通過justify屬性來指定 start, center, end, space-between(左右不留間隔), space-around (左右也有間隔)其中的值來定義子元素的排版方式。
用法 <el-row type="flex" justify="center">
響應(yīng)式布局
參照了 Bootstrap 的 響應(yīng)式設(shè)計极舔,預(yù)設(shè)了四個響應(yīng)尺寸:xs、sm链瓦、md和lg拆魏。
2.圖標
使用:
通過設(shè)置類名為el-icon-iconName來使用即可。eg <i class="el-icon-edit"></i>
3.button按鈕
1.基礎(chǔ)用法
Button 組件默認提供7種主題慈俯,由type屬性來定義渤刃,默認為default。
<el-button>默認按鈕</el-button>
<el-button type="primary">默認按鈕</el-button>
2.禁用狀態(tài)
你可以使用disabled屬性來定義按鈕是否可用贴膘,它接受一個Boolean值卖子。
<el-button :plain="true" :disabled="true">主要按鈕</el-button>
3.顏色傾向
type="success warning danger info"
4.圖標按鈕
ps.其他類名
自定義css??
.block:{padding:30px 24px; border-bottom:#eff2f6}
.demonstration{font-size:14px;color:#8492a6;line-height:44px}
.demo-button .intro-block .wrapper{float:right;margin-right:20px;}
.el-dropdown {display:inline-block;position:relative;}
Table
類名
el-table (--fit,--stripe,--border,,,)?
?- el-table__header-wrapper > table > thead > tr > th
?- el-table__body-wrapper?> table > tbody> tr(.el-table__row) > td