宫格 Grid

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

使用

API

安装使用

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

用法示例

基础使用

展示图标和文字

codesanbox

copy

code

import React from 'react';
import { TiGrid, TiGridItem } from 'titian-h5-react';

export default function App() {
  return (
    <div style={{ width: '100%' }}>
      <TiGrid>
        <TiGridItem icon="home" text="首页" />
        <TiGridItem icon="mine-to-pay" text="待付款" />
        <TiGridItem icon="to-deliver" text="待收货" />
        <TiGridItem icon="to-receive" text="待发货" />
      </TiGrid>
    </div>
  );
}

设置宫格间距离

codesanbox

copy

code

import React from 'react';
import { TiGrid, TiGridItem } from 'titian-h5-react';

export default function App() {
  return (
    <div style={{ width: '100%' }}>
      <TiGrid gutter={16}>
        <TiGridItem icon="home" text="首页" />
        <TiGridItem icon="mine-to-pay" text="待付款" />
        <TiGridItem icon="to-deliver" text="待收货" />
        <TiGridItem icon="to-receive" text="待发货" />
      </TiGrid>
    </div>
  );
}

自定义宫格内容

codesanbox

copy

code

import React from 'react';
import { TiGrid, TiGridItem } from 'titian-h5-react';

export default function App() {
  return (
    <div className="code-container" style={{ width: '100%', fontWeight: 'normal' }}>
      <TiGrid>
        <TiGridItem icon="mine-to-pay" size={52} text="图标尺寸" />
        <TiGridItem icon="to-deliver" size={52} color="red" text="定义颜色" />
        <TiGridItem icon="to-receive" size={52} text="待发货" />
        <TiGridItem icon="to-comment" size={52} text="待评价" />
      </TiGrid>
    </div>
  );
}

自定义每行个数

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

codesanbox

copy

code

import React from 'react';
import { TiGrid, TiGridItem } from 'titian-h5-react';

export default function App() {
  return (
    <div style={{ width: '100%' }}>
      <TiGrid columns={3}>
        <TiGridItem icon="home" text="首页" />
        <TiGridItem icon="mine-to-pay" text="待付款" />
        <TiGridItem icon="to-deliver" text="待收货" />
      </TiGrid>
    </div>
  );
}

自适应展示正方型

codesanbox

copy

code

import React from 'react';
import { TiGrid, TiGridItem } from 'titian-h5-react';

export default function App() {
  return (
    <div style={{ width: '100%' }}>
      <TiGrid square>
        <TiGridItem icon="home" text="首页" />
        <TiGridItem icon="mine-to-pay" text="待付款" />
        <TiGridItem icon="to-deliver" text="待收货" />
        <TiGridItem icon="to-receive" text="待发货" />
      </TiGrid>
    </div>
  );
}

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	theme.spacing.gap.g6	标题的垂直方向内边距	-
--grid-title-padding-h	theme.spacing.gap.g4	标题的水平方向内边距	-
--grid-bg-color	theme.color.gray.background.default	-	-

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	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	标题字重	-