@kingsoft-ai/design 0.1.9 → 0.1.10
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +55 -3
- package/dist/index.cjs +154 -154
- package/dist/index.cjs.map +1 -1
- package/dist/index.mjs +717 -656
- package/dist/index.mjs.map +1 -1
- package/dist/types/DesignThemeProvider.d.ts +44 -0
- package/dist/types/button/IconButton.d.ts +1 -1
- package/dist/types/index.d.ts +4 -0
- package/dist/types/switch/Switch.d.ts +1 -1
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -40,13 +40,37 @@ pnpm test:ui
|
|
|
40
40
|
|
|
41
41
|
## 使用
|
|
42
42
|
|
|
43
|
+
### 方式一：使用 DesignThemeProvider（推荐）
|
|
44
|
+
|
|
45
|
+
最简单的方式，自动使用默认主题：
|
|
46
|
+
|
|
47
|
+
```tsx
|
|
48
|
+
import { Button, Checkbox, Radio, DesignThemeProvider } from '@kingsoft-ai/design'
|
|
49
|
+
|
|
50
|
+
function App() {
|
|
51
|
+
return (
|
|
52
|
+
<DesignThemeProvider>
|
|
53
|
+
<Button variant="primary" size="md">
|
|
54
|
+
点击我
|
|
55
|
+
</Button>
|
|
56
|
+
<Checkbox label="同意条款" />
|
|
57
|
+
<Radio label="选项 A" name="choice" value="a" />
|
|
58
|
+
</DesignThemeProvider>
|
|
59
|
+
)
|
|
60
|
+
}
|
|
61
|
+
```
|
|
62
|
+
|
|
63
|
+
### 方式二：使用 CustomThemeProvider + 自定义主题
|
|
64
|
+
|
|
65
|
+
如果需要自定义主题或切换亮暗模式：
|
|
66
|
+
|
|
43
67
|
```tsx
|
|
44
|
-
import { Button, Checkbox, Radio } from '@kingsoft-ai/design'
|
|
68
|
+
import { Button, Checkbox, Radio, defaultLightDesignTheme } from '@kingsoft-ai/design'
|
|
45
69
|
import { CustomThemeProvider } from '@kingsoft-ai/theme'
|
|
46
70
|
|
|
47
71
|
function App() {
|
|
48
72
|
return (
|
|
49
|
-
<CustomThemeProvider>
|
|
73
|
+
<CustomThemeProvider theme={defaultLightDesignTheme}>
|
|
50
74
|
<Button variant="primary" size="md">
|
|
51
75
|
点击我
|
|
52
76
|
</Button>
|
|
@@ -57,11 +81,39 @@ function App() {
|
|
|
57
81
|
}
|
|
58
82
|
```
|
|
59
83
|
|
|
84
|
+
### 切换亮暗模式
|
|
85
|
+
|
|
86
|
+
```tsx
|
|
87
|
+
import { DesignThemeProvider } from '@kingsoft-ai/design'
|
|
88
|
+
|
|
89
|
+
function App({ isDark }: { isDark: boolean }) {
|
|
90
|
+
return (
|
|
91
|
+
<DesignThemeProvider mode={isDark ? 'dark' : 'light'}>
|
|
92
|
+
{/* 你的组件 */}
|
|
93
|
+
</DesignThemeProvider>
|
|
94
|
+
)
|
|
95
|
+
}
|
|
96
|
+
```
|
|
97
|
+
|
|
98
|
+
## 安装
|
|
99
|
+
|
|
100
|
+
```bash
|
|
101
|
+
# 使用 pnpm（推荐）
|
|
102
|
+
pnpm add @kingsoft-ai/design @emotion/react @emotion/styled react-aria
|
|
103
|
+
|
|
104
|
+
# 或使用 npm
|
|
105
|
+
npm install @kingsoft-ai/design @emotion/react @emotion/styled react-aria
|
|
106
|
+
|
|
107
|
+
# 或使用 yarn
|
|
108
|
+
yarn add @kingsoft-ai/design @emotion/react @emotion/styled react-aria
|
|
109
|
+
```
|
|
110
|
+
|
|
111
|
+
**注意**：`@kingsoft-ai/design` 已经包含了主题系统，无需单独安装 `@kingsoft-ai/theme`。
|
|
112
|
+
|
|
60
113
|
## 依赖
|
|
61
114
|
|
|
62
115
|
- React >= 18
|
|
63
116
|
- @emotion/react >= 11
|
|
64
117
|
- @emotion/styled >= 11
|
|
65
118
|
- react-aria >= 3
|
|
66
|
-
- @kingsoft-ai/theme (workspace)
|
|
67
119
|
|