通用与布局组合组件
NnSettingsItem 设置项
设置说明与操作控件的双列布局。
示例
API
Props
| 名称 | 类型 | 默认值 | 说明 |
|---|---|---|---|
title | string | number | '' | 设置项标题;0 会正常显示。 |
description | string | number | '' | 设置项补充说明;0 会正常显示。 |
align | string | 'start' | center 让两列整体垂直居中,其他值保持顶部对齐。 |
actionsWidth | number | string | — | 操作区宽度;数字按 px,字符串作为 CSS width。窄容器下自动变为全宽。 |
labelFor | string | '' | 设置后标题使用 <label for="...">,用于关联操作区中的单一可标记控件。 |
Slots
| 名称 | 作用域参数 | 说明 |
|---|---|---|
title | — | 替换设置项标题。 |
description | — | 替换设置项说明。 |
actions | — | 右侧操作区;未提供时,默认插槽会作为操作区的简写。 |
default | — | actions 未提供时使用的操作区内容。 |
组件默认使用与旧式偏好设置一致的紧凑密度:160px 最小文案列、66px 最小行高、顶部对齐与行间分隔。 当最近的 NnSettings 容器不超过 520px 时改为单列,操作区全宽并左对齐;同时提供 720px 视口 媒体查询作为不支持 container query 环境的兜底。结构节点固定提供 data-nn-settings-item、 data-nn-settings-item-copy、data-nn-settings-item-title、data-nn-settings-item-description 和 data-nn-settings-item-actions。
