码迷,mamicode.com
首页 > 其他好文 > 详细

element ui Angular学习笔记(一)

时间:2018-05-08 14:33:41      阅读:2334      评论:0      收藏:0      [点我收藏+]

标签:color   pac   BMI   自己的   自己   idt   影响   string   save   

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学习笔记(一)

标签:color   pac   BMI   自己的   自己   idt   影响   string   save   

原文地址:https://www.cnblogs.com/ljwsyt/p/9007407.html

(1)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!