1 Star 0 Fork 0

LS/ls-design

加入 Gitee
与超过 1200万 开发者一起发现、参与优秀开源项目,私有仓库也完全免费 :)
免费加入
文件
克隆/下载
zh-CN-react.md 2.11 KB
一键复制 编辑 原始数据 按行查看 历史

Switch


简介

开关组件

安装使用

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>

change 事件

export default () => {
  const [checked, setChecked] = useState(false);
  const handleChange = (e) => {
    setChecked(e.detail.value);
  };
  return <Switch onChange={handleChange} checked={checked}></Switch>;
};

Props

参数 说明 类型 默认值
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
Loading...
马建仓 AI 助手
尝试更多
代码解读
代码找茬
代码优化
1
https://gitee.com/LShere/ls-design.git
git@gitee.com:LShere/ls-design.git
LShere
ls-design
ls-design
master

搜索帮助