element ui Angular学习笔记（一）

最新推荐文章于 2024-11-28 02:10:58 发布

weixin_30823227

最新推荐文章于 2024-11-28 02:10:58 发布

阅读量796

点赞数

CC 4.0 BY-SA版权

文章标签： javascript ui ViewUI

原文链接：http://www.cnblogs.com/ljwsyt/p/9007407.html

本文介绍了 Element Angular 组件库的安装与使用方法，包括如何通过 npm 安装、Angular-cli 引入、布局组件配置及按钮、图标等常用组件的使用技巧。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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=

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