11<div align =" center " >
22 <h1 >@rc-component/switch</h1 >
3- <p ><sub >Ant Design 生态的一部分。</sub ></p >
4- <img alt =" Ant Design " height =" 32 " src =" https://gw.alipayobjects.com/zos/rmsportal/KDpgvguMpGfqaHPjicRK.svg " />
5- <p >🔀 React 开关组件。</p >
3+ <p ><sub ><img alt =" Ant Design " height =" 14 " src =" https://gw.alipayobjects.com/zos/rmsportal/KDpgvguMpGfqaHPjicRK.svg " style =" vertical-align : -0.125em ;" /> Ant Design 生态的一部分。</sub ></p >
4+ <p >🔘 React 开关组件。</p >
65
76 <p >
87 <a href="https://www.npmjs.com/package/@rc-component/switch"><img src="https://img.shields.io/npm/v/@rc-component/switch.svg?style=flat-square" alt="npm version" /></a>
1918
2019## 特性
2120
22- - Renders a native button with ` role="switch" ` and ` aria-checked ` state.
23- - 支持 controlled and uncontrolled checked state.
24- - Handles click and keyboard toggles with left and right arrow keys.
25- - 提供 content class/style slots for checked and unchecked labels.
21+ - 渲染具有 ` role="switch" ` 和 ` aria-checked ` 状态的本机按钮。
22+ - 支持受控和非受控检查状态。
23+ - 使用左右箭头键处理点击和键盘切换。
24+ - 为选中和未选中的标签提供内容类/样式槽。
2625
2726## 安装
2827
@@ -39,29 +38,29 @@ import '@rc-component/switch/assets/index.css';
3938export default () => <Switch checkedChildren = " On" unCheckedChildren = " Off" />;
4039```
4140
42- Online preview: https://switch.react-component.vercel.app/
41+ 在线预览: https://switch.react-component.vercel.app/
4342
4443## API
4544
4645| 名称 | 类型 | 默认值 | 说明 |
4746| ------------------- | ----------------------------------- | ------------- | ------------------------------------------ |
48- | ` autoFocus ` | boolean | - | Focus the switch on mount. |
49- | ` checked ` | boolean | - | Controlled checked state. |
50- | ` checkedChildren ` | React.ReactNode | - | Content shown when checked. |
51- | ` className ` | string | - | Additional class name. |
52- | ` classNames ` | ` { content?: string } ` | - | Semantic class names for internal content. |
53- | ` defaultChecked ` | boolean | false | Initial checked state. |
54- | ` disabled ` | boolean | false | Disable interaction. |
55- | ` loadingIcon ` | React.ReactNode | - | Extra loading icon node. |
56- | ` onChange ` | ` (checked, event) => void ` | - | Triggered after checked state changes. |
57- | ` onClick ` | ` (checked, event) => void ` | - | Triggered after click. |
47+ | ` autoFocus ` | boolean | - | 将开关聚焦在安装座上。 |
48+ | ` checked ` | boolean | - | 受控的检查状态。 |
49+ | ` checkedChildren ` | React.ReactNode | - | 勾选时显示的内容。 |
50+ | ` className ` | string | - | 附加className。 |
51+ | ` classNames ` | ` { content?: string } ` | - | 内部内容的语义className称。 |
52+ | ` defaultChecked ` | boolean | false | 初始检查状态。 |
53+ | ` disabled ` | boolean | false | 禁用交互。 |
54+ | ` loadingIcon ` | React.ReactNode | - | 额外加载图标节点。 |
55+ | ` onChange ` | ` (checked, event) => void ` | - | 检查状态更改后触发。 |
56+ | ` onClick ` | ` (checked, event) => void ` | - | 点击后触发。 |
5857| ` onKeyDown ` | React.KeyboardEventHandler | - | Key down handler. |
59- | ` prefixCls ` | string | ` 'rc-switch' ` | Prefix class name. |
60- | ` style ` | React.CSSProperties | - | Root style. |
61- | ` styles ` | ` { content?: React.CSSProperties } ` | - | Semantic styles for internal content. |
58+ | ` prefixCls ` | string | ` 'rc-switch' ` | 前缀className。 |
59+ | ` style ` | React.CSSProperties | - | 根样式。 |
60+ | ` styles ` | ` { content?: React.CSSProperties } ` | - | 内部内容的语义样式。 |
6261| ` tabIndex ` | number | - | Tab index. |
63- | ` title ` | string | - | Native title attribute. |
64- | ` unCheckedChildren ` | React.ReactNode | - | Content shown when unchecked. |
62+ | ` title ` | string | - | 本土产权属性。 |
63+ | ` unCheckedChildren ` | React.ReactNode | - | 未选中时显示的内容。 |
6564
6665## 本地开发
6766
@@ -80,8 +79,8 @@ npm run build
8079npm run prepublishOnly
8180```
8281
83- The release flow is handled by ` @rc-component/np ` through the ` rc-np ` command after the package build.
82+ 包构建完成后,发布流程由 ` @rc-component/np ` 通过 ` rc-np ` 命令处理。
8483
8584## 许可证
8685
87- @rc-component/switch is released under the [ MIT] ( ./LICENSE.md ) license.
86+ @rc-component/switch 基于 [ MIT] ( ./LICENSE.md ) 许可证发布。
0 commit comments