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=

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

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

时间： 2024-09-30 22:52:05

element ui Angular学习笔记（一）的相关文章

angular学习笔记(八)

本篇介绍angular控制视图的显示和隐藏: 通过给元素添加ng-show属性或者ng-hide属性来控制视图的显示或隐藏: ng-show: 绑定的数据值为true时,显示元素,值为false时,隐藏元素 ng-hide: 绑定的数据值为true时,隐藏元素,值为false时,显示元素 (其实只要用到其中一个就可以了) 下面来看个简单的例子,点击按钮可以显示/隐藏元素: <!DOCTYPE html> <html ng-app> <head> <title>

angular学习笔记(五)-阶乘计算实例(1)

<!DOCTYPE html> <html ng-app> <head> <title>2.3.2计算阶乘实例1</title> <meta charset="utf-8"> <script src="../angular.js"></script> <script src="script.js"></script> </

angular学习笔记(一)

入门实例: 一个购物车产品清单,可以自行改变数量,总价自动计算的小例子: 代码如下: <!DOCTYPE html> <html ng-app> <head> <title>1.1实例:购物车</title> <meta charset="utf-8"> <script src="../angular.js"></script> <script src="

angular学习笔记(三十)-指令(5)-link

这篇主要介绍angular指令中的link属性: link:function(scope,iEle,iAttrs,ctrl,linker){ .... } link属性值为一个函数,这个函数有五个参数:scope,iEle,iAttrs,ctrl,linker scope:指令所在的作用域,这个scope和指令定义的scope是一致的.至于指令的scope,会在讲解scope属性的时候详细解释 iEle:指令元素的jqLite封装.(也就是说iEle可以调用angular封装的简版jq的方法和属

angular学习笔记(三十)-指令(6)-transclude()方法(又称linker()方法)-模拟ng-repeat指令

在angular学习笔记(三十)-指令(4)-transclude文章的末尾提到了,如果在指令中需要反复使用被嵌套的那一坨,需要使用transclude()方法. 在angular学习笔记(三十)-指令(5)-link文章也提到了link函数的第五个参数linker. 这篇文章就来讲解一下transclude()方法(linker()方法),是怎么使用的,另外,它也是compile函数的第三个参数,用法一样. 下面就通过自己写一个简易的模拟ngRepeat的指令cbRepeat,来了解linke

angular学习笔记(五)-阶乘计算实例(2)

<!DOCTYPE html> <html ng-app> <head> <title>2.3.3计算阶乘实例2</title> <meta charset="utf-8"> <script src="../angular.js"></script> <script src="script.js"></script> </

angular学习笔记(三十)-指令(10)-require和controller

本篇介绍指令的最后两个属性,require和controller 当一个指令需要和父元素指令进行通信的时候,它们就会用到这两个属性,什么意思还是要看栗子: html: <outer‐directive> <inner‐directive></inner‐directive> </outer‐directive> 这里有两个指令,一个outer-directive指令元素,它里面又有一个inner-directive指令元素. js: app.directiv

angular学习笔记(三十)-指令(1)

之前在 angular学习笔记(十九)-指令修改dom 里面已经简单的提到了angular中的指令,现在来详细的介绍 '指令' 一.指令的创建: dirAppModule.directive('directive-name',function(){ var obj = { restrict:'string', priority:number, template:'string', templateUrl:'string', replace:bool, transclude:bool or str

angular学习笔记(二十八)-$http(6)-使用ngResource模块构建RESTful架构

ngResource模块是angular专门为RESTful架构而设计的一个模块,它提供了'$resource'模块,$resource模块是基于$http的一个封装.下面来看看它的详细用法 1.引入angular-resource.min.js文件 2.在模块中依赖ngResourece,在服务中注入$resource var HttpREST = angular.module('HttpREST',['ngResource']); HttpREST.factory('cardResource