docs(design): Add docs and demo for Switch (#640)

.dumirc.ts

@@ -151,6 +151,7 @@ export default defineConfig({
             { title: 'Input 输入框', link: '/components/input' },
             { title: 'InputNumber 数字输入框', link: '/components/input-number' },
             { title: 'Radio 单选框', link: '/components/radio' },
+            { title: 'Switch 开关', link: '/components/switch' },
             { title: 'Select 选择器', link: '/components/select' },
             { title: 'TreeSelect 树选择', link: '/components/tree-select' },
           ],

packages/design/src/switch/demo/basic.tsx

@@ -0,0 +1,10 @@
+import React from 'react';
+import { Switch } from '@oceanbase/design';
+
+const onChange = (checked: boolean) => {
+  console.log(`switch to ${checked}`);
+};
+
+const App: React.FC = () => <Switch defaultChecked onChange={onChange} />;
+
+export default App;

packages/design/src/switch/demo/disabled.tsx

@@ -0,0 +1,12 @@
+import React from 'react';
+import { Switch } from '@oceanbase/design';
+
+const App: React.FC = () => (
+  <>
+    <Switch defaultChecked disabled={true} />
+    <br />
+    <Switch disabled={true} size="small" />
+  </>
+);
+
+export default App;

packages/design/src/switch/demo/loading.tsx

@@ -0,0 +1,12 @@
+import React from 'react';
+import { Switch } from '@oceanbase/design';
+
+const App: React.FC = () => (
+  <>
+    <Switch defaultChecked loading={true} />
+    <br />
+    <Switch loading={true} size="small" />
+  </>
+);
+
+export default App;

packages/design/src/switch/demo/size.tsx

@@ -0,0 +1,12 @@
+import React from 'react';
+import { Switch } from '@oceanbase/design';
+
+const App: React.FC = () => (
+  <>
+    <Switch defaultChecked />
+    <br />
+    <Switch defaultChecked size="small" />
+  </>
+);
+
+export default App;

packages/design/src/switch/index.md

@@ -0,0 +1,23 @@
+---
+title: Switch 开关
+nav:
+  title: 基础组件
+  path: /components
+demo:
+  cols: 2
+---
+
+- 🔥 完全继承 antd [Switch](https://ant.design/components/switch-cn) 的能力和 API，可无缝切换。
+- 💄 定制主题和样式，符合 OceanBase Design 设计规范，比如总是展示上下箭头。
+
+## 代码演示
+
+<!-- prettier-ignore -->
+<code src="./demo/basic.tsx" title="基本"></code>
+<code src="./demo/size.tsx" title="大小"></code>
+<code src="./demo/disabled.tsx" title="禁用"></code>
+<code src="./demo/loading.tsx" title="加载中"></code>
+
+## API
+
+- 详见 antd Switch 文档: https://ant.design/components/switch-cn