代码拉取完成,页面将自动刷新
开关组件
import { Switch } from "@ls-design/ui-react";
<Switch checked></Switch>
<Switch disabled></Switch>
可以通过 size
或修改元素 font-size
来控制大小。
<Switch size="26"></Switch> <Switch style="font-size: 26px"></Switch>
可以通过 color
属性控制打开时的背景色 inactivecolor
属性控制关闭时的背景色。
<Switch color="red" inactivecolor="#08f"></Switch>
<quark-switch loading></quark-switch>
export default () => {
const [checked, setChecked] = useState(false);
const handleChange = (e) => {
setChecked(e.detail.value);
};
return <Switch onChange={handleChange} checked={checked}></Switch>;
};
参数 | 说明 | 类型 | 默认值 |
---|---|---|---|
checked | 开/关 | boolean |
false |
disabled | 禁用状态 | boolean |
false |
loading | 加载状态 | boolean |
false |
size | 开关大小 | number |
16px |
color | 打开时的背景色 | string |
#08f |
inactivecolor | 关闭时的背景色 | string |
#e1e6eb |
onChange | change 回调函数 | e: ({ detail: { value: string } }) => void |
组件提供了以下 CSS变量,可用于自定义样式
名称 | 说明 | 默认值 |
---|---|---|
--switch-label-width |
通过该变量控制 switch 宽度 | 50px / 3.125em |
此处可能存在不合适展示的内容,页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容,可点击提交进行申诉,我们将尽快为您处理。