开关

互斥性的操作控件，用户可打开或关闭某个功能。

导入

import { Switch } from "@resolid/react-ui";

用法

颜色

可控

飞行模式 未激活.
const [checked, setChecked] = useState(false);

return (
  <>
    <div>飞行模式 {checked ? <span className="text-fg-success">已激活</span> : "未激活"}.</div>
    <Switch checked={checked} onChange={setChecked}>
      飞行模式
    </Switch>
  </>
);

大小

<Switch size={"xs"}>XS</Switch>
<Switch size={"sm"}>SM</Switch>
<Switch>MD</Switch>
<Switch size={"lg"}>LG</Switch>
<Switch size={"xl"}>XL</Switch>

颜色

<Switch>Primary</Switch>
<Switch color={'success'}>Success</Switch>
<Switch color={'warning'}>Warning</Switch>
<Switch color={'danger'}>Danger</Switch>
<Switch color={'neutral'}>Neutral</Switch>

属性

属性size类型"xs" | "sm" | "md" | "lg" | "xl"默认值'md'必须false
属性color类型"primary" | "neutral" | "success" | "warning" | "danger"默认值'primary'必须false
属性spacing类型string | number默认值'0.5em'必须false
属性disabled类型boolean默认值false必须false
属性readOnly类型boolean默认值false必须false
属性onChange类型(value: boolean) => void默认值-必须false