Layout 栅格布局

12 栅格系统，布局时基于行 row 和列 col 来定义信息区块的外部框架，具体使用方法如下：

  • 使用 row 在水平方向创建一行
  • 将一组 col 插入在 row 中
  • 在每个 col 中，键入自己的内容
  • 通过设置 col 的 span 参数，指定跨越的范围，其范围是1到12
  • 每个 row 中的 col 总和应该为12

使用指南

在 page.json 中引入组件

  1. {
  2.     "navigationBarTitleText": "Layout",
  3.     "usingComponents": {
  4.         "wux-row": "../../dist/row/index",
  5.         "wux-col": "../../dist/col/index"
  6.     }
  7. }

示例

  1. <view class="page">
  2.     <view class="page__hd">
  3.         <view class="page__title">Layout</view>
  4.         <view class="page__desc">栅格布局</view>
  5.     </view>
  6.     <view class="page__bd">
  7.         <wux-row>
  8.             <wux-col span="12">
  9.                 <view class="placeholder">wux</view>
  10.             </wux-col>
  11.         </wux-row>
  12.         <wux-row>
  13.             <wux-col span="6">
  14.                 <view class="placeholder">wux</view>
  15.             </wux-col>
  16.             <wux-col span="6">
  17.                 <view class="placeholder">wux</view>
  18.             </wux-col>
  19.         </wux-row>
  20.         <wux-row>
  21.             <wux-col span="4">
  22.                 <view class="placeholder">wux</view>
  23.             </wux-col>
  24.             <wux-col span="4">
  25.                 <view class="placeholder">wux</view>
  26.             </wux-col>
  27.             <wux-col span="4">
  28.                 <view class="placeholder">wux</view>
  29.             </wux-col>
  30.         </wux-row>
  31.         <wux-row>
  32.             <wux-col span="4">
  33.                 <view class="placeholder">wux</view>
  34.             </wux-col>
  35.             <wux-col span="4" offset="4">
  36.                 <view class="placeholder">wux</view>
  37.             </wux-col>
  38.         </wux-row>
  39.         <wux-row>
  40.             <wux-col span="4">
  41.                 <view class="placeholder">wux</view>
  42.             </wux-col>
  43.             <wux-col span="4" push="4">
  44.                 <view class="placeholder">wux</view>
  45.             </wux-col>
  46.         </wux-row>
  47.         <wux-row>
  48.             <wux-col span="4">
  49.                 <view class="placeholder">wux</view>
  50.             </wux-col>
  51.             <wux-col span="4" offset="4" pull="4">
  52.                 <view class="placeholder">wux</view>
  53.             </wux-col>
  54.         </wux-row>
  55.     </view>
  56. </view>

视频演示

Layout

API

Row props

参数 类型 描述 默认值
prefixCls string 自定义类名前缀 wux-row
gutter number 栅格间隔 0

Row externalClasses

名称 描述
wux-class 根节点样式类

Col props

参数 类型 描述 默认值
prefixCls string 自定义类名前缀 wux-col
span number 栅格占位格数 0
pull number 栅格向左移动格数 0
push number 栅格向右移动格数 0
offset number 栅格左侧的间隔格数 0

Col slot

名称 描述
- 自定义内容

Col externalClasses

名称 描述
wux-class 根节点样式类