当前位置： 移动技术网 > IT编程>网页制作>CSS > Element-ui学习笔记1

Element-ui学习笔记1

2019年06月12日  | 移动技术网IT编程  | 我要评论

1.col,row布局注意事项

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

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

xs、sm、md、lg 和 xl

row属性

col属性

基于断点的隐藏类

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图标直接使用类名

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

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

<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

 

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网