fs-weapp/layout

Layout 布局

使用指南

在 app.json 或 index.json 中引入transition组件

{
  "usingComponents": {
    "fs-row": "path/components/row/index",
    "fs-col": "path/components/col/index"
  }
}
1
2
3
4
5
6
  • 左对齐
  <fs-row>
    <fs-col span="6">span: 6</fs-col>
    <fs-col span="6">span: 6</fs-col>
    <fs-col span="6">span: 6</fs-col>
  </fs-row>
1
2
3
4
5
  • 居中
  <fs-row>
    <fs-col span="6" offset="3">span: 6</fs-col>
    <fs-col span="6">span: 6</fs-col>
    <fs-col span="6">span: 6</fs-col>
  </fs-row>
1
2
3
4
5
  • 右对齐
  <fs-row>
    <fs-col span="6" offset="6">span: 6</fs-col>
    <fs-col span="6">span: 6</fs-col>
    <fs-col span="6">span: 6</fs-col>
  </fs-row>
1
2
3
4
5
  • 两端对齐
  <fs-row>
    <fs-col span="6">span: 6</fs-col>
    <fs-col span="6" offset="3">span: 6</fs-col>
    <fs-col span="6" offset="3">span: 6</fs-col>
  </fs-row>
1
2
3
4
5
  • 间距
  <fs-row gutter="20">
    <fs-col span="8">span: 8</fs-col>
    <fs-col span="8">span: 8</fs-col>
    <fs-col span="8">span: 8</fs-col>
  </fs-row>
1
2
3
4
5
  • offset
  <fs-row>
    <fs-col span="6">span: 6</fs-col>
    <fs-col span="6" offset="10">span: 6</fs-col>
  </fs-row>
1
2
3
4

Row 属性

参数 说明 类型 默认值
gutter 列元素之间的间距（单位为px） Number -

Row 插槽

插槽名 说明
- 默认内容

Col 属性

参数 说明 类型 默认值
span 栅格的占位格数 1 - 24 String -
offset 栅格左侧的间隔格数 String -

Col 插槽

插槽名 说明
- 默认内容

← Transition 动画 →