ElyriSwitch
开关：受控 / 非受控双支持，role="switch" 语义，空格与回车键切换。
安装
添加组件
pnpm dlx @elyri/cli@latest add switch示例
基础用法
两个带标签的开关，其中一个默认开启。
Email notifications
Product updates
import { Switch } from './components/elyri/Switch';
export function Example() {
return (
<div className="demo-stack">
<div className="demo-ui-switch-row">
<span>Email notifications</span>
<Switch defaultChecked aria-label="Email notifications" />
</div>
<div className="demo-ui-switch-row">
<span>Product updates</span>
<Switch aria-label="Product updates" />
</div>
</div>
);
}尺寸
两档尺寸：sm / md。
Small
Medium
import { Switch } from './components/elyri/Switch';
export function Example() {
return (
<div className="demo-stack">
<div className="demo-ui-switch-row">
<span>Small</span>
<Switch size="sm" defaultChecked aria-label="Small" />
</div>
<div className="demo-ui-switch-row">
<span>Medium</span>
<Switch size="md" defaultChecked aria-label="Medium" />
</div>
</div>
);
}禁用
开启与关闭两种禁用状态。
On
Off
import { Switch } from './components/elyri/Switch';
export function Example() {
return (
<div className="demo-stack">
<div className="demo-ui-switch-row">
<span>On</span>
<Switch defaultChecked disabled aria-label="On" />
</div>
<div className="demo-ui-switch-row">
<span>Off</span>
<Switch disabled aria-label="Off" />
</div>
</div>
);
}属性
| 属性 | 类型 | 默认值 | 说明 |
|---|---|---|---|
checked | boolean | — | 受控选中状态；不传则为非受控 |
defaultChecked | boolean | false | 非受控初始状态 |
onCheckedChange | (checked: boolean) => void | — | 选中状态变化回调，受控与非受控都会触发 |
size | 'sm' | 'md' | 'md' | 控件尺寸：sm / md |
disabled | boolean | false | 是否禁用 |
...rest | ButtonHTMLAttributes | — | 其余属性透传给原生 button |