Layout 布局

通过基础的 24 分栏，迅速简便地创建布局。

基础布局

使用单一分栏创建基础的栅格布局。

Layout 布局 - 图1

通过 row 和 col 组件，并通过 col 组件的 span 属性我们就可以自由地组合布局。

  1. <el-row>
  2.   <el-col :span="24"><div class="grid-content bg-purple-dark"></div></el-col>
  3. </el-row>
  4. <el-row>
  5.   <el-col :span="12"><div class="grid-content bg-purple"></div></el-col>
  6.   <el-col :span="12"><div class="grid-content bg-purple-light"></div></el-col>
  7. </el-row>
  8. <el-row>
  9.   <el-col :span="8"><div class="grid-content bg-purple"></div></el-col>
  10.   <el-col :span="8"><div class="grid-content bg-purple-light"></div></el-col>
  11.   <el-col :span="8"><div class="grid-content bg-purple"></div></el-col>
  12. </el-row>
  13. <el-row>
  14.   <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
  15.   <el-col :span="6"><div class="grid-content bg-purple-light"></div></el-col>
  16.   <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
  17.   <el-col :span="6"><div class="grid-content bg-purple-light"></div></el-col>
  18. </el-row>
  19. <el-row>
  20.   <el-col :span="4"><div class="grid-content bg-purple"></div></el-col>
  21.   <el-col :span="4"><div class="grid-content bg-purple-light"></div></el-col>
  22.   <el-col :span="4"><div class="grid-content bg-purple"></div></el-col>
  23.   <el-col :span="4"><div class="grid-content bg-purple-light"></div></el-col>
  24.   <el-col :span="4"><div class="grid-content bg-purple"></div></el-col>
  25.   <el-col :span="4"><div class="grid-content bg-purple-light"></div></el-col>
  26. </el-row>
  28. <style>
  29.   .el-row {
  30.     margin-bottom: 20px;
  31.     &:last-child {
  32.       margin-bottom: 0;
  33.     }
  34.   }
  35.   .el-col {
  36.     border-radius: 4px;
  37.   }
  38.   .bg-purple-dark {
  39.     background: #99a9bf;
  40.   }
  41.   .bg-purple {
  42.     background: #d3dce6;
  43.   }
  44.   .bg-purple-light {
  45.     background: #e5e9f2;
  46.   }
  47.   .grid-content {
  48.     border-radius: 4px;
  49.     min-height: 36px;
  50.   }
  51.   .row-bg {
  52.     padding: 10px 0;
  53.     background-color: #f9fafc;
  54.   }
  55. </style>

分栏间隔

分栏之间存在间隔。

Layout 布局 - 图2

Row 组件 提供 gutter 属性来指定每一栏之间的间隔，默认间隔为 0。

  1. <el-row :gutter="20">
  2.   <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
  3.   <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
  4.   <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
  5.   <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
  6. </el-row>
  8. <style>
  9.   .el-row {
  10.     margin-bottom: 20px;
  11.     &:last-child {
  12.       margin-bottom: 0;
  13.     }
  14.   }
  15.   .el-col {
  16.     border-radius: 4px;
  17.   }
  18.   .bg-purple-dark {
  19.     background: #99a9bf;
  20.   }
  21.   .bg-purple {
  22.     background: #d3dce6;
  23.   }
  24.   .bg-purple-light {
  25.     background: #e5e9f2;
  26.   }
  27.   .grid-content {
  28.     border-radius: 4px;
  29.     min-height: 36px;
  30.   }
  31.   .row-bg {
  32.     padding: 10px 0;
  33.     background-color: #f9fafc;
  34.   }
  35. </style>

混合布局

通过基础的 1/24 分栏任意扩展组合形成较为复杂的混合布局。

Layout 布局 - 图3

  1. <el-row :gutter="20">
  2.   <el-col :span="16"><div class="grid-content bg-purple"></div></el-col>
  3.   <el-col :span="8"><div class="grid-content bg-purple"></div></el-col>
  4. </el-row>
  5. <el-row :gutter="20">
  6.   <el-col :span="8"><div class="grid-content bg-purple"></div></el-col>
  7.   <el-col :span="8"><div class="grid-content bg-purple"></div></el-col>
  8.   <el-col :span="4"><div class="grid-content bg-purple"></div></el-col>
  9.   <el-col :span="4"><div class="grid-content bg-purple"></div></el-col>
  10. </el-row>
  11. <el-row :gutter="20">
  12.   <el-col :span="4"><div class="grid-content bg-purple"></div></el-col>
  13.   <el-col :span="16"><div class="grid-content bg-purple"></div></el-col>
  14.   <el-col :span="4"><div class="grid-content bg-purple"></div></el-col>
  15. </el-row>
  17. <style>
  18.   .el-row {
  19.     margin-bottom: 20px;
  20.     &:last-child {
  21.       margin-bottom: 0;
  22.     }
  23.   }
  24.   .el-col {
  25.     border-radius: 4px;
  26.   }
  27.   .bg-purple-dark {
  28.     background: #99a9bf;
  29.   }
  30.   .bg-purple {
  31.     background: #d3dce6;
  32.   }
  33.   .bg-purple-light {
  34.     background: #e5e9f2;
  35.   }
  36.   .grid-content {
  37.     border-radius: 4px;
  38.     min-height: 36px;
  39.   }
  40.   .row-bg {
  41.     padding: 10px 0;
  42.     background-color: #f9fafc;
  43.   }
  44. </style>

分栏偏移

支持偏移指定的栏数。

Layout 布局 - 图4

通过制定 col 组件的 offset 属性可以指定分栏偏移的栏数。

  1. <el-row :gutter="20">
  2.   <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
  3.   <el-col :span="6" :offset="6"><div class="grid-content bg-purple"></div></el-col>
  4. </el-row>
  5. <el-row :gutter="20">
  6.   <el-col :span="6" :offset="6"><div class="grid-content bg-purple"></div></el-col>
  7.   <el-col :span="6" :offset="6"><div class="grid-content bg-purple"></div></el-col>
  8. </el-row>
  9. <el-row :gutter="20">
  10.   <el-col :span="12" :offset="6"><div class="grid-content bg-purple"></div></el-col>
  11. </el-row>
  13. <style>
  14.   .el-row {
  15.     margin-bottom: 20px;
  16.     &:last-child {
  17.       margin-bottom: 0;
  18.     }
  19.   }
  20.   .el-col {
  21.     border-radius: 4px;
  22.   }
  23.   .bg-purple-dark {
  24.     background: #99a9bf;
  25.   }
  26.   .bg-purple {
  27.     background: #d3dce6;
  28.   }
  29.   .bg-purple-light {
  30.     background: #e5e9f2;
  31.   }
  32.   .grid-content {
  33.     border-radius: 4px;
  34.     min-height: 36px;
  35.   }
  36.   .row-bg {
  37.     padding: 10px 0;
  38.     background-color: #f9fafc;
  39.   }
  40. </style>

对齐方式

通过 flex 布局来对分栏进行灵活的对齐。

Layout 布局 - 图5

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

  1. <el-row type="flex" class="row-bg">
  2.   <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
  3.   <el-col :span="6"><div class="grid-content bg-purple-light"></div></el-col>
  4.   <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
  5. </el-row>
  6. <el-row type="flex" class="row-bg" justify="center">
  7.   <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
  8.   <el-col :span="6"><div class="grid-content bg-purple-light"></div></el-col>
  9.   <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
  10. </el-row>
  11. <el-row type="flex" class="row-bg" justify="end">
  12.   <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
  13.   <el-col :span="6"><div class="grid-content bg-purple-light"></div></el-col>
  14.   <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
  15. </el-row>
  16. <el-row type="flex" class="row-bg" justify="space-between">
  17.   <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
  18.   <el-col :span="6"><div class="grid-content bg-purple-light"></div></el-col>
  19.   <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
  20. </el-row>
  21. <el-row type="flex" class="row-bg" justify="space-around">
  22.   <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
  23.   <el-col :span="6"><div class="grid-content bg-purple-light"></div></el-col>
  24.   <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
  25. </el-row>
  27. <style>
  28.   .el-row {
  29.     margin-bottom: 20px;
  30.     &:last-child {
  31.       margin-bottom: 0;
  32.     }
  33.   }
  34.   .el-col {
  35.     border-radius: 4px;
  36.   }
  37.   .bg-purple-dark {
  38.     background: #99a9bf;
  39.   }
  40.   .bg-purple {
  41.     background: #d3dce6;
  42.   }
  43.   .bg-purple-light {
  44.     background: #e5e9f2;
  45.   }
  46.   .grid-content {
  47.     border-radius: 4px;
  48.     min-height: 36px;
  49.   }
  50.   .row-bg {
  51.     padding: 10px 0;
  52.     background-color: #f9fafc;
  53.   }
  54. </style>

响应式布局

参照了 Bootstrap 的 响应式设计，预设了五个响应尺寸：xs、sm、md、lg 和 xl。

Layout 布局 - 图6

  1. <el-row :gutter="10">
  2.   <el-col :xs="8" :sm="6" :md="4" :lg="3" :xl="1"><div class="grid-content bg-purple"></div></el-col>
  3.   <el-col :xs="4" :sm="6" :md="8" :lg="9" :xl="11"><div class="grid-content bg-purple-light"></div></el-col>
  4.   <el-col :xs="4" :sm="6" :md="8" :lg="9" :xl="11"><div class="grid-content bg-purple"></div></el-col>
  5.   <el-col :xs="8" :sm="6" :md="4" :lg="3" :xl="1"><div class="grid-content bg-purple-light"></div></el-col>
  6. </el-row>
  8. <style>
  9.   .el-col {
  10.     border-radius: 4px;
  11.   }
  12.   .bg-purple-dark {
  13.     background: #99a9bf;
  14.   }
  15.   .bg-purple {
  16.     background: #d3dce6;
  17.   }
  18.   .bg-purple-light {
  19.     background: #e5e9f2;
  20.   }
  21.   .grid-content {
  22.     border-radius: 4px;
  23.     min-height: 36px;
  24.   }
  25. </style>

基于断点的隐藏类

Element 额外提供了一系列类名，用于在某些条件下隐藏元素。这些类名可以添加在任何 DOM 元素或自定义组件上。如果需要，请自行引入以下文件：

  1. 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 Attributes

参数说明类型可选值默认值
gutter栅格间隔number—0
type布局模式，可选 flex，现代浏览器下有效string——
justifyflex 布局下的水平排列方式stringstart/end/center/space-around/space-betweenstart
alignflex 布局下的垂直排列方式stringtop/middle/bottom—
tag自定义元素标签string*div

Col Attributes

参数说明类型可选值默认值
span栅格占据的列数number—24
offset栅格左侧的间隔格数number—0
push栅格向右移动格数number—0
pull栅格向左移动格数number—0
xs<768px 响应式栅格数或者栅格属性对象number/object (例如： {span: 4, offset: 4})——
sm≥768px 响应式栅格数或者栅格属性对象number/object (例如： {span: 4, offset: 4})——
md≥992px 响应式栅格数或者栅格属性对象number/object (例如： {span: 4, offset: 4})——
lg≥1200px 响应式栅格数或者栅格属性对象number/object (例如： {span: 4, offset: 4})——
xl≥1920px 响应式栅格数或者栅格属性对象number/object (例如： {span: 4, offset: 4})——
tag自定义元素标签string*div