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学习笔记(一)的更多相关文章

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

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

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

    在angular学习笔记(三十)-指令(4)-transclude文章的末尾提到了,如果在指令中需要反复使用被嵌套的那一坨,需要使用transclude()方法. 在angular学习笔记(三十)-指 ...

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

    这篇主要介绍angular指令中的link属性: link:function(scope,iEle,iAttrs,ctrl,linker){ .... } link属性值为一个函数,这个函数有五个参数 ...

  4. angular学习笔记(三十)-指令(1)-概述

    之前在 angular学习笔记(十九)-指令修改dom 里面已经简单的提到了angular中的指令,现在来详细的介绍 '指令' 一.指令的创建: dirAppModule.directive('dir ...

  5. angular学习笔记(三十一)-$location(2)

    之前已经介绍了$location服务的基本用法:angular学习笔记(三十一)-$location(1). 这篇是上一篇的进阶,介绍$location的配置,兼容各版本浏览器,等. *注意,这里介绍 ...

  6. angular学习笔记(三十一)-$location(1)

    本篇介绍angular中的$location服务的基本用法,下一篇介绍它的复杂的用法. $location服务的主要作用是用于获取当前url以及改变当前的url,并且存入历史记录. 一. 获取url的 ...

  7. angular学习笔记(三十)-指令(7)-compile和link(2)

    继续上一篇:angular学习笔记(三十)-指令(7)-compile和link(1) 上一篇讲了compile函数的基本概念,接下来详细讲解compile和link的执行顺序. 看一段三个指令嵌套的 ...

  8. angular学习笔记(三十)-指令(7)-compile和link(1)

    这篇主要讲解指令中的compile,以及它和link的微妙的关系. link函数在之前已经讲过了,而compile函数,它和link函数是不能共存的,如果定义了compile属性又定义link属性,那 ...

  9. angular学习笔记(三十)-指令(2)-restrice,replace,template

    本篇主要讲解指令中的 restrict属性, replace属性, template属性 这三个属性 一. restrict: 字符串.定义指令在视图中的使用方式,一共有四种使用方式: 1. 元素: ...

随机推荐

  1. HDU-5792 World is Exploding(树状数组)

    题目大意:给一个整数序列,统计四元组(a,b,c,d)的个数,满足条件1:a<>b<>c<>d:条件2:<a,b>组成一个顺序对,<c,d> ...

  2. Activator.CreateInstance 方法 (Type) 的用法

    转自:http://www.cnblogs.com/lmfeng/archive/2012/01/30/2331666.html Activator.CreateInstance 方法 (Type) ...

  3. Redis 命令 - Server

    BGREWRITEAOF Asynchronously rewrite the append-only file BGSAVE Asynchronously save the dataset to d ...

  4. CCF-201312-1-出现次数最多的数

    问题描述 试题编号: 201312-1 试题名称: 出现次数最多的数 时间限制: 1.0s 内存限制: 256.0MB 问题描述: 问题描述 给定n个正整数,找出它们中出现次数最多的数.如果这样的数有 ...

  5. 重温MFC

    1. Button控件 2. 旋转和高级编辑控件 3. 标签控件和属性页 4. 列表控件 5. 树控件 6. 进度条控件和滑动条控件 7. 滚动条 8.工具栏和状态栏

  6. Java 学习笔记 (四) Java 语句优化

    这个问题是从headfirst java看到的. 需求: 一个移动电话用的java通讯簿管理系统,要求最有效率的内存使用方法. 下面两段程序的优缺点,哪个占用内存更少. 第一段: Contact[]c ...

  7. python多环境下虚拟环境的搭建和使用

    由于开发环境要求,或者实际需要.经常会出现python2.7和python3.x共存下的开发环境问题.虚拟环境的搭建可以很好的隔离Projects的开发环境. 1.首先解决python2.7和pyth ...

  8. SpringBoot读取war包jar包Resource资源文件解决办法

    SpringBoot读取war包jar包Resource资源文件解决办法 场景描述 在开发过程中我们经常会碰到要在代码中获取资源文件的情况,而我在最近在SpringBoot项目中时碰到一个问题,就是在 ...

  9. Spring boot starter pom的依赖关系说明

    Spring Boot 通过starter依赖为项目的依赖管理提供帮助.starter依赖起始就是特殊的maven依赖,利用了传递依赖解析,把常用库聚合在一起,组成了几个为特定功能而定制的依赖. sp ...

  10. 不走标准路的微软:少一个斜杠的URI Path

    今天又被微软不按标准的做法折腾了一下,写篇博文抱怨一下. 我们先来看一下IETF(Internet Engineering Task Force)对URI结构的标准定义(链接): 注意上面的path部 ...