Layout 布局

定义

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

Span

设置栅格的占位格数。

<template>
  <se-row class="custom-grid-example">
    <se-col>1</se-col>
    <se-col>2</se-col>
    <se-col>3</se-col>
  </se-row>
</template>
<style lang="scss">
  .custom-grid-example {
    &.se-row {
      margin: 10px auto;
      background: #eee;
    }
    .se-col {
      padding: 16px 0;
      color: #fff;
      text-align: center;
      background: #01d567;
    }
    .se-col:nth-child(odd) {
      background: #01c05d;
    }
  }
</style>

Gutter

设置栅格之间的间隔。值的设置参考 grid-gap。

<se-row class="custom-grid-example" gutter="20px">
  <se-col :span="3">span 3</se-col>
  <se-col :span="3">span 3</se-col>
  <se-col :span="3">span 3</se-col>
</se-row>
<style lang="scss">
  .custom-grid-example {
    &.se-row {
      margin: 10px auto;
      background: #eee;
    }
    .se-col {
      padding: 16px 0;
      color: #fff;
      text-align: center;
      background: #01d567;
    }
    .se-col:nth-child(odd) {
      background: #01c05d;
    }
  }
</style>

Start

设置栅格的起点位置（格数）。

<se-row class="custom-grid-example">
  <se-col :start="0">start 0</se-col>
  <se-col :start="4">start 4</se-col>
  <se-col :start="8">start 8</se-col>
</se-row>
<style lang="scss">
  .custom-grid-example {
    &.se-row {
      margin: 10px auto;
      background: #eee;
    }
    .se-col {
      padding: 16px 0;
      color: #fff;
      text-align: center;
      background: #01d567;
    }
    .se-col:nth-child(odd) {
      background: #01c05d;
    }
  }
</style>

Justify

设置水平方向的布局行为。

含义与 Flexbox 中的 justify-content 不同。具体表现形式参考 Props 表格。

<se-row class="custom-grid-example custom-grid-row" justify="end">
  <se-col>1</se-col>
  <se-col>2</se-col>
  <se-col>3</se-col>
</se-row>
<style lang="scss">
  .custom-grid-example {
    &.se-row {
      margin: 10px auto;
      background: #eee;
    }
    .se-col {
      padding: 16px 0;
      color: #fff;
      text-align: center;
      background: #01d567;
    }
    .se-col:nth-child(odd) {
      background: #01c05d;
    }
  }
  .custom-grid-row {
    grid-template-columns: repeat(12, 30px);
  }
</style>

Align

设置垂直方向的布局行为。

<se-row class="custom-grid-example" align="center" style="height:200px;">
  <se-col :span="3">
    <div style="height:100px;">span 3</div>
  </se-col>
  <se-col :span="3">
    <div style="height:80px;">span 3</div>
  </se-col>
  <se-col :span="3">
    <div style="height:120px;">span 3</div>
  </se-col>
  <se-col :span="3">
    <div style="height:150px;">span 3</div>
  </se-col>
</se-row>
<style lang="scss">
  .custom-grid-example {
    &.se-row {
      margin: 10px auto;
      background: #eee;
    }
    .se-col {
      padding: 16px 0;
      color: #fff;
      text-align: center;
      background: #01d567;
    }
    .se-col:nth-child(odd) {
      background: #01c05d;
    }
  }
</style>

Order

动态改变盒子的展示顺序（ascending）。

使用 order 会导致 DOM 结构和实际展示不符，导致潜在的无障碍（accessibility）问题。

<se-row class="custom-grid-example">
  <se-col :order="1">1</se-col>
  <se-col>2</se-col>
  <se-col :order="-1">3</se-col>
</se-row>
<style lang="scss">
  .custom-grid-example {
    &.se-row {
      margin: 10px auto;
      background: #eee;
    }
    .se-col {
      padding: 16px 0;
      color: #fff;
      text-align: center;
      background: #01d567;
    }
    .se-col:nth-child(odd) {
      background: #01c05d;
    }
  }
</style>

Responsive

设置响应式布局。

响应式字段的对应的屏幕尺寸，如下所示：

通过传入 类 props 的 object ，可以实现分别响应式控制 se-row 和 se-col 的表现形式。

object 的配置信息，参考 Props 表格。

<se-row
  class="custom-grid-example"
  gutter="5px"
  :sm='{ gutter: "2px" }'
  :lg='{ gutter: "10px " }'
  :xxl='{ gutter: "18px" }'
>
  <se-col
    :xs="{ span: 12 }"
    :sm="{ span: 6 }"
    :md="{ span: 3 }"
    :lg="{ span: 3 }"
    :xl="{ span: 3 }"
    :xxl="{ span: 2 }"
  >
    1
  </se-col>
  <se-col
    :xs="{ span: 12 }"
    :sm="{ span: 6 }"
    :md="{ span: 3 }"
    :lg="{ span: 3 }"
    :xl="{ span: 3 }"
    :xxl="{ span: 2 }"
  >
    2
  </se-col>
  <se-col
    :xs="{ span: 12 }"
    :sm="{ span: 6 }"
    :md="{ span: 3 }"
    :lg="{ span: 3 }"
    :xl="{ span: 3 }"
    :xxl="{ span: 2 }"
  >
    3
  </se-col>
</se-row>
<style lang="scss">
  .custom-grid-example {
    &.se-row {
      margin: 10px auto;
      background: #eee;
    }
    .se-col {
      padding: 16px 0;
      color: #fff;
      text-align: center;
      background: #01d567;
    }
    .se-col:nth-child(odd) {
      background: #01c05d;
    }
  }
</style>

Props

Row

Col