zoukankan      html  css  js  c++  java
  • 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
    FIGHTING
  • 相关阅读:
    死信队列消息原因排查
    MQ中间件死信队列深度不断增加问题解决案例
    DB2 57016报错的解决办法(表状态不正常,导致表无法操作)
    万门大学--童哲
    eclipse jvm配置
    weblogic threadpool has stuck threads
    8-10 ObserveableCommand演示
    8-9 四种执行方式区别讲解
    8-8 toObserve两种形态演示
    8-7 Observe两种形态演示
  • 原文地址:https://www.cnblogs.com/ljwsyt/p/9007407.html
Copyright © 2011-2022 走看看