美文网首页
Element-ui框架学习

Element-ui框架学习

作者: 田野的海螺 | 来源:发表于2018-12-28 15:15 被阅读0次

    element-ui:已开源,使用率多,开发团队实力更强,element 提供了 Sketch 和 Axure 工具 对设计人员友好;当前共46个组件,对表格/树相对薄弱,但是团队影响力大,文档按期维护更新也是一个优势,组件整体色调用色没有antd明亮

    1.Layout 布局
    例:
    row属性:
    type 属性赋值为 'flex',可以启用 flex 布局,
    justify 属性来指定 start, center, end, space-between, space-around 其中的值来定义子元素的
    排版方式
    col属性:
    span 属性我们就可以自由地组合布局。
    offset 属性可以指定分栏偏移的栏数。
    col属性响应式: :xs="8" :sm="6" :md="4" :lg="3" :xl="1";
    <el-row :gutter="20" type="flex" justify="center">
    <el-col :span="24" :offset="6"><div class="grid-content bg-purple-dark"></div></el-col>
    </el-row>
    2.Container 布局容器
    <el-container>:外层容器。当子元素中包含 <el-header> 或 <el-footer> 时,全部子元素会垂直上下排列,否则会水平左右排列。

    <el-header>:顶栏容器。

    <el-aside>:侧边栏容器。

    <el-main>:主要区域容器。

    <el-footer>:底栏容器。
    可以组合布局

    <el-container>
    <el-header>Header</el-header>
    <el-main>Main</el-main>
    </el-container>
    3.提供Color 色彩和字体规范
    4.图标:<i class="el-icon-edit"></i>
    5.button:
    type="primary / success / warning / danger / info / text" //按钮类型(还有文字按钮)
    icon="el-icon-edit" //是否带有图标
    circle/round/plain //按钮形状
    disabled:
    <el-button type="primary" icon="el-icon-search" circle>搜索</el-button>
    6.单选
    <el-radio disabled v-model="radio1" label="选中且禁用">备选项</el-radio>
    7.checkbox
    <el-checkbox-group v-model="checkList">
    <el-checkbox label="复选框 A"></el-checkbox>
    <el-checkbox label="复选框 B"></el-checkbox>
    <el-checkbox label="复选框 C"></el-checkbox>
    <el-checkbox label="禁用" disabled></el-checkbox>
    <el-checkbox label="选中且禁用" disabled></el-checkbox>
    </el-checkbox-group>
    <........之后没有一个个去记录,除了写法不一样,很多大致功能似......................................>

    相关文章

      网友评论

          本文标题:Element-ui框架学习

          本文链接:https://www.haomeiwen.com/subject/xurslqtx.html