柵格布局:
-
<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>
