饿了吗组件Element研究之基础篇

el-row包裹一行,距下20px

?el-col,一列 ? 用法(el-col :span="24", 1-24自由选择)

gutter: 指定栏与栏之间的间隔,默认为零。 用法 <el-row :gutter="20">

offset: 分栏偏移。 用法 <el-col :span="6" :offset="6">

将type属性赋值为 'flex',可以启用 flex 布局,并可通过justify属性来指定 start, center, end, space-between(左右不留间隔), space-around (左右也有间隔)其中的值来定义子元素的排版方式。

用法 <el-row type="flex" justify="center">

参照了 Bootstrap 的 响应式设计,预设了四个响应尺寸:xs、sm、md和lg。

通过设置类名为el-icon-iconName来使用即可。eg <i class="el-icon-edit"></i>

Button 组件默认提供7种主题,由type属性来定义,默认为default。

<el-button>默认按钮</el-button>

<el-button type="primary">默认按钮</el-button>

你可以使用disabled属性来定义按钮是否可用,它接受一个Boolean值。

<el-button :plain="true" :disabled="true">主要按钮</el-button>

type="success warning danger info"

自定义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;}

el-table (--fit,--stripe,--border,,,)?

?- el-table__header-wrapper > table > thead > tr > th

?- el-table__body-wrapper ?> table > tbody> tr(.el-table__row) > td