宫格 Grid

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

使用

API

安装使用

import { TiGrid, TiGridItem } from '@titian-design/mobile-react'

用法示例

基本使用

展示图标和文字

const App: React.FC = () => {
  return (
    <TiGrid>
      <TiGridItem icon="home" text="首页" />
      <TiGridItem icon="mine-to-pay" text="待付款" />
      <TiGridItem icon="to-deliver" text="待收货" />
      <TiGridItem icon="to-receive" text="待发货" />
    </TiGrid>
  )
}

自定义每行个数

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

const App: React.FC = () => {
  return (
    <TiGrid columns={3}>
      <TiGridItem icon="home" text="首页" />
      <TiGridItem icon="mine-to-pay" text="待付款" />
      <TiGridItem icon="to-deliver" text="待收货" />
      <TiGridItem icon="to-receive" text="待发货" />
    </TiGrid>
  )
}

设置宫格间距离

const App: React.FC = () => {
  return (
    <TiGrid gutter={16}>
      <TiGridItem icon="home" text="首页" />
      <TiGridItem icon="mine-to-pay" text="待付款" />
      <TiGridItem icon="to-deliver" text="待收货" />
      <TiGridItem icon="to-receive" text="待发货" />
    </TiGrid>
  )
}

自适应展示正方型

const App: React.FC = () => {
  return (
    <TiGrid square>
      <TiGridItem icon="home" text="首页" />
      <TiGridItem icon="mine-to-pay" text="待付款" />
      <TiGridItem icon="to-deliver" text="待收货" />
      <TiGridItem icon="to-receive" text="待发货" />
    </TiGrid>
  )
}

自定义宫格内容

const App: React.FC = () => {
  return (
    <>
      <TiGrid title="自定义图标尺寸，颜色">
        <TiGridItem icon="mine-to-pay" size={60} text="图标尺寸" />
        <TiGridItem icon="to-deliver" color="red" text="定义颜色" />
        <TiGridItem icon="to-receive" text="待发货" />
        <TiGridItem icon="to-comment" text="待评价" />
        <TiGridItem icon="to-refund" text="退货" />
      </TiGrid>
      
      <TiGrid title="使用 slot 定义内容">
        <TiGridItem customContent>
          <div slot="content">待付款</div>
        </TiGridItem>
        <TiGridItem customContent>
          <div slot="content">待收货</div>
        </TiGridItem>
        <TiGridItem customContent>
          <div slot="content">待发货</div>
        </TiGridItem>
        <TiGridItem customContent>
          <div slot="content">待评价</div>
        </TiGridItem>
      </TiGrid>
    </>
  )
}

TiGrid API

属性 Properties

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

插槽 Slots

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

可扩展样式名 External Class

类名	说明	备注
extClass	扩展样式类名	-

CSS 变量 CSS Variables

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

TiGridItem API

属性 Properties

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

插槽 Slots

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

可扩展样式名 External Class

类名	说明	备注
extClass	根节点可扩展的类名	-
textClass	文本节点可扩展的类名	-
iconClass	图标节点可扩展的类名	-

CSS 变量 CSS Variables

变量	默认值	说明	备注
--grid-item-padding-v	16px	垂直方向内边距	-
--grid-item-padding-h	8px	水平方向边距	-
--grid-text-padding-v	0	文字垂直方向内边距	-
--grid-text-padding-h	12px	文字水平方向内边距	-
--grid-item-bg-color	var(--neutral-color-9, #ffffff)	宫格内容块的背景色	-
--grid-item-text-color	var(--neutral-color-1, #212121)	文字颜色	-
--grid-item-text-font-szie	28px	-	-
--grid-item-text-line-height	28px	-	-