Layout 布局

使用指南

在 index.json 中引入组件

  1. {
  2.   "usingComponents": {
  3.     "zan-row": "path/to/zanui-weapp/dist/row/index",
  4.     "zan-col": "path/to/zanui-weapp/dist/col/index"
  5.   }
  6. }

代码演示

Layout 组件提供了24列栅格，设置 col 属性可以设置元素所占宽度

  1. <zan-row>
  2.   <zan-col col="8" col-class="custom-zan-col">span: 8</zan-col>
  3.   <zan-col col="8" col-class="custom-zan-col">span: 8</zan-col>
  4.   <zan-col col="8" col-class="custom-zan-col">span: 8</zan-col>
  5. </zan-row>

Layout 提供了 offset 功能。设置 offset 属性可以设置列的偏移宽度，计算方式与 span 相同

  1. <zan-row row-class="custom-zan-row">
  2.   <zan-col col="4" col-class="custom-zan-col">span: 4</zan-col>
  3.   <zan-col col="10" offset="4" col-class="custom-zan-col">offset: 4, span: 10</zan-col>
  4. </zan-row>
  5. <zan-row>
  6.   <zan-col col="12" offset="12" col-class="custom-zan-col">offset: 12, span: 12</zan-col>
  7. </zan-row>

API

Row

参数 说明 类型 默认值
row-class 自定义row class String -

Col

参数 说明 类型 默认值
col-class 自定义col class String -
col 元素所占宽度 Number 0
offset 元素偏移宽度 Number 0

Layout 布局 - 图1
微信扫一扫

原文:

https://www.youzanyun.com/zanui/weapp#/zanui/layout/row