CNWei
cc35400f67
- TextButton：文字按钮（tone 主色/危险、可选图标、disabled）， 用于表格行内操作，hover 只加下划线 - ToggleRow：左标签 + 右开关的开关行，支持 hint 与 switchLabel - Table：新增 size='md' | 'sm'，sm 把行内边距收到 space-2 - 展示页：按钮补「文字按钮」、开关补「开关行」、表格补「紧凑档」； COMPONENTS.md 契约 3.46 / 3.47 与 README 清单同步
56 lines
1.4 KiB
TypeScript
56 lines
1.4 KiB
TypeScript
import type { ReactNode } from 'react'
|
|
import { Switch } from './Switch'
|
|
import { Text } from './Typography'
|
|
import styles from './ToggleRow.module.css'
|
|
|
|
/**
|
|
* 开关行：左边一行说明文字，右边一个开关，两端对齐。
|
|
*
|
|
* 设置面板里「每行一个开关」的场景用它，比自己拼 `Space justify="between"` 更整齐。
|
|
* 开关旁边没有文字标签时，`switchLabel` 必填（会进 aria-label）。
|
|
*/
|
|
export type ToggleRowProps = {
|
|
/** 显示的标签 */
|
|
label: ReactNode
|
|
checked: boolean
|
|
onChange: (checked: boolean) => void
|
|
/** 屏幕阅读器读到的开关名称，默认取 label 的文本 */
|
|
switchLabel?: string
|
|
disabled?: boolean
|
|
/** 标签下方的补充说明 */
|
|
hint?: ReactNode
|
|
className?: string
|
|
}
|
|
|
|
export function ToggleRow({
|
|
label,
|
|
checked,
|
|
onChange,
|
|
switchLabel,
|
|
disabled = false,
|
|
hint,
|
|
className,
|
|
}: ToggleRowProps) {
|
|
const accessibleLabel =
|
|
switchLabel ?? (typeof label === 'string' ? label : '开关')
|
|
|
|
return (
|
|
<div className={[styles.root, className].filter(Boolean).join(' ')}>
|
|
<span className={styles.text}>
|
|
<Text>{label}</Text>
|
|
{hint !== undefined && (
|
|
<Text size="xs" tone="muted">
|
|
{hint}
|
|
</Text>
|
|
)}
|
|
</span>
|
|
<Switch
|
|
checked={checked}
|
|
onChange={onChange}
|
|
disabled={disabled}
|
|
label={accessibleLabel}
|
|
/>
|
|
</div>
|
|
)
|
|
}
|