xtf-cell-group

组件说明

xtf-cell-group 是单元格组容器组件，用于将多个 xtf-cell 分组展示。支持标题/描述/备注、多种视觉变体（纯色、表面、柔和、卡片、玻璃）和统一圆角间距配置，是设置页和表单列表的基础布局组件。

基础用法

1. 最简示例

通过 title 设置分组标题，包裹 xtf-cell 即可：

vue

<template>
  <xtf-cell-group title="基本信息">
    <xtf-cell title="姓名" value="张三" />
    <xtf-cell title="手机号" value="138****8888" />
    <xtf-cell title="邮箱" value="zhangsan@example.com" />
  </xtf-cell-group>
</template>

2. 标题与备注

通过 eyebrow 设置眉标，desc 设置描述，note 设置底部备注：

vue

<template>
  <xtf-cell-group
    eyebrow="账号安全"
    title="登录设置"
    desc="管理你的登录方式"
    note="修改后需重新登录"
  >
    <xtf-cell title="手机号" value="138****8888" arrow />
    <xtf-cell title="邮箱" value="已绑定" arrow />
    <xtf-cell title="微信" value="未绑定" arrow />
  </xtf-cell-group>
</template>

3. 视觉变体

通过 variant 切换分组视觉风格：

vue

<template>
  <view style="display: flex; flex-direction: column; gap: 24rpx">
    <xtf-cell-group title="表面" variant="surface">
      <xtf-cell title="选项一" value="值" />
      <xtf-cell title="选项二" value="值" />
    </xtf-cell-group>
    <xtf-cell-group title="柔和" variant="soft">
      <xtf-cell title="选项一" value="值" />
      <xtf-cell title="选项二" value="值" />
    </xtf-cell-group>
    <xtf-cell-group title="卡片" variant="card">
      <xtf-cell title="选项一" value="值" />
      <xtf-cell title="选项二" value="值" />
    </xtf-cell-group>
    <xtf-cell-group title="玻璃" variant="glass">
      <xtf-cell title="选项一" value="值" />
      <xtf-cell title="选项二" value="值" />
    </xtf-cell-group>
  </view>
</template>

4. 间距与圆角

通过 gap 调整子项间距，通过 radius 控制圆角，通过 inset 设置子单元格分割线缩进：

vue

<template>
  <xtf-cell-group title="设置" :gap="8" :radius="40" :inset="24">
    <xtf-cell title="通知" divider arrow />
    <xtf-cell title="隐私" divider arrow />
    <xtf-cell title="通用" arrow />
  </xtf-cell-group>
</template>

全部属性

属性	类型	默认值	作用描述	适用范围
`title`	`String`	`''`	分组标题	设置标题
`eyebrow`	`String`	`''`	标题上方眉标文字	分组标签
`desc`	`String`	`''`	标题下方描述文字	补充说明
`note`	`String`	`''`	底部备注文字	底部提示
`variant`	`String`	`'surface'`	视觉变体：`'plain'` / `'surface'` / `'soft'` / `'card'` / `'glass'`	切换视觉风格
`radius`	`String \| Number`	`32`	内容区圆角（rpx）	控制圆角
`padding`	`String \| Number`	`0`	容器内边距（rpx）	控制内边距
`gap`	`String \| Number`	`18`	头部/内容/底部之间的间距（rpx）	调整间距
`inset`	`String \| Number`	`0`	子单元格分割线缩进（rpx）	分割线缩进
`customClass`	`String`	`''`	自定义类名	样式覆盖
`customStyle`	`String \| Object`	`''`	自定义样式	动态样式覆盖
`bodyClass`	`String`	`''`	内容区自定义类名	内容区样式定制

事件

无自定义事件。

插槽

插槽名	说明
`header`	替换标题、眉标和描述组成的头部。
默认插槽	放置 `xtf-cell` 等单元格内容。
`footer`	替换底部备注。

主题说明

plain 变体内容区背景透明
surface 变体内容区背景使用 var(--xtf-color-surface)
soft 变体内容区背景使用 var(--xtf-color-surface-muted)
card 变体内容区背景使用 var(--xtf-card-bg)，边框使用 var(--xtf-card-border)，阴影使用 var(--xtf-shadow-card)
glass 变体内容区背景使用 var(--xtf-popup-bg)，边框使用 var(--xtf-card-border)，阴影使用 var(--xtf-shadow-glass)

如需全局调整主题，请在 xtf-config-provider 或主题配置中覆盖上述 CSS 变量。

xtf-cell-group ​

组件说明 ​

基础用法 ​

1. 最简示例 ​

2. 标题与备注 ​

3. 视觉变体 ​

4. 间距与圆角 ​

全部属性 ​

事件 ​

插槽 ​

主题说明 ​