TaroifyReact UI

    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 | string4
    iconSize图标大小，默认单位为pxnumber | string28px
    gutter格子之间的间距，默认单位为pxnumber | string0
    bordered是否显示边框booleantrue
    centered是否将格子内容居中显示booleantrue
    square是否将格子固定为正方形booleanfalse
    clickable是否开启格子点击反馈booleanfalse
    direction格子内容排列的方向，可选值为 horizontalstringvertical

    Grid.Item Props

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

    Grid.Item Events

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

    主题定制

    样式变量

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

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