欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

Element-ui学习笔记1

程序员文章站 2022-03-02 11:01:06
1.col,row布局注意事项 el-row el-col gutter就是css,span的时候宽度是按boder-box来计算。 将 type 属性赋值为 'flex',可以启用 flex 布局,并可通过 justify 属性来指定 start, center, end, space-betwe ......

1.col,row布局注意事项

el-row el-col gutter就是css,span的时候宽度是按boder-box来计算。

将 type 属性赋值为 'flex',可以启用 flex 布局,并可通过 justify 属性来指定 start, center, end, space-between, space-around 其中的值来定义子元素的排版方式

xssmmdlg 和 xl

Element-ui学习笔记1

Element-ui学习笔记1

基于断点的隐藏类

element 额外提供了一系列类名,用于在某些条件下隐藏元素。这些类名可以添加在任何 dom 元素或自定义组件上。如果需要,请自行引入以下文件:

import 'element-ui/lib/theme-chalk/display.css';

包含的类名及其含义为:

  • hidden-xs-only - 当视口在 xs 尺寸时隐藏
  • hidden-sm-only - 当视口在 sm 尺寸时隐藏
  • hidden-sm-and-down - 当视口在 sm 及以下尺寸时隐藏
  • hidden-sm-and-up - 当视口在 sm 及以上尺寸时隐藏
  • hidden-md-only - 当视口在 md 尺寸时隐藏
  • hidden-md-and-down - 当视口在 md 及以下尺寸时隐藏
  • hidden-md-and-up - 当视口在 md 及以上尺寸时隐藏
  • hidden-lg-only - 当视口在 lg 尺寸时隐藏
  • hidden-lg-and-down - 当视口在 lg 及以下尺寸时隐藏
  • hidden-lg-and-up - 当视口在 lg 及以上尺寸时隐藏
  • hidden-xl-only - 当视口在 xl 尺寸时隐藏

2.container容器

<el-container>:外层容器。当子元素中包含 <el-header> 或 <el-footer> 时,全部子元素会垂直上下排列,否则会水平左右排列。

<el-header>:顶栏容器。

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

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

<el-footer>:底栏容器。

注意考虑一个兼容性问题,因为采用的是flex布局

<el-container> 的子元素只能是后四者,后四者的父元素也只能是 <el-container>

header,footer默认高度60px,有height属性

aside默认宽度300px,有width属性

3.color颜色和字体,边框等

有一套初始化模板,可以通过scss改变变量值,或着直接下载一套自定义主题进行更改

font-family: "helvetica neue",helvetica,"pingfang sc","hiragino sans gb","microsoft yahei","微软雅黑",arial,sans-serif;

 

层级 字体大小
辅助文字 12px extra small
正文(小) 13px small
正文 14px base
小标题 16px medium
标题 18px large
主标题 20px extra large

边框实线 默认1px 虚线 默认2px

圆角

无圆角

border-radius: 0px

小圆角

border-radius: 2px

大圆角

border-radius: 4px

圆形圆角

border-radius: 30px

基础投影 box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04)

浅色投影 box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1)

 

icon图标直接使用类名

<class="el-icon-edit"></i>

<class="el-icon-share"></i>

<class="el-icon-delete"></i>

<el-button type="primary" icon="el-icon-search">搜索</el-button>在标签里插入图标用icon属性

图标大全 https://element.eleme.cn/#/zh-cn/component/icon