开关
查看源代码互斥性的操作控件，用户可打开或关闭某个功能。
演示
import { Switch } from "@resolid/react-ui";
export default function App() {
return <Switch>开关</Switch>;
}用法
import { Switch } from "@resolid/react-ui";特点
- 遵循 WAI ARIA Switch 设计模式。
- 由本机 HTML
<input>元素构建，该元素在视觉上隐藏以允许自定义样式。 - 标记对辅助技术的支持。
- 可以是受控的，也可以是不受控的。
举例
默认值
使用 defaultChecked 属性来设置开关的默认状态。
import { Switch } from "@resolid/react-ui";
export default function App() {
return <Switch defaultChecked>开关</Switch>;
}可控值
使用 checked 和 onChange 属性来控制开关的状态。
import { Switch } from "@resolid/react-ui";
import { useState } from "react";
export default function App() {
const [checked, setChecked] = useState(false);
return (
<div className={"flex flex-col gap-2"}>
<p>飞行模式: {checked ? <span className="text-fg-success">已激活</span> : "未激活"}.</p>
<Switch checked={checked} onChange={setChecked}>
飞行模式
</Switch>
</div>
);
}属性
| 属性 | 类型 | 默认值 | 必须 | |
|---|---|---|---|---|
| 属性color | 简介 颜色 | 类型"primary" | "secondary" | "success" | "warning" | "danger" | "neutral" | 默认值'primary' | 必须false |
| 属性size | 简介 大小 | 类型"xs" | "sm" | "md" | "lg" | "xl" | 默认值'md' | 必须false |
| 属性spacing | 简介 间距 | 类型string | number | 默认值'0.5em' | 必须false |
| 属性value | 简介 值 | 类型string | number | 默认值- | 必须false |
| 属性checked | 简介 可控值 | 类型boolean | 默认值- | 必须false |
| 属性defaultChecked | 简介 默认值 | 类型boolean | 默认值false | 必须false |
| 属性onChange | 简介 onChange 回调 | 类型(checked: boolean) => void | 默认值- | 必须false |
| 属性name | 简介 字段的名称, 提交表单时使用 | 类型string | 默认值- | 必须false |
| 属性disabled | 简介 是否禁用 | 类型boolean | 默认值false | 必须false |
| 属性required | 简介 是否必需 | 类型boolean | 默认值false | 必须false |
| 属性readOnly | 简介 是否只读 | 类型boolean | 默认值false | 必须false |
| 属性invalid | 简介 是否无效 | 类型boolean | 默认值false | 必须false |