Tantalum UI

Group 分组

将一组同类别的组件（如 Cell ）放在一起，并加入分组标题。

import { TaButton, TaCell, TaGroup } from '@/index'
import { useState } from 'react'

export default function ExpGroup() {
  const [strongHeader, setStrongHeader] = useState(true)

  return (
    <>
      <TaGroup title="基础风格">
        <TaCell
          label="单元格"
          content="内容"
          description="网站大部分组件都由这个组件进行分组"
        />
        <TaCell label="单元格" content="内容" />
        <TaCell label="单元格" content="内容" />
        <TaCell label="单元格" content="内容" />
      </TaGroup>
      <TaGroup title="基础风格" renderHeader={() => <>右侧文案</>}>
        <TaCell label="单元格" content="内容" />
        <TaCell label="单元格" content="内容" />
        <TaCell label="单元格" content="内容" />
        <TaCell label="单元格" content="内容" />
      </TaGroup>
      <TaGroup
        title="强化标题栏"
        renderHeader={() => <TaButton size="small"> 查看更多 </TaButton>}
        strongHeader={strongHeader}
      >
        <TaCell label="单元格" content="内容" />
        <TaCell label="单元格" content="内容" />
        <TaCell label="单元格" content="内容" />
        <TaCell label="单元格" content="内容" />
      </TaGroup>
    </>
  )
}

Import 

import { TaGroup } from 'tantalum-ui-mobile-react'

具体的引入方式可以参考引入组件。

Props

属性类型默认值必填说明
titlestring是分组标题
strongHeaderbooleanfalse否是否强化标题的风格

Slots

children 

<TaGroup title="基础风格">
  <TaCell
    label="单元格"
    content="内容"
    description="网站大部分组件都由这个组件进行分组"
  />
  <TaCell label="单元格" content="内容" />
  <TaCell label="单元格" content="内容" />
  <TaCell label="单元格" content="内容" />
</TaGroup>

右上角（renderHeader） 

<TaGroup
  title="强化标题栏"
  renderHeader={() => <TaButton size="small"> 查看更多 </TaButton>}
  strongHeader={strongHeader}
>
  <TaCell label="单元格" content="内容" />
  <TaCell label="单元格" content="内容" />
  <TaCell label="单元格" content="内容" />
  <TaCell label="单元格" content="内容" />
</TaGroup>