跳到主要内容

宫格 Grid

基础宫格布局，宫格共包含 2 个组件： TiGrid、 TiGridItem，这两个组件必须配合使用。

API

安装使用​

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

用法示例​

基本使用​

展示图标和文字 

<ti-grid>
  <ti-grid-item icon="mine-to-pay" text="待付款" />
  <ti-grid-item icon="to-deliver" text="待收货" />
  <ti-grid-item icon="to-receive" text="待发货" />
  <ti-grid-item icon="to-comment" text="待评价" />
</ti-grid>

自定义每行个数​

宫格默认是每行4个，使用时可自定义每行个数。 

<ti-grid columns="{{3}}">
  <ti-grid-item icon="mine-to-pay" text="待付款" />
  <ti-grid-item icon="to-deliver" text="待收货" />
  <ti-grid-item icon="to-receive" text="待发货" />
  <ti-grid-item icon="to-comment" text="待评价" />
  <ti-grid-item icon="to-refund" text="退货" />
  <ti-grid-item icon="camera-point" text="拍照展示" />
</ti-grid>

设置宫格间距离​

<ti-grid gutter="{{16}}">
  <ti-grid-item icon="mine-to-pay" text="待付款" />
  <ti-grid-item icon="to-deliver" text="待收货" />
  <ti-grid-item icon="to-receive" text="待发货" />
  <ti-grid-item icon="to-comment" text="待评价" />
</ti-grid>

自适应展示正方型​

<ti-grid square>
  <ti-grid-item icon="mine-to-pay" text="待付款" />
  <ti-grid-item icon="to-deliver" text="待收货" />
  <ti-grid-item icon="to-receive" text="待发货" />
  <ti-grid-item icon="to-comment" text="待评价" />
</ti-grid>

<ti-grid square>
  <ti-grid-item icon="mine-to-pay" text="待付款" />
  <ti-grid-item icon="to-deliver" text="待收货" />
  <ti-grid-item icon="to-receive" text="待发货" />
  <ti-grid-item icon="to-comment" text="待评价" />
  <ti-grid-item icon="to-refund" text="退货" />
  <ti-grid-item icon="camera-point" text="拍照展示" />
  <ti-grid-item icon="to-deliver" text="待收货" />
  <ti-grid-item icon="to-receive" text="待发货" />
</ti-grid>

自定义宫格内容​

<ti-grid title="自定义图标尺寸，颜色">
  <ti-grid-item icon="mine-to-pay" size="60" text="图标尺寸" />
  <ti-grid-item icon="to-deliver" color="red" text="定义颜色" />
  <ti-grid-item icon="to-receive" text="待发货" />
  <ti-grid-item icon="to-comment" text="待评价" />
  <ti-grid-item icon="to-refund" text="退货" />
</ti-grid>
<ti-grid title="使用 slot 定义内容">
  <ti-grid-item custom-content>
      <view slot="content">待付款</view>
  </ti-grid-item>
  <ti-grid-item custom-content>
      <view slot="content">待收货</view>
  </ti-grid-item>
  <ti-grid-item custom-content>
      <view slot="content">待发货</view>
  </ti-grid-item>
  <ti-grid-item custom-content>
      <view slot="content">待评价</view>
  </ti-grid-item>
</ti-grid>

ti-grid API​

属性 Properties​

名称类型是否必填默认值说明备注
titlestring否-宫格标题-
columnsnumber否4宫格的每行展示的个数-
borderboolean否true是否使用外边框-
gutternumber否0宫格之间的距离-
squareboolean否false是否自适应展示正方型-
directioncolumn | row否column排列方向-

插槽 Slots​

名称说明备注
title自定义标题插槽-

可扩展样式名 External Class​

类名说明备注
ext-class扩展样式类名-

可扩展样式类名（class）​

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

CSS 变量 CSS Variables​

变量默认值说明备注
--grid-title-padding-v24rpx标题的垂直方向内边距-
--grid-title-padding-h24rpx标题的水平方向内边距-
--grid-bg-colorvar(--neutral-color-9, #ffffff)--

ti-grid-item API​

属性 Properties​

名称类型是否必填默认值说明备注
iconstring否-图标-
sizestring否-图标尺寸-
colorstring否-图标颜色-
textstring是-文本-
custom-contentboolean否false是否自定义内容-

插槽 Slots​

名称说明备注
content自定义内容块插槽需要使用自定义内容时，需要同时设置 custom-content 才能生效。
icon自定义图标插槽当传入 icon 属性时，优先取属性值
text自定义文字插槽当传入 text 属性时，优先取属性值

可扩展样式名 External Class​

类名说明备注
ext-class根节点可扩展的类名-
text-class文本节点可扩展的类名-
icon-class图标可扩展类名-

CSS 变量 CSS Variables​

变量默认值说明备注
--grid-item-padding-v16rpx垂直方向内边距-
--grid-item-padding-h8rpx水平方向边距-
--grid-text-padding-v0文字垂直方向内边距-
--grid-text-padding-h12rpx文字水平方向内边距-
--grid-item-bg-colorvar(--neutral-color-9, #ffffff)宫格内容块的背景色-
--grid-item-text-colorvar(--neutral-color-1, #212121)文字颜色-
--grid-item-text-font-szie28rpx--
--grid-item-text-line-height28rpx--