跳到主要内容

宫格 Grid

基础宫格布局,宫格共包含 2 个组件: TiGridTiGridItem,这两个组件必须配合使用。

安装使用

{
// 原生小程序
"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="60px" 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-宫格标题-
columnsnumber4宫格的每行展示的个数-
borderbooleantrue是否使用外边框-
gutternumber0宫格之间的距离-
squarebooleanfalse是否自适应展示正方型-
directioncolumn | rowcolumn排列方向-

插槽 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-contentbooleanfalse是否自定义内容-

插槽 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--