English | 简体中文

特性

• 渲染具有 role="switch" 和 aria-checked 状态的原生按钮。
• 支持受控和非受控的选中状态。
• 支持通过点击和键盘左右箭头键进行切换。
• 为选中和未选中状态的标签提供内容类/样式插槽。

安装

npm install @rc-component/switch

使用

import Switch from '@rc-component/switch';
import '@rc-component/switch/assets/index.css';

export default () => <Switch checkedChildren="On" unCheckedChildren="Off" />;

在线预览：https://switch.react-component.vercel.app/

示例

运行本地 dumi 站点：

npm install
npm start

然后打开 http://localhost:8000。

API

名称	类型	默认值	说明
autoFocus	boolean	-	挂载后自动聚焦开关。
checked	boolean	-	受控的检查状态。
checkedChildren	React.ReactNode	-	勾选时显示的内容。
className	string	-	附加 className。
classNames	{ content?: string }	-	内部内容的语义 className。
defaultChecked	boolean	false	初始检查状态。
disabled	boolean	false	禁用交互。
loadingIcon	React.ReactNode	-	额外加载图标节点。
onChange	(checked, event) => void	-	检查状态更改后触发。
onClick	(checked, event) => void	-	点击后触发。
onKeyDown	React.KeyboardEventHandler	-	按键按下处理函数。
prefixCls	string	'rc-switch'	className 前缀。
style	React.CSSProperties	-	根样式。
styles	{ content?: React.CSSProperties }	-	内部内容的语义样式。
tabIndex	number	-	Tab index.
title	string	-	本土产权属性。
unCheckedChildren	React.ReactNode	-	未选中时显示的内容。

本地开发

npm install
npm start
npm test
npm run tsc
npm run compile
npm run build

dumi 站点默认运行在 http://localhost:8000。

发布

npm run prepublishOnly

包构建完成后，发布流程由 @rc-component/np 通过 rc-np 命令处理。

许可证

@rc-component/switch 基于 MIT 许可证发布。