通用与布局组合组件
NnSettingsSection 设置分组
带标题、说明和操作区的设置分组。
示例
API
Props
| 名称 | 类型 | 默认值 | 说明 |
|---|---|---|---|
title | string | number | '' | 分组标题；0 会正常显示。 |
description | string | number | '' | 标题下方的分组说明；0 会正常显示。 |
headingLevel | number | string | 3 | 标题使用的原生 heading 级别，支持 2..6，无效值回退 3。 |
titleId | string | '' | 标题元素 id；未设置时通过 Vue useId() 生成稳定实例 id。 |
Slots
| 名称 | 作用域参数 | 说明 |
|---|---|---|
title | — | 替换标题内容。 |
description | — | 替换分组说明。 |
actions | — | 分组标题区右侧的操作。 |
default | — | 分组正文，通常放置设置项。 |
组件根节点为 <section>，存在标题时会通过 aria-labelledby 关联动态 heading。结构节点固定提供 data-nn-settings-section、data-nn-settings-section-head、data-nn-settings-section-title、 data-nn-settings-section-description、data-nn-settings-section-actions 和 data-nn-settings-section-body；只会渲染当前内容需要的节点。