element ui Angular學習筆記（一）
1.element ui安裝
npm i --save element-angular
2.Angular-cli引入
引入後需要開啟ElModule.forRoot()，也可以單獨引入某個組件入ElChildModules.ElButton
3.指令
[el-class]
如:<el-alert [el-class]="‘myClass‘">text</el-alert>
.myClass { >div { color: #ccc; } }
在自己的@comopnent內使用encapsulation: ViewEncapsulation.None來覆蓋樣式，使element Angular可以影響組件樣式
4.布局
layout布局
基礎采用24分欄布局。
el-row,el-col,span,gutter(間隔),type="flex"(對齊，justify:start, center, end, space-between, space-around)
row屬性:gutter,type,justify,align
col屬性:span,offset,push,pull,xs,sm,md,lg,xl
container布局
el-container(direction:horizontal / vertical),el-header(height),el-aside(width),el-main,el-footer(height)
5.icon圖標
5.1使用class=“el-icon+-iconName”
5.2使用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
| size | 尺寸 | string | arge,small,mini | - |
| type | 類型 | string | primary,success,warning,danger,info,text | - |
| plain | 是否樸素按鈕 | boolean | — | false |
| round | 是否圓形按鈕 | boolean | — | false |
| loading | 是否加載中狀態 | boolean | — | false |
| elDisabled | 是否禁用狀態 | boolean | — | false |
| icon | 圖標，已有的圖標庫中的圖標名 | string | — | - |
| native-type | 原生 type 屬性 | string | button,submit,reset | button |
element ui Angular學習筆記（一）