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