Settings 设置结构

SettingsLayout 建立页面标题和导航，SettingsSection 划分任务，SettingsGroup 组织分隔行，SettingsRow 容纳解释和操作。使用普通插槽组合开关、选择器或编辑按钮，组件不保存偏好。

安装

pnpm dlx shadcn@4.22.1 add http://127.0.0.1:3040/r/v0.3.0/settings.json

组合与状态

<SettingsSection title="通知" description="管理收到的信息">
  <SettingsGroup>
    <SettingsRow title="每周摘要" description="每周一发送" actions={control} />
  </SettingsGroup>
</SettingsSection>

短操作放在行尾；较长编辑器使用 actionLayout="stacked"。内容宽度变化时布局在实际容器内调整，说明文字允许换行。

Props

组件 / 属性	类型	默认值	说明
`SettingsLayout.title`	`ReactNode`	必填	页面 h1
Layout `description / actions / navigation`	`ReactNode`	—	说明、操作与外部导航
`SettingsSection.title`	`ReactNode`	必填	区块 h2 与语义关联
Section `description / actions`	`ReactNode`	—	分组说明与操作
`SettingsRow.title`	`ReactNode`	必填	设置项名称
Row `description / children / actions`	`ReactNode`	—	说明、补充与控件
Row `iconPresentation`	`glyph / avatar`	`glyph`	图标表面
Row `actionLayout`	`inline / stacked`	`inline`	操作区域布局
`SettingsGroup`	原生 div 属性	—	分隔行容器

Layout、Section 和 Row 透传对应容器属性；icon、className 按需提供。完整保存周期见设置工作区模式。

键盘与约束

静态行不聚焦；由行内真实按钮或字段接收键盘。行标题不能自动替代开关或选择器的可访问名称，控件仍需 label。Layout 不设置 document.title，应用自己管理页面元数据。

避免这样使用

不要把整行点击和行内编辑同时设为互相冲突的主操作；不要给每行再嵌套多个 Panel；不要将临时不可用写成用户关闭了偏好。

来源与版本

0.1.0，来自 Subtic apps/web/components/settings-shell.tsx、settings-page.tsx 的结构语言。移除应用导航、翻译和保存生命周期。

查看由当前源码生成的类型参考

只展示 Kitseed 自身定义的属性，原生 HTML 与 Base UI 透传属性请参阅对应上游说明。

SettingsLayout

属性	类型	默认值
`title`	`ReactNode`	`—`
`description?`	`ReactNode`	`—`
`actions?`	`ReactNode`	`—`
`navigation?`	`ReactNode`	`—`

SettingsSection

属性	类型	默认值
`title`	`ReactNode`	`—`
`description?`	`ReactNode`	`—`
`actions?`	`ReactNode`	`—`
`unstyled?`	`boolean`	`false`
`slots?`	`{ header?: "header" \| "div"; description?: "div" \| "p" }`	`—`
`slotProps?`	`{ header?: DivSlot; heading?: DivSlot; title?: ComponentProps<"h2">; description?: DivSlot; actions?: DivSlot; }`	`{}`

SettingsGroup

属性	类型	默认值
`unstyled?`	`boolean`	`false`

SettingsRow

属性	类型	默认值
`title`	`ReactNode`	`—`
`description?`	`ReactNode`	`—`
`icon?`	`ReactNode`	`—`
`iconPresentation?`	`"glyph" \| "avatar"`	`"glyph"`
`actions?`	`ReactNode`	`—`
`actionLayout?`	`"inline" \| "stacked"`	`"inline"`
`unstyled?`	`boolean`	`false`
`slotProps?`	`{ icon?: ComponentProps<"span">; content?: DivSlot; title?: DivSlot; description?: DivSlot; actions?: DivSlot; }`	`{}`

Settings 设置结构

安装复制章节链接

组合与状态复制章节链接

Props复制章节链接

键盘与约束复制章节链接

避免这样使用复制章节链接

来源与版本复制章节链接