栅格布局:
-
<768px-- xs -
≥768px-- sm -
>=992px-- md -
1200px-- lg -
1920px-- xl
断点隐藏:
引入以下文件，即可使用断点隐藏
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 尺寸时隐藏
row-属性
gutter 分栏间隔 如: <el-row :gutter="10">
type 布局模式 <el-row type="flex">
justify flex 布局下的水平排列方式 start/end/center/space-around/space-between
align flex 布局下的垂直排列方式 top/middle/bottom 如: align="middle"
tag 自定义元素标签 默认<div> 如：tag="p"
col - 属性
span 栅格占据的列数 默认24 如: <el-col :span="12">
offset 栅格左侧的间隔格数
push 栅格向右移动格数
pull 栅格向左移动格数
内置过渡动画
fade 淡入淡出
提供 el-fade-in-linear 和 el-fade-in 两种效果
// fade 淡入淡出
<transition name="el-fade-in-linear"></transition>
zoom 缩放
提供 el-zoom-in-center，el-zoom-in-top 和 el-zoom-in-bottom 三种效果
collapse 内容展开折叠
使用 el-collapse-transition 组件实现折叠展开效果
<el-collapse-transition></el-collapse-transition>
