• Layout 布局
    • 基础布局
    • 分栏间隔
    • 混合布局
    • 分栏偏移
    • 对齐方式
    • 响应式布局
    • 基于断点的隐藏类
    • Row Attributes
    • Col Attributes

    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>
    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>

    分栏间隔

    分栏之间存在间隔。

    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>
    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 分栏任意扩展组合形成较为复杂的混合布局。

    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>
    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>

    分栏偏移

    支持偏移指定的栏数。

    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>
    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 布局来对分栏进行灵活的对齐。

    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>
    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 的 响应式设计,预设了五个响应尺寸:xssmmdlgxl

    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>
    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栅格间隔number0
    type布局模式,可选 flex,现代浏览器下有效string
    justifyflex 布局下的水平排列方式stringstart/end/center/space-around/space-betweenstart
    alignflex 布局下的垂直排列方式stringtop/middle/bottomtop
    tag自定义元素标签string*div

    Col Attributes

    参数说明类型可选值默认值
    span栅格占据的列数number24
    offset栅格左侧的间隔格数number0
    push栅格向右移动格数number0
    pull栅格向左移动格数number0
    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