Layout 布局

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

基础布局

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

基础布局.png
通过 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>
  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>

分栏间隔

分栏之间存在间隔。

分栏间隔.png

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

混合布局

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

  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>
  16. <style>
  17. .el-row {
  18. margin-bottom: 20px;
  19. &:last-child {
  20. margin-bottom: 0;
  21. }
  22. }
  23. .el-col {
  24. border-radius: 4px;
  25. }
  26. .bg-purple-dark {
  27. background: #99a9bf;
  28. }
  29. .bg-purple {
  30. background: #d3dce6;
  31. }
  32. .bg-purple-light {
  33. background: #e5e9f2;
  34. }
  35. .grid-content {
  36. border-radius: 4px;
  37. min-height: 36px;
  38. }
  39. .row-bg {
  40. padding: 10px 0;
  41. background-color: #f9fafc;
  42. }
  43. </style>

分栏偏移

支持偏移指定的栏数。
分栏偏移.png
通过制定 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>
  12. <style>
  13. .el-row {
  14. margin-bottom: 20px;
  15. &:last-child {
  16. margin-bottom: 0;
  17. }
  18. }
  19. .el-col {
  20. border-radius: 4px;
  21. }
  22. .bg-purple-dark {
  23. background: #99a9bf;
  24. }
  25. .bg-purple {
  26. background: #d3dce6;
  27. }
  28. .bg-purple-light {
  29. background: #e5e9f2;
  30. }
  31. .grid-content {
  32. border-radius: 4px;
  33. min-height: 36px;
  34. }
  35. .row-bg {
  36. padding: 10px 0;
  37. background-color: #f9fafc;
  38. }
  39. </style>

对齐方式

通过 flex 布局来对分栏进行灵活的对齐。
对齐方式.png
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>
  26. <style>
  27. .el-row {
  28. margin-bottom: 20px;
  29. &:last-child {
  30. margin-bottom: 0;
  31. }
  32. }
  33. .el-col {
  34. border-radius: 4px;
  35. }
  36. .bg-purple-dark {
  37. background: #99a9bf;
  38. }
  39. .bg-purple {
  40. background: #d3dce6;
  41. }
  42. .bg-purple-light {
  43. background: #e5e9f2;
  44. }
  45. .grid-content {
  46. border-radius: 4px;
  47. min-height: 36px;
  48. }
  49. .row-bg {
  50. padding: 10px 0;
  51. background-color: #f9fafc;
  52. }
  53. </style>

响应式布局

参照了 Bootstrap 的 响应式设计,预设了五个响应尺寸:xs、sm、md、lg 和 xl。
响应式布局.png

  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>
  7. <style>
  8. .el-col {
  9. border-radius: 4px;
  10. }
  11. .bg-purple-dark {
  12. background: #99a9bf;
  13. }
  14. .bg-purple {
  15. background: #d3dce6;
  16. }
  17. .bg-purple-light {
  18. background: #e5e9f2;
  19. }
  20. .grid-content {
  21. border-radius: 4px;
  22. min-height: 36px;
  23. }
  24. </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
justify flex 布局下的水平排列方式 string start/end/center/space-around/space-between start
align flex 布局下的垂直排列方式 string top/middle/bottom top
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