Layout 布局

基础布局

使用列创建基础网格布局。

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

<template>
  <div>
    <l-row>
      <l-col :span="24">
        <div class="bg-1 grid-content"></div>
      </l-col>
    </l-row>
    <l-row>
      <l-col :span="12">
        <div class="bg-2 grid-content"></div>
      </l-col>
      <l-col :span="12">
        <div class="bg-3 grid-content"></div>
      </l-col>
    </l-row>
    <l-row>
      <l-col :span="8">
        <div class="bg-2 grid-content"></div>
      </l-col>
      <l-col :span="8">
        <div class="bg-3 grid-content"></div>
      </l-col>
      <l-col :span="8">
        <div class="bg-2 grid-content"></div>
      </l-col>
    </l-row>
    <l-row>
      <l-col :span="6">
        <div class="bg-2 grid-content"></div>
      </l-col>
      <l-col :span="6">
        <div class="bg-3 grid-content"></div>
      </l-col>
      <l-col :span="6">
        <div class="bg-2 grid-content"></div>
      </l-col>
      <l-col :span="6">
        <div class="bg-3 grid-content"></div>
      </l-col>
    </l-row>
    <l-row>
      <l-col :span="4">
        <div class="bg-2 grid-content"></div>
      </l-col>
      <l-col :span="4">
        <div class="bg-3 grid-content"></div>
      </l-col>
      <l-col :span="4">
        <div class="bg-2 grid-content"></div>
      </l-col>
      <l-col :span="4">
        <div class="bg-3 grid-content"></div>
      </l-col>
      <l-col :span="4">
        <div class="bg-2 grid-content"></div>
      </l-col>
      <l-col :span="4">
        <div class="bg-3 grid-content"></div>
      </l-col>
    </l-row>
  </div>
</template>
<style scoped>
.lotus-row {
  margin-bottom: 20px;
}
.lotus-row:last-child {
  margin-bottom: 0px;
}
.grid-content {
  border-radius: 4px;
  min-height: 36px;
}
.bg-1 {
  background-color: #99a9bf;
}
.bg-2 {
  background-color: #d3dce6;
}
.bg-3 {
  background-color: #e5e9f2;
}
</style>

分栏间隔

行提供 gutter 属性来指定列之间的间距，其默认值为 0。

<template>
  <div>
    <l-row :gutter="20">
      <l-col :span="6">
        <div class="bg-2 grid-content"></div>
      </l-col>
      <l-col :span="6">
        <div class="bg-2 grid-content"></div>
      </l-col>
      <l-col :span="6">
        <div class="bg-2 grid-content"></div>
      </l-col>
      <l-col :span="6">
        <div class="bg-2 grid-content"></div>
      </l-col>
    </l-row>
  </div>
</template>
<style scoped>
.lotus-row {
  margin-bottom: 20px;
}
.lotus-row:last-child {
  margin-bottom: 0px;
}
.grid-content {
  border-radius: 4px;
  min-height: 36px;
}
.bg-1 {
  background-color: #99a9bf;
}
.bg-2 {
  background-color: #d3dce6;
}
.bg-3 {
  background-color: #e5e9f2;
}
</style>

混合布局

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

<template>
  <div>
    <l-row :gutter="20">
      <l-col :span="16">
        <div class="bg-2 grid-content"></div>
      </l-col>
      <l-col :span="8">
        <div class="bg-2 grid-content"></div>
      </l-col>
    </l-row>
    <l-row :gutter="20">
      <l-col :span="8">
        <div class="bg-2 grid-content"></div>
      </l-col>
      <l-col :span="8">
        <div class="bg-2 grid-content"></div>
      </l-col>
      <l-col :span="4">
        <div class="bg-2 grid-content"></div>
      </l-col>
      <l-col :span="4">
        <div class="bg-2 grid-content"></div>
      </l-col>
    </l-row>
    <l-row :gutter="20">
      <l-col :span="4">
        <div class="bg-2 grid-content"></div>
      </l-col>
      <l-col :span="4">
        <div class="bg-2 grid-content"></div>
      </l-col>
      <l-col :span="16">
        <div class="bg-2 grid-content"></div>
      </l-col>
    </l-row>
  </div>
</template>
<style scoped>
.lotus-row {
  margin-bottom: 20px;
}
.lotus-row:last-child {
  margin-bottom: 0px;
}
.grid-content {
  border-radius: 4px;
  min-height: 36px;
}
.bg-1 {
  background-color: #99a9bf;
}
.bg-2 {
  background-color: #d3dce6;
}
.bg-3 {
  background-color: #e5e9f2;
}
</style>

列偏移

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

<template>
  <div>
    <l-row :gutter="20">
      <l-col :span="6" :offset="6">
        <div class="bg-2 grid-content"></div>
      </l-col>
      <l-col :span="6" :offset="6">
        <div class="bg-2 grid-content"></div>
      </l-col>
    </l-row>
    <l-row :gutter="20">
      <l-col :span="6">
        <div class="bg-2 grid-content"></div>
      </l-col>
      <l-col :span="6" :offset="6">
        <div class="bg-2 grid-content"></div>
      </l-col>
    </l-row>
    <l-row :gutter="20">
      <l-col :span="12" :offset="6">
        <div class="bg-2 grid-content"></div>
      </l-col>
    </l-row>
  </div>
</template>
<style scoped>
.lotus-row {
  margin-bottom: 20px;
}
.lotus-row:last-child {
  margin-bottom: 0px;
}
.grid-content {
  border-radius: 4px;
  min-height: 36px;
}
.bg-1 {
  background-color: #99a9bf;
}
.bg-2 {
  background-color: #d3dce6;
}
.bg-3 {
  background-color: #e5e9f2;
}
</style>

对齐方式

默认使用 flex 布局来对分栏进行灵活的对齐。

您可以通过 justify 属性来定义子元素的排版方式，其取值为 start 、 center 、 end 、 space-between 、 space-around 或 space-evenly 。

<template>
  <div>
    <l-row class="row-bg">
      <l-col :span="6"><div class="bg-2 grid-content"></div>
      </l-col>
      <l-col :span="6">
        <div class="bg-3 grid-content"></div>
      </l-col>
      <l-col :span="6">
        <div class="bg-2 grid-content"></div>
      </l-col>
    </l-row>

    <l-row class="row-bg" justify="center">
      <l-col :span="6"><div class="bg-2 grid-content"></div>
      </l-col>
      <l-col :span="6">
        <div class="bg-3 grid-content"></div>
      </l-col>
      <l-col :span="6">
        <div class="bg-2 grid-content"></div>
      </l-col>
    </l-row>

    <l-row class="row-bg" justify="end">
      <l-col :span="6"><div class="bg-2 grid-content"></div>
      </l-col>
      <l-col :span="6">
        <div class="bg-3 grid-content"></div>
      </l-col>
      <l-col :span="6">
        <div class="bg-2 grid-content"></div>
      </l-col>
    </l-row>
    
    <l-row class="row-bg" justify="space-between">
      <l-col :span="6"><div class="bg-2 grid-content"></div>
      </l-col>
      <l-col :span="6">
        <div class="bg-3 grid-content"></div>
      </l-col>
      <l-col :span="6">
        <div class="bg-2 grid-content"></div>
      </l-col>
    </l-row>

    <l-row class="row-bg" justify="space-around">
      <l-col :span="6"><div class="bg-2 grid-content"></div>
      </l-col>
      <l-col :span="6">
        <div class="bg-3 grid-content"></div>
      </l-col>
      <l-col :span="6">
        <div class="bg-2 grid-content"></div>
      </l-col>
    </l-row>

    <l-row class="row-bg" justify="space-evenly">
      <l-col :span="6"><div class="bg-2 grid-content"></div>
      </l-col>
      <l-col :span="6">
        <div class="bg-3 grid-content"></div>
      </l-col>
      <l-col :span="6">
        <div class="bg-2 grid-content"></div>
      </l-col>
    </l-row>
  </div>
</template>
<style scoped>
.lotus-row {
  margin-bottom: 20px;
}
.lotus-row:last-child {
  margin-bottom: 0px;
}
.grid-content {
  border-radius: 4px;
  min-height: 36px;
}
.bg-1 {
  background-color: #99a9bf;
}
.bg-2 {
  background-color: #d3dce6;
}
.bg-3 {
  background-color: #e5e9f2;
}
.row-bg {
  background-color: #f9fafc;
}
</style>