宫格 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"
  }
}

用法示例

基础使用

展示图标和文字

copy

code

<ti-grid>
  <ti-grid-item icon="home" text="首页" />
  <ti-grid-item icon="mine-to-pay" text="待付款" />
  <ti-grid-item icon="to-deliver" text="待收货" />
  <ti-grid-item icon="to-receive" text="待发货" />
</ti-grid>

设置宫格间距离

copy

code

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

自定义宫格内容

copy

code

<view>
  <ti-grid>
    <ti-grid-item icon="mine-to-pay" size="{{52}}" text="图标尺寸" />
    <ti-grid-item icon="to-deliver" size="{{52}}" color="red" text="定义颜色" />
    <ti-grid-item icon="to-receive" size="{{52}}" text="待发货" />
    <ti-grid-item icon="to-comment" size="{{52}}" text="待评价" />
  </ti-grid>
</view>

自定义每行个数

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

copy

code

<view style="width: 100%">
  <ti-grid columns="{{3}}">
    <ti-grid-item icon="home" text="首页" />
    <ti-grid-item icon="mine-to-pay" text="待付款" />
    <ti-grid-item icon="to-deliver" text="待收货" />
  </ti-grid>
</view>

自适应展示正方型

copy

code

<ti-grid square>
  <ti-grid-item icon="home" text="首页" />
  <ti-grid-item icon="mine-to-pay" text="待付款" />
  <ti-grid-item icon="to-deliver" text="待收货" />
  <ti-grid-item icon="to-receive" text="待发货" />
</ti-grid>

ti-grid API

属性 Properties

名称	类型	是否必填	默认值	说明	备注
title	string	否	-	宫格标题	-
columns	number	否	4	宫格的每行展示的个数	-
border	boolean	否	true	是否使用外边框	-
gutter	number	否	0	宫格之间的距离	-
square	boolean	否	false	是否自适应展示正方型	-
direction	column | row	否	column	排列方向	-

插槽 Slots

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

可扩展样式名 External Class

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

可扩展样式类名（class）

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

CSS 变量 CSS Variables

变量	默认值	说明	备注
--grid-title-padding-v	theme.spacing.gap.g6	标题的垂直方向内边距	-
--grid-title-padding-h	theme.spacing.gap.g4	标题的水平方向内边距	-
--grid-bg-color	theme.color.gray.background.default	-	-

ti-grid-item API

属性 Properties

名称	类型	是否必填	默认值	说明	备注
icon	string	否	-	图标	-
size	string	否	-	图标尺寸	-
color	string	否	-	图标颜色	-
text	string	是	-	文本	-
custom-content	boolean	否	false	是否自定义内容	-

插槽 Slots

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

可扩展样式名 External Class

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

CSS 变量 CSS Variables

变量	默认值	说明	备注
--grid-item-padding-v	theme.spacing.gap.g4	垂直方向内边距	-
--grid-item-padding-h	theme.spacing.gap.g2	水平方向边距	-
--grid-text-padding-v	theme.spacing.gap.g0	文字垂直方向内边距	-
--grid-text-padding-h	theme.spacing.gap.g3	文字水平方向内边距	-
--grid-item-bg-color	theme.color.gray.background.default	宫格内容块的背景色	-
--grid-item-text-color	theme.color.gray.texticon.900	文字颜色	-
--grid-item-text-font-size	theme.fontSize.t6	每个文字大小	-
--grid-item-text-line-height	theme.lineHeight.single.t6	每个文字行高	-
--grid-font-weight-regular	theme.fontWeight.regular	标题字重	-