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

1.Layout布局（栅格基础布局）

标签：

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

 el-col,一列   用法（el-col ：span="24", 1-24自由选择）

属性

gutter： 指定栏与栏之间的间隔，默认为零。 用法

offset： 分栏偏移。 用法

flex布局

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

用法

响应式布局

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

栅栏系统属性

2.图标

使用：

通过设置类名为el-icon-iconName来使用即可。eg

3.button按钮

1.基础用法

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

默认按钮

默认按钮

2.禁用状态

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

主要按钮

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