Tantalum UI

Appearance

Return to top
On this page

Group 分组

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

vue
<template>
  <ta-group title="基础风格">
    <ta-cell
      label="单元格"
      content="内容"
      description="网站大部分组件都由这个组件进行分组"
    ></ta-cell>
    <ta-cell label="单元格" content="内容"></ta-cell>
    <ta-cell label="单元格" content="内容"></ta-cell>
    <ta-cell label="单元格" content="内容"></ta-cell>
  </ta-group>
  <ta-group title="基础风格">
    <template #header> 右侧文案 </template>
    <ta-cell label="单元格" content="内容"></ta-cell>
    <ta-cell label="单元格" content="内容"></ta-cell>
    <ta-cell label="单元格" content="内容"></ta-cell>
    <ta-cell label="单元格" content="内容"></ta-cell>
  </ta-group>
  <ta-group title="强化标题栏" :strongHeader="strongHeader">
    <template #header>
      <ta-button size="small"> 查看更多 </ta-button>
    </template>
    <ta-cell label="单元格" content="内容"></ta-cell>
    <ta-cell label="单元格" content="内容"></ta-cell>
    <ta-cell label="单元格" content="内容"></ta-cell>
    <ta-cell label="单元格" content="内容"></ta-cell>
  </ta-group>
</template>

<script lang="ts">
import { defineComponent } from 'vue'

export default defineComponent({
  name: 'ExpGroup',
  data() {
    return {
      strongHeader: true
    }
  }
})
</script>

Import

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

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

Props

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

Slots

#default

vue
<ta-group title="基础用法">
  <ta-cell label="单元格" content="内容"></ta-cell>
  <ta-cell label="单元格" content="内容" description="描述信息"></ta-cell>
</ta-group>

右上角（#header）

vue
<ta-group title="基础风格">
  <template #header> 右侧文案 </template>
  ...
</ta-group>