1.element ui installation
npm i --save element-angular
2. Angular-cli introduction
After the introduction, you need to open ElModule.forRoot(), or you can introduce a component into ElChildModules.ElButton separately
3. Instructions
[el-class]
如:<el-alert [el-class]="'myClass'">text</el-alert>
.myClass { >div { color: #ccc; } }
Use encapsulation: ViewEncapsulation.None inside your own @comopnent to override styles so element Angular can affect component styles
4. Layout
layout layout
The base uses a 24-column layout.
el-row,el-col,span,gutter(间隔),type="flex"(对齐，justify:start, center, end, space-between, space-around)
row属性:gutter,type,justify,align
col attribute: span, offset, push, pull, xs, sm, md, lg, xl
container layout
el-container(direction:horizontal / vertical),el-header(height),el-aside(width),el-main,el-footer(height)
5.icon icon
5.1使用class=“el-icon+-iconName”
5.2 Use el-icon, name=
<span class="icons"> <i class="el-icon-edit"></i> <el-icon name="share"></el-icon> <el-icon name="delete"></el-icon> </span> <el-button type="primary" icon="search">搜索</el-button>
6. Button button
| size | size | string | arge,small,mini | - |
| type | Types of | string | primary,success,warning,danger,info,text | - |
| plain | Simple button | boolean | — | false |
| round | round button | boolean | — | false |
| loading | Is it loading status | boolean | — | false |
| elDisabled | Is it disabled | boolean | — | false |
| icon | icon, the name of the icon in the existing icon library | string | — | - |
| native-type | native type attribute | string | button,submit,reset | button |