开关

查看源代码

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

导入

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

用法

颜色

举例

可控

value 属性可用于可控值。当用户输入并接收新值时， 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>
  );
}

大小

通过传递 size 属性来更改开关的大小。开关支持 xs、sm、md、lg 和 xl 这些大小。

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

export default function App() {
  return (
    <div className={"flex flex-row items-center gap-3"}>
      <Switch size={"xs"}>XS</Switch>
      <Switch size={"sm"}>SM</Switch>
      <Switch>MD</Switch>
      <Switch size={"lg"}>LG</Switch>
      <Switch size={"xl"}>XL</Switch>
    </div>
  );
}

颜色

通过传递 color 属性来更改开关的颜色。开关支持 primary、secondary、success、warning、danger 和 neutral 这些颜色。

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

export default function App() {
  return (
    <div className={"flex flex-row items-center gap-3"}>
      <Switch defaultChecked color={"primary"} size={"sm"}>
        Primary
      </Switch>
      <Switch defaultChecked color={"secondary"} size={"sm"}>
        Secondary
      </Switch>
      <Switch defaultChecked color={"success"} size={"sm"}>
        Success
      </Switch>
      <Switch defaultChecked color={"warning"} size={"sm"}>
        Warning
      </Switch>
      <Switch defaultChecked color={"danger"} size={"sm"}>
        Danger
      </Switch>
      <Switch defaultChecked color={"neutral"} size={"sm"}>
        Neutral
      </Switch>
    </div>
  );
}

属性

属性color简介

颜色

类型"primary" | "secondary" | "success" | "warning" | "danger" | "neutral"默认值'primary'必须false
属性size简介

大小

类型"xs" | "sm" | "md" | "lg" | "xl"默认值'md'必须false
属性checked简介

可控值

类型boolean默认值-必须false
属性defaultChecked简介

默认值

类型boolean默认值false必须false
属性onChange简介

onChange 回调

类型(checked: boolean) => void默认值-必须false
属性value简介

值

类型string | number默认值-必须false
属性disabled简介

是否禁用

类型boolean默认值false必须false
属性invalid简介

是否无效

类型boolean默认值false必须false
属性readOnly简介

是否只读

类型boolean默认值false必须false
属性spacing简介

间距

类型string | number默认值'0.5em'必须false

建议更改此页面