Taroify

Grid 宫格

介绍

宫格可以在水平方向上把页面分隔成等宽度的区块，用于展示内容或进行页面导航。

引入

import { Grid } from "@taroify/core"

代码演示

基础用法

通过 icon 属性设置格子内的图标，text 属性设置文字内容。

<Grid>
  <Grid.Item icon={<PhotoOutlined />} text="文字" />
  <Grid.Item icon={<PhotoOutlined />} text="文字" />
  <Grid.Item icon={<PhotoOutlined />} text="文字" />
  <Grid.Item icon={<PhotoOutlined />} text="文字" />
</Grid>

自定义列数

默认一行展示四个格子，可以通过 columns 自定义列数。

<Grid columns={3}>
  <Grid.Item icon={<PhotoOutlined />} text="文字" />
  <Grid.Item icon={<PhotoOutlined />} text="文字" />
  <Grid.Item icon={<PhotoOutlined />} text="文字" />
  <Grid.Item icon={<PhotoOutlined />} text="文字" />
  <Grid.Item icon={<PhotoOutlined />} text="文字" />
  <Grid.Item icon={<PhotoOutlined />} text="文字" />
</Grid>

自定义内容

通过插槽可以自定义格子展示的内容。

<Grid columns={3} bordered={false}>
  <Grid.Item>
    <Image className="grid-image" src="https://img.yzcdn.cn/vant/apple-1.jpg" />
  </Grid.Item>
  <Grid.Item>
    <Image className="grid-image" src="https://img.yzcdn.cn/vant/apple-2.jpg" />
  </Grid.Item>
  <Grid.Item>
    <Image className="grid-image" src="https://img.yzcdn.cn/vant/apple-3.jpg" />
  </Grid.Item>
</Grid>

.grid-image {
  width: 100%;
  height: 100%;
}

正方形格子

设置 square 属性后，格子的高度会和宽度保持一致。

<Grid columns={4} square>
  <Grid.Item icon={<PhotoOutlined />} text="文字" />
  <Grid.Item icon={<PhotoOutlined />} text="文字" />
  <Grid.Item icon={<PhotoOutlined />} text="文字" />
  <Grid.Item icon={<PhotoOutlined />} text="文字" />
  <Grid.Item icon={<PhotoOutlined />} text="文字" />
  <Grid.Item icon={<PhotoOutlined />} text="文字" />
  <Grid.Item icon={<PhotoOutlined />} text="文字" />
  <Grid.Item icon={<PhotoOutlined />} text="文字" />
</Grid>

格子间距

通过 gutter 属性设置格子之间的距离。

<Grid columns={4} gutter={10}>
  <Grid.Item icon={<PhotoOutlined />} text="文字" />
  <Grid.Item icon={<PhotoOutlined />} text="文字" />
  <Grid.Item icon={<PhotoOutlined />} text="文字" />
  <Grid.Item icon={<PhotoOutlined />} text="文字" />
  <Grid.Item icon={<PhotoOutlined />} text="文字" />
  <Grid.Item icon={<PhotoOutlined />} text="文字" />
  <Grid.Item icon={<PhotoOutlined />} text="文字" />
  <Grid.Item icon={<PhotoOutlined />} text="文字" />
</Grid>

内容横排

将 direction 属性设置为 horizontal，可以让宫格的内容呈横向排列。

<Grid columns={3} direction="horizontal">
  <Grid.Item icon={<PhotoOutlined />} text="文字" />
  <Grid.Item icon={<PhotoOutlined />} text="文字" />
  <Grid.Item icon={<PhotoOutlined />} text="文字" />
</Grid>

徽标提示

设置 badge=true 属性后，会在图标右上角展示一个小红点。设置 badge 属性后，会在图标右上角展示相应的徽标。

<Grid columns={2}>
  <Grid.Item icon={<HomeOutlined />} badge text="文字" />
  <Grid.Item icon={<Search />} badge={<Badge content={100} max={99} />} text="文字" />
</Grid>

API

Grid Props

参数	说明	类型	默认值
columns	列数	number \| string	`4`
iconSize	图标大小，默认单位为`px`	number \| string	`28px`
gutter	格子之间的间距，默认单位为`px`	number \| string	`0`
bordered	是否显示边框	boolean	`true`
centered	是否将格子内容居中显示	boolean	`true`
square	是否将格子固定为正方形	boolean	`false`
clickable	是否开启格子点击反馈	boolean	`false`
direction	格子内容排列的方向，可选值为 `horizontal`	string	`vertical`

Grid.Item Props

参数	说明	类型	默认值
text	文字	string	-
icon	图标或图片	ReactNode	-
badge	图标上徽标的内容	boolean \| number \| string \| Badge \| ReactNode	-

Grid.Item Events

事件名	说明	回调参数
onClick	点击格子时触发	event: MouseEvent

主题定制

样式变量

组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 ConfigProvider 组件。

名称	默认值	描述
—grid-item-content-padding	var(—padding-md) var(—padding-xs)	-
—grid-item-content-background-color	var(—white)	-
—grid-item-content-active-color	var(—active-color)	-
—grid-item-icon-font-size	28px $hd*	-
—grid-item-text-color	var(—gray-7)	-
—grid-item-text-font-size	var(—font-size-sm)	-