布局 Layout

Layout 提供了 ti-tow 和 ti-col 两个组件来进行行列布局。

使用

API

安装使用

{
  // 原生小程序
  "usingComponents": {
    "ti-row": "@titian-design/weapp/row/index",
    "ti-col": "@titian-design/weapp/col/index"
  },
  // titan-cli搭建的项目
  "usingComponents": {
    "ti-row": "platform://titian-mp/ti-row",
    "ti-col": "platform://titian-mp/ti-col"
  }
}

用法示例

栅格配置

span-24

span-12

span-12

span-8

span-8

span-8

span-6

span-6

span-6

span-6

栅格占位格数，为 0 时相当于 display: none

copy

code

<view>
  <ti-row>
    <ti-col span="{{24}}">
      <view>span-24</view>
    </ti-col>
  </ti-row>

  <ti-row>
    <ti-col span="{{12}}">
      <view>span-12</view>
    </ti-col>
    <ti-col span="{{12}}">
      <view>span-12</view>
    </ti-col>
  </ti-row>

  <ti-row>
    <ti-col span="{{8}}">
      <view>span-8</view>
    </ti-col>
    <ti-col span="{{8}}">
      <view>span-8</view>
    </ti-col>
    <ti-col span="{{8}}">
      <view>span-8</view>
    </ti-col>
  </ti-row>

  <ti-row>
    <ti-col span="{{6}}">
      <view>span-6</view>
    </ti-col>
    <ti-col span="{{6}}">
      <view>span-6</view>
    </ti-col>
    <ti-col span="{{6}}">
      <view>span-6</view>
    </ti-col>
    <ti-col span="{{6}}">
      <view>span-6</view>
    </ti-col>
  </ti-row>
</view>

布局间隙

span-12

span-12

copy

code

<view>
  <ti-row gutter="{{12}}" flex="{{false}}">
    <ti-col span="{{12}}">
      <div>span-12</div>
    </ti-col>
    <ti-col span="{{12}}">
      <div>span-12</div>
    </ti-col>
  </ti-row>
</view>

偏移量设置

span-12

span-8

span-8

span-6

span-6

栅格左侧的偏移格数

copy

code

<view>
  <ti-row>
    <ti-col offset="{{12}}" span="{{12}}">
      <div>span-12</div>
    </ti-col>
  </ti-row>

  <ti-row>
    <ti-col span="{{8}}">
      <div>span-8</div>
    </ti-col>
    <ti-col offset="{{8}}" span="{{8}}">
      <div>span-8</div>
    </ti-col>
  </ti-row>

  <ti-row>
    <ti-col offset="{{6}}" span="{{6}}">
      <div>span-6</div>
    </ti-col>
    <ti-col offset="{{6}}" span="{{6}}">
      <div>span-6</div>
    </ti-col>
  </ti-row>
</view>

浮动布局

span-12

span-12

copy

code

<view>
  <ti-row flex="{{false}}">
    <ti-col span="{{12}}">
      <div>span-12</div>
    </ti-col>
    <ti-col span="{{12}}">
      <div>span-12</div>
    </ti-col>
  </ti-row>
</view>

ti-row API

属性 Properties

名称	类型	是否必填	默认值	说明	备注
flex	boolean	否	true	是否启用 flex 布局, 当值为false时，使用浮动布局	-
gutter	number	否	0	列元素之间的距离	-

可扩展样式名 External Class

类名	说明	备注
ext-class	根节点可扩展的类名	-

ti-col API

属性 Properties

名称	类型	是否必填	默认值	说明	备注
span	number	是	-	栅格占位格数，为 0 时相当于 display: none	-
offset	number	否	-	栅格左侧的偏移格数	-

可扩展样式名 External Class

类名	说明	备注
ext-class	根节点可扩展的类名	-