Group / Row 设置列表Group · Row
一行一个设置项:左边标签,右边控件或当前值。设置页、偏好面板、详情页里的操作列表都用它。
基本用法
Group 是带卡片底的容器,Row 之间自动加发丝线。首尾行的内容到上下边的距离被补足到 20,和左右一致。
消息通知有人提到你或回复你时提醒
声音
当前套餐专业版
可点击的行
传 href 渲染成链接,传 interactive 渲染成按钮;两者末尾都带箭头,children 变成箭头前的当前值(过长时省略)。
纵向堆叠
滑块、分段选择这类宽控件放不进右侧时,用 stack 把控件放到标签下面并撑满。
字号影响正文和代码块
外观
紧凑
compact 把内边距收到 16、行高收到 48,切换时用 soft 弹簧过渡。信息密度高的侧栏和检查器里用。
紧凑模式行高 56 → 48,内边距 20 → 16
自动保存
拼写检查
嵌在面板里
独立使用时分组圆角是 24;放进 Surface 后自动取同心值(44 − 16 = 28)。
- 邮箱[email protected]
- 两步验证已开启
规格
- 行
- 最小高 56(紧凑 48)= 32 高的控件 + 上下各 12
- 内边距
- 内容到分组四边都是 20(紧凑 16)
- 分隔
- 行间 1px 发丝线
- 圆角
- 独立使用 24;嵌在面板里取同心值 28
- 箭头
- 可点击行悬停时变深,不位移
接口
Group
| 属性 | 类型 | 默认值 | 说明 |
|---|---|---|---|
as | ElementType | 'div' | 渲染成什么元素;想要列表语义时用 ul 配 Row as="li"。 |
compact | boolean | — | 紧凑:内边距 16、行高 48。 |
Row
| 属性 | 类型 | 默认值 | 说明 |
|---|---|---|---|
label | ReactNode | — | 左侧标题。 |
description | ReactNode | — | 标题下的说明。 |
leading | ReactNode | — | 标题前的图标或头像。 |
children | ReactNode | — | 右侧内容:控件;可点击行里是箭头前的值。 |
stack | boolean | — | 纵向堆叠:控件放到标题下面并撑满。 |
href | string | — | 整行是链接,渲染成 a,末尾带箭头;可配合 target、rel。 |
interactive | boolean | — | 整行是按钮,渲染成 button type="button",末尾带箭头。 |
disabled | boolean | — | interactive 时禁用。 |
as | ElementType | 'div' | 静态行渲染成什么元素。传了 href 或 interactive 时忽略。 |
无障碍
- 静态行只是排版,标签文字不会自动关联右侧控件:请给控件
aria-label,或用 Field / label 包起来。 - 可点击行是原生链接或按钮:Tab 聚焦,Enter(按钮还有空格)触发;焦点环画在行内侧,不会被分组的圆角裁掉。
- 可点击行的名字 = 标签 + 说明 + 当前值,读屏会一次读完;箭头是装饰,对读屏隐藏。
- 需要“列表,共 N 项”的播报时用
Group as="ul"和Row as="li"。