Element-pc框架

栅格布局:

  • <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 分栏间隔 如:

type 布局模式

justify flex 布局下的水平排列方式 start/end/center/space-around/space-between

align flex 布局下的垂直排列方式 top/middle/bottom 如: align="middle"

tag 自定义元素标签 默认

如:tag="p"

col - 属性
span 栅格占据的列数 默认24 如:

offset 栅格左侧的间隔格数

push 栅格向右移动格数

pull 栅格向左移动格数

内置过渡动画

fade 淡入淡出
提供 el-fade-in-linearel-fade-in 两种效果

// fade 淡入淡出

zoom 缩放
提供 el-zoom-in-centerel-zoom-in-topel-zoom-in-bottom 三种效果

collapse 内容展开折叠
使用 el-collapse-transition 组件实现折叠展开效果


你可能感兴趣的:(Element-pc框架)