@zjpcy/simple-design 1.0.2 → 1.0.4
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 +38 -562
- package/dist/cjs/index.css +1 -1
- package/dist/cjs/index.js +1 -1
- package/dist/es/Select/index.js +1 -0
- package/dist/es/index.css +1 -1
- package/dist/es/index.js +1 -1
- package/dist/types/Select/index.d.ts +9 -0
- package/dist/types/Select/types.d.ts +26 -0
- package/dist/types/index.d.ts +1 -0
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -1,582 +1,58 @@
|
|
|
1
|
-
# IDP Design
|
|
1
|
+
# IDP Design Component Library Usage Guide
|
|
2
2
|
|
|
3
|
-
## 1.
|
|
3
|
+
## 1. Introduction
|
|
4
4
|
|
|
5
|
-
IDP Design
|
|
5
|
+
IDP Design is a modern UI component library based on React, offering a range of concise, visually appealing, and user-friendly components suitable for various web application developments.
|
|
6
6
|
|
|
7
|
-
## 2.
|
|
7
|
+
## 2. Installation
|
|
8
8
|
|
|
9
9
|
```bash
|
|
10
|
-
#
|
|
10
|
+
# Install with npm
|
|
11
11
|
npm i @zjpcy/simple-design
|
|
12
12
|
|
|
13
|
-
#
|
|
13
|
+
# Install with yarn
|
|
14
14
|
yarn add @zjpcy/simple-design
|
|
15
15
|
```
|
|
16
16
|
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
### 3.1 Button 按钮组件
|
|
20
|
-
|
|
21
|
-
#### 3.1.1 基本用法
|
|
17
|
+
# 3. Import CSS
|
|
22
18
|
|
|
23
19
|
```tsx
|
|
24
|
-
import
|
|
25
|
-
import { Button } from '@zjpcy/simple-design';
|
|
26
|
-
|
|
27
|
-
const App: React.FC = () => {
|
|
28
|
-
return (
|
|
29
|
-
<Button onClick={() => console.log('Button clicked')}>
|
|
30
|
-
点击我
|
|
31
|
-
</Button>
|
|
32
|
-
);
|
|
33
|
-
};
|
|
20
|
+
import '@zjpcy/simple-design/dist/index.css';
|
|
34
21
|
```
|
|
35
22
|
|
|
36
|
-
|
|
23
|
+
# 4. Import Components
|
|
37
24
|
|
|
38
25
|
```tsx
|
|
39
26
|
import React from 'react';
|
|
40
27
|
import { Button } from '@zjpcy/simple-design';
|
|
41
|
-
|
|
42
|
-
const App: React.FC = () => {
|
|
43
|
-
return (
|
|
44
|
-
<div>
|
|
45
|
-
<Button variant="primary">主要按钮</Button>
|
|
46
|
-
<Button variant="secondary">次要按钮</Button>
|
|
47
|
-
<Button variant="success">成功按钮</Button>
|
|
48
|
-
<Button variant="warning">警告按钮</Button>
|
|
49
|
-
<Button variant="danger">危险按钮</Button>
|
|
50
|
-
</div>
|
|
51
|
-
);
|
|
52
|
-
};
|
|
53
|
-
```
|
|
54
|
-
|
|
55
|
-
#### 3.1.3 按钮尺寸
|
|
56
|
-
|
|
57
|
-
```tsx
|
|
58
|
-
import React from 'react';
|
|
59
|
-
import { Button } from '@zjpcy/simple-design';
|
|
60
|
-
|
|
61
|
-
const App: React.FC = () => {
|
|
62
|
-
return (
|
|
63
|
-
<div>
|
|
64
|
-
<Button size="small">小按钮</Button>
|
|
65
|
-
<Button size="medium">中按钮</Button>
|
|
66
|
-
<Button size="large">大按钮</Button>
|
|
67
|
-
</div>
|
|
68
|
-
);
|
|
69
|
-
};
|
|
70
|
-
```
|
|
71
|
-
|
|
72
|
-
#### 3.1.4 禁用状态
|
|
73
|
-
|
|
74
|
-
```tsx
|
|
75
|
-
import React from 'react';
|
|
76
|
-
import { Button } from '@zjpcy/simple-design';
|
|
77
|
-
|
|
78
|
-
const App: React.FC = () => {
|
|
79
|
-
return (
|
|
80
|
-
<Button disabled>
|
|
81
|
-
禁用按钮
|
|
82
|
-
</Button>
|
|
83
|
-
);
|
|
84
|
-
};
|
|
85
|
-
```
|
|
86
|
-
|
|
87
|
-
#### 3.1.5 自定义样式
|
|
88
|
-
|
|
89
|
-
```tsx
|
|
90
|
-
import React from 'react';
|
|
91
|
-
import { Button } from '@zjpcy/simple-design';
|
|
92
|
-
|
|
93
|
-
const App: React.FC = () => {
|
|
94
|
-
return (
|
|
95
|
-
<Button
|
|
96
|
-
className="custom-button"
|
|
97
|
-
style={{ borderRadius: '8px' }}
|
|
98
|
-
>
|
|
99
|
-
自定义按钮
|
|
100
|
-
</Button>
|
|
101
|
-
);
|
|
102
|
-
};
|
|
103
|
-
```
|
|
104
|
-
|
|
105
|
-
### 3.2 Marquee 公告栏组件
|
|
106
|
-
|
|
107
|
-
#### 3.2.1 基本用法
|
|
108
|
-
|
|
109
|
-
```tsx
|
|
110
|
-
import React from 'react';
|
|
111
|
-
import { Marquee } from '@zjpcy/simple-design';
|
|
112
|
-
|
|
113
|
-
const App: React.FC = () => {
|
|
114
|
-
return <Marquee />;
|
|
115
|
-
};
|
|
116
|
-
```
|
|
117
|
-
|
|
118
|
-
#### 3.2.2 自定义公告内容
|
|
119
|
-
|
|
120
|
-
```tsx
|
|
121
|
-
import React from 'react';
|
|
122
|
-
import { Marquee } from '@zjpcy/simple-design';
|
|
123
|
-
|
|
124
|
-
const App: React.FC = () => {
|
|
125
|
-
const customItems = [
|
|
126
|
-
{ id: '1', icon: 'fa-bullhorn', text: '欢迎使用 IDP Design 组件库！' },
|
|
127
|
-
{ id: '2', icon: 'fa-gift', text: '注册即送100积分！' },
|
|
128
|
-
{ id: '3', icon: 'fa-star', text: '全新会员体系已上线！' },
|
|
129
|
-
];
|
|
130
|
-
|
|
131
|
-
return (
|
|
132
|
-
<Marquee
|
|
133
|
-
items={customItems}
|
|
134
|
-
/>
|
|
135
|
-
);
|
|
136
|
-
};
|
|
137
|
-
```
|
|
138
|
-
|
|
139
|
-
#### 3.2.3 自定义滚动速度
|
|
140
|
-
|
|
141
|
-
```tsx
|
|
142
|
-
import React from 'react';
|
|
143
|
-
import { Marquee } from '@zjpcy/simple-design';
|
|
144
|
-
|
|
145
|
-
const App: React.FC = () => {
|
|
146
|
-
return (
|
|
147
|
-
<Marquee
|
|
148
|
-
speed={50} // 提高滚动速度
|
|
149
|
-
/>
|
|
150
|
-
);
|
|
151
|
-
};
|
|
152
|
-
```
|
|
153
|
-
|
|
154
|
-
#### 3.2.4 控制选项
|
|
155
|
-
|
|
156
|
-
```tsx
|
|
157
|
-
import React from 'react';
|
|
158
|
-
import { Marquee } from '@zjpcy/simple-design';
|
|
159
|
-
|
|
160
|
-
const App: React.FC = () => {
|
|
161
|
-
return (
|
|
162
|
-
<Marquee
|
|
163
|
-
showControls={true} // 显示控制按钮
|
|
164
|
-
autoStart={false} // 不自动开始滚动
|
|
165
|
-
/>
|
|
166
|
-
);
|
|
167
|
-
};
|
|
168
|
-
```
|
|
169
|
-
|
|
170
|
-
#### 3.2.5 关闭事件
|
|
171
|
-
|
|
172
|
-
```tsx
|
|
173
|
-
import React from 'react';
|
|
174
|
-
import { Marquee } from '@zjpcy/simple-design';
|
|
175
|
-
|
|
176
|
-
const App: React.FC = () => {
|
|
177
|
-
const handleClose = () => {
|
|
178
|
-
console.log('公告栏已关闭');
|
|
179
|
-
// 执行关闭后的逻辑
|
|
180
|
-
};
|
|
181
|
-
|
|
182
|
-
return (
|
|
183
|
-
<Marquee
|
|
184
|
-
onClose={handleClose}
|
|
185
|
-
/>
|
|
186
|
-
);
|
|
187
|
-
};
|
|
188
|
-
```
|
|
189
|
-
|
|
190
|
-
### 3.3 Notification 通知提示组件
|
|
191
|
-
|
|
192
|
-
#### 3.3.1 基本用法
|
|
193
|
-
|
|
194
|
-
```tsx
|
|
195
|
-
import React from 'react';
|
|
196
|
-
import { Notification } from '@zjpcy/simple-design';
|
|
197
|
-
|
|
198
|
-
const App: React.FC = () => {
|
|
199
|
-
return (
|
|
200
|
-
<Notification
|
|
201
|
-
message="这是一条通知消息"
|
|
202
|
-
/>
|
|
203
|
-
);
|
|
204
|
-
};
|
|
205
|
-
```
|
|
206
|
-
|
|
207
|
-
#### 3.3.2 通知类型
|
|
208
|
-
|
|
209
|
-
```tsx
|
|
210
|
-
import React from 'react';
|
|
211
|
-
import { Notification } from '@zjpcy/simple-design';
|
|
212
|
-
|
|
213
|
-
const App: React.FC = () => {
|
|
214
|
-
return (
|
|
215
|
-
<div>
|
|
216
|
-
<Notification message="这是一条信息通知" type="info" />
|
|
217
|
-
<Notification message="操作成功！" type="success" />
|
|
218
|
-
<Notification message="警告：请检查输入" type="warning" />
|
|
219
|
-
<Notification message="错误：操作失败" type="error" />
|
|
220
|
-
</div>
|
|
221
|
-
);
|
|
222
|
-
};
|
|
223
|
-
```
|
|
224
|
-
|
|
225
|
-
#### 3.3.3 自定义显示时长
|
|
226
|
-
|
|
227
|
-
```tsx
|
|
228
|
-
import React from 'react';
|
|
229
|
-
import { Notification } from '@zjpcy/simple-design';
|
|
230
|
-
|
|
231
|
-
const App: React.FC = () => {
|
|
232
|
-
return (
|
|
233
|
-
<Notification
|
|
234
|
-
message="这条通知将显示5秒"
|
|
235
|
-
duration={5000} // 5秒后自动关闭
|
|
236
|
-
/>
|
|
237
|
-
);
|
|
238
|
-
};
|
|
239
|
-
```
|
|
240
|
-
|
|
241
|
-
### 3.4 Radio 单选框组件
|
|
242
|
-
|
|
243
|
-
#### 3.4.1 基本用法
|
|
244
|
-
|
|
245
|
-
```tsx
|
|
246
|
-
import React from 'react';
|
|
247
|
-
import { Radio } from '@zjpcy/simple-design';
|
|
248
|
-
|
|
249
|
-
const App: React.FC = () => {
|
|
250
|
-
return (
|
|
251
|
-
<Radio checked onChange={(checked) => console.log(checked)}>
|
|
252
|
-
单选框
|
|
253
|
-
</Radio>
|
|
254
|
-
);
|
|
255
|
-
};
|
|
256
|
-
```
|
|
257
|
-
|
|
258
|
-
#### 3.4.2 组模式
|
|
259
|
-
|
|
260
|
-
```tsx
|
|
261
|
-
import React from 'react';
|
|
262
|
-
import { Radio } from '@zjpcy/simple-design';
|
|
263
|
-
|
|
264
|
-
const App: React.FC = () => {
|
|
265
|
-
return (
|
|
266
|
-
<Radio.Group>
|
|
267
|
-
<Radio value="option1">选项 1</Radio>
|
|
268
|
-
<Radio value="option2">选项 2</Radio>
|
|
269
|
-
<Radio value="option3">选项 3</Radio>
|
|
270
|
-
</Radio.Group>
|
|
271
|
-
);
|
|
272
|
-
};
|
|
273
28
|
```
|
|
274
29
|
|
|
275
|
-
|
|
276
|
-
|
|
277
|
-
|
|
278
|
-
|
|
279
|
-
|
|
280
|
-
|
|
281
|
-
|
|
282
|
-
|
|
283
|
-
|
|
284
|
-
|
|
285
|
-
|
|
286
|
-
|
|
287
|
-
|
|
288
|
-
|
|
289
|
-
|
|
290
|
-
|
|
291
|
-
|
|
292
|
-
|
|
293
|
-
|
|
294
|
-
|
|
295
|
-
|
|
296
|
-
|
|
297
|
-
|
|
298
|
-
|
|
299
|
-
|
|
300
|
-
|
|
301
|
-
|
|
302
|
-
|
|
303
|
-
|
|
304
|
-
```
|
|
305
|
-
|
|
306
|
-
#### 3.4.4 不同尺寸（按钮类型）
|
|
307
|
-
|
|
308
|
-
```tsx
|
|
309
|
-
import React from 'react';
|
|
310
|
-
import { Radio } from '@zjpcy/simple-design';
|
|
311
|
-
|
|
312
|
-
const App: React.FC = () => {
|
|
313
|
-
return (
|
|
314
|
-
<div>
|
|
315
|
-
<div style={{ marginBottom: '10px' }}>
|
|
316
|
-
<Radio.Group type="button" size="large">
|
|
317
|
-
<Radio value="option1">大尺寸</Radio>
|
|
318
|
-
<Radio value="option2">大尺寸</Radio>
|
|
319
|
-
<Radio value="option3">大尺寸</Radio>
|
|
320
|
-
</Radio.Group>
|
|
321
|
-
</div>
|
|
322
|
-
<div style={{ marginBottom: '10px' }}>
|
|
323
|
-
<Radio.Group type="button" size="middle">
|
|
324
|
-
<Radio value="option1">中尺寸</Radio>
|
|
325
|
-
<Radio value="option2">中尺寸</Radio>
|
|
326
|
-
<Radio value="option3">中尺寸</Radio>
|
|
327
|
-
</Radio.Group>
|
|
328
|
-
</div>
|
|
329
|
-
<div>
|
|
330
|
-
<Radio.Group type="button" size="small">
|
|
331
|
-
<Radio value="option1">小尺寸</Radio>
|
|
332
|
-
<Radio value="option2">小尺寸</Radio>
|
|
333
|
-
<Radio value="option3">小尺寸</Radio>
|
|
334
|
-
</Radio.Group>
|
|
335
|
-
</div>
|
|
336
|
-
</div>
|
|
337
|
-
);
|
|
338
|
-
};
|
|
339
|
-
```
|
|
340
|
-
|
|
341
|
-
#### 3.4.5 禁用状态
|
|
342
|
-
|
|
343
|
-
```tsx
|
|
344
|
-
import React from 'react';
|
|
345
|
-
import { Radio } from '@zjpcy/simple-design';
|
|
346
|
-
|
|
347
|
-
const App: React.FC = () => {
|
|
348
|
-
return (
|
|
349
|
-
<div>
|
|
350
|
-
<div style={{ marginBottom: '20px' }}>
|
|
351
|
-
<Radio disabled>禁用的单个单选框</Radio>
|
|
352
|
-
</div>
|
|
353
|
-
|
|
354
|
-
<div style={{ marginBottom: '20px' }}>
|
|
355
|
-
<Radio.Group disabled>
|
|
356
|
-
<Radio value="option1">禁用的选项 1</Radio>
|
|
357
|
-
<Radio value="option2">禁用的选项 2</Radio>
|
|
358
|
-
</Radio.Group>
|
|
359
|
-
</div>
|
|
360
|
-
|
|
361
|
-
<div>
|
|
362
|
-
<Radio.Group type="button">
|
|
363
|
-
<Radio value="option1">可用选项 1</Radio>
|
|
364
|
-
<Radio value="option2" disabled>禁用选项 2</Radio>
|
|
365
|
-
<Radio value="option3">可用选项 3</Radio>
|
|
366
|
-
</Radio.Group>
|
|
367
|
-
</div>
|
|
368
|
-
</div>
|
|
369
|
-
);
|
|
370
|
-
};
|
|
371
|
-
```
|
|
372
|
-
|
|
373
|
-
#### 3.4.6 自定义宽高（按钮类型）
|
|
374
|
-
|
|
375
|
-
```tsx
|
|
376
|
-
import React from 'react';
|
|
377
|
-
import { Radio } from '@zjpcy/simple-design';
|
|
378
|
-
|
|
379
|
-
const App: React.FC = () => {
|
|
380
|
-
return (
|
|
381
|
-
<div>
|
|
382
|
-
<div style={{ marginBottom: '10px' }}>
|
|
383
|
-
<Radio.Group type="button" style={{ width: '300px' }}>
|
|
384
|
-
<Radio value="option1">自定义宽度</Radio>
|
|
385
|
-
<Radio value="option2">自定义宽度</Radio>
|
|
386
|
-
</Radio.Group>
|
|
387
|
-
</div>
|
|
388
|
-
|
|
389
|
-
<div style={{ marginBottom: '10px' }}>
|
|
390
|
-
<Radio.Group type="button">
|
|
391
|
-
<Radio value="option1" style={{ width: '100px', height: '50px' }}>宽按钮</Radio>
|
|
392
|
-
<Radio value="option2" style={{ width: '150px', height: '50px' }}>更宽的按钮</Radio>
|
|
393
|
-
<Radio value="option3" style={{ width: '100px', height: '50px' }}>高按钮</Radio>
|
|
394
|
-
</Radio.Group>
|
|
395
|
-
</div>
|
|
396
|
-
|
|
397
|
-
<div>
|
|
398
|
-
<Radio.Group type="button">
|
|
399
|
-
<Radio value="option1" style={{ height: '60px' }}>自定义高度</Radio>
|
|
400
|
-
<Radio value="option2" style={{ height: '60px' }}>自定义高度</Radio>
|
|
401
|
-
</Radio.Group>
|
|
402
|
-
</div>
|
|
403
|
-
</div>
|
|
404
|
-
);
|
|
405
|
-
};
|
|
406
|
-
```
|
|
407
|
-
|
|
408
|
-
#### 3.4.7 受控模式
|
|
409
|
-
|
|
410
|
-
```tsx
|
|
411
|
-
import React, { useState } from 'react';
|
|
412
|
-
import { Radio } from '@zjpcy/simple-design';
|
|
413
|
-
|
|
414
|
-
const App: React.FC = () => {
|
|
415
|
-
const [value, setValue] = useState<string>('option1');
|
|
416
|
-
|
|
417
|
-
return (
|
|
418
|
-
<div>
|
|
419
|
-
<Radio.Group
|
|
420
|
-
value={value}
|
|
421
|
-
onChange={setValue}
|
|
422
|
-
>
|
|
423
|
-
<Radio value="option1">选项 1</Radio>
|
|
424
|
-
<Radio value="option2">选项 2</Radio>
|
|
425
|
-
<Radio value="option3">选项 3</Radio>
|
|
426
|
-
</Radio.Group>
|
|
427
|
-
<div style={{ marginTop: '10px', color: '#666' }}>
|
|
428
|
-
当前选中值: <strong>{value}</strong>
|
|
429
|
-
</div>
|
|
430
|
-
</div>
|
|
431
|
-
);
|
|
432
|
-
};
|
|
433
|
-
```
|
|
434
|
-
|
|
435
|
-
## 4. 组件 API
|
|
436
|
-
|
|
437
|
-
### 4.1 Button 组件 API
|
|
438
|
-
|
|
439
|
-
| 属性名 | 类型 | 默认值 | 描述 |
|
|
440
|
-
|--------|------|--------|------|
|
|
441
|
-
| children | React.ReactNode | - | 按钮内容 |
|
|
442
|
-
| variant | 'primary' \| 'secondary' \| 'danger' \| 'success' \| 'warning' | 'primary' | 按钮变体 |
|
|
443
|
-
| size | 'small' \| 'medium' \| 'large' | 'medium' | 按钮尺寸 |
|
|
444
|
-
| disabled | boolean | false | 是否禁用 |
|
|
445
|
-
| onClick | () => void | - | 点击事件回调 |
|
|
446
|
-
| className | string | - | 自定义类名 |
|
|
447
|
-
| style | React.CSSProperties | - | 自定义样式 |
|
|
448
|
-
|
|
449
|
-
### 4.2 Marquee 组件 API
|
|
450
|
-
|
|
451
|
-
| 属性名 | 类型 | 默认值 | 描述 |
|
|
452
|
-
|--------|------|--------|------|
|
|
453
|
-
| items | MarqueeItem[] | 默认公告数组 | 公告内容数组 |
|
|
454
|
-
| speed | number | 30 | 滚动速度 |
|
|
455
|
-
| showControls | boolean | true | 是否显示控制按钮 |
|
|
456
|
-
| autoStart | boolean | true | 是否自动开始滚动 |
|
|
457
|
-
| onClose | () => void | - | 关闭事件回调 |
|
|
458
|
-
|
|
459
|
-
### 4.3 Notification 组件 API
|
|
460
|
-
|
|
461
|
-
| 属性名 | 类型 | 默认值 | 描述 |
|
|
462
|
-
|--------|------|--------|------|
|
|
463
|
-
| message | string | - | 通知消息内容 |
|
|
464
|
-
| duration | number | 3000 | 显示时长（毫秒） |
|
|
465
|
-
| type | 'info' \| 'success' \| 'warning' \| 'error' | 'info' | 通知类型 |
|
|
466
|
-
|
|
467
|
-
### 4.4 Radio 组件 API
|
|
468
|
-
|
|
469
|
-
| 属性名 | 类型 | 默认值 | 描述 |
|
|
470
|
-
|--------|------|--------|------|
|
|
471
|
-
| value | any | - | Radio的值，用于Group模式下的选中判断 |
|
|
472
|
-
| checked | boolean | - | 是否选中（受控模式） |
|
|
473
|
-
| defaultChecked | boolean | false | 默认是否选中（非受控模式） |
|
|
474
|
-
| onChange | (checked: boolean, value: any) => void | - | 变化时的回调函数 |
|
|
475
|
-
| disabled | boolean | false | 是否禁用 |
|
|
476
|
-
| size | 'large' \| 'middle' \| 'small' | - | Radio的尺寸，优先使用Group传递的size |
|
|
477
|
-
| children | React.ReactNode | - | Radio的文本内容 |
|
|
478
|
-
| className | string | - | 自定义CSS类名 |
|
|
479
|
-
| style | React.CSSProperties | - | 自定义内联样式 |
|
|
480
|
-
|
|
481
|
-
### 4.5 Radio.Group 组件 API
|
|
482
|
-
|
|
483
|
-
| 属性名 | 类型 | 默认值 | 描述 |
|
|
484
|
-
|--------|------|--------|------|
|
|
485
|
-
| value | any | - | 当前选中的值（受控模式） |
|
|
486
|
-
| defaultValue | any | - | 默认选中的值（非受控模式） |
|
|
487
|
-
| onChange | (value: any) => void | - | 选中值变化时的回调函数 |
|
|
488
|
-
| disabled | boolean | false | 是否禁用所有子Radio |
|
|
489
|
-
| type | 'button' \| 'radio' | 'radio' | Radio组的类型，'button'为按钮样式，'radio'为默认样式 |
|
|
490
|
-
| size | 'large' \| 'middle' \| 'small' | 'middle' | Radio组的尺寸，仅对按钮样式生效 |
|
|
491
|
-
| children | React.ReactNode | - | 子Radio元素 |
|
|
492
|
-
| className | string | - | 自定义CSS类名 |
|
|
493
|
-
| style | React.CSSProperties | - | 自定义内联样式 |
|
|
494
|
-
|
|
495
|
-
## 5. 自定义样式
|
|
496
|
-
|
|
497
|
-
IDP Design 组件库支持通过 CSS 变量和自定义类名进行样式定制。
|
|
498
|
-
|
|
499
|
-
### 5.1 使用 CSS 变量
|
|
500
|
-
|
|
501
|
-
```css
|
|
502
|
-
/* 在项目的 CSS 文件中 */
|
|
503
|
-
:root {
|
|
504
|
-
/* 按钮主色调 */
|
|
505
|
-
--idp-btn-primary-bg: #1890ff;
|
|
506
|
-
--idp-btn-primary-color: #fff;
|
|
507
|
-
|
|
508
|
-
/* 公告栏背景 */
|
|
509
|
-
--idp-marquee-bg: linear-gradient(90deg, #1a2980, #26d0ce);
|
|
510
|
-
|
|
511
|
-
/* 通知颜色 */
|
|
512
|
-
--idp-notification-info-bg: #e6f7ff;
|
|
513
|
-
--idp-notification-success-bg: #f6ffed;
|
|
514
|
-
--idp-notification-warning-bg: #fffbe6;
|
|
515
|
-
--idp-notification-error-bg: #fff2f0;
|
|
516
|
-
}
|
|
517
|
-
```
|
|
518
|
-
|
|
519
|
-
### 5.2 使用自定义类名
|
|
520
|
-
|
|
521
|
-
```tsx
|
|
522
|
-
<Button className="my-custom-button">自定义按钮</Button>
|
|
523
|
-
```
|
|
524
|
-
|
|
525
|
-
```css
|
|
526
|
-
.my-custom-button {
|
|
527
|
-
border-radius: 8px;
|
|
528
|
-
font-weight: bold;
|
|
529
|
-
}
|
|
530
|
-
```
|
|
531
|
-
|
|
532
|
-
## 6. 贡献指南
|
|
533
|
-
|
|
534
|
-
欢迎参与 IDP Design 组件库的开发！
|
|
535
|
-
|
|
536
|
-
### 6.1 开发环境搭建
|
|
537
|
-
|
|
538
|
-
```bash
|
|
539
|
-
# 克隆仓库
|
|
540
|
-
git clone https://github.com/your-repo/@zjpcy/simple-design.git
|
|
541
|
-
|
|
542
|
-
# 安装依赖
|
|
543
|
-
cd @zjpcy/simple-design
|
|
544
|
-
npm install
|
|
545
|
-
|
|
546
|
-
# 启动开发服务器
|
|
547
|
-
npm run dev
|
|
548
|
-
|
|
549
|
-
# 构建组件库
|
|
550
|
-
npm run build
|
|
551
|
-
```
|
|
552
|
-
|
|
553
|
-
### 6.2 提交代码
|
|
554
|
-
|
|
555
|
-
1. 创建分支
|
|
556
|
-
2. 开发功能
|
|
557
|
-
3. 编写测试
|
|
558
|
-
4. 提交代码
|
|
559
|
-
5. 创建 Pull Request
|
|
560
|
-
|
|
561
|
-
## 7. 更新日志
|
|
562
|
-
|
|
563
|
-
### v1.0.0
|
|
564
|
-
- 初始版本
|
|
565
|
-
- 包含 Button 组件
|
|
566
|
-
- 包含 Marquee 公告栏组件
|
|
567
|
-
- 包含 Notification 通知组件
|
|
568
|
-
|
|
569
|
-
## 8. 许可证
|
|
570
|
-
|
|
571
|
-
MIT License
|
|
572
|
-
|
|
573
|
-
## 9. 联系方式
|
|
574
|
-
|
|
575
|
-
如有问题或建议，请通过以下方式联系我们：
|
|
576
|
-
|
|
577
|
-
- GitHub Issues: https://github.com/your-repo/@zjpcy/simple-design/issues
|
|
578
|
-
- 邮箱: support@idp-studio.com
|
|
579
|
-
|
|
580
|
-
---
|
|
581
|
-
|
|
582
|
-
感谢您使用 IDP Design 组件库！
|
|
30
|
+
# 5. Component List
|
|
31
|
+
|
|
32
|
+
- Button
|
|
33
|
+
- Checkbox
|
|
34
|
+
- ColorPicker
|
|
35
|
+
- CopyToClipboard
|
|
36
|
+
- Divider
|
|
37
|
+
- Flex
|
|
38
|
+
- Icon
|
|
39
|
+
- Input
|
|
40
|
+
- InputNumber
|
|
41
|
+
- InputSearch
|
|
42
|
+
- Message
|
|
43
|
+
- Modal
|
|
44
|
+
- Notice
|
|
45
|
+
- Notification
|
|
46
|
+
- Radio
|
|
47
|
+
- Select
|
|
48
|
+
- Table
|
|
49
|
+
- Top
|
|
50
|
+
|
|
51
|
+
# 6. Local Development
|
|
52
|
+
|
|
53
|
+
To enable local development, follow these steps:
|
|
54
|
+
|
|
55
|
+
1. Clone the repository: `git clone https://github.com/zjpcy/idp-design.git`
|
|
56
|
+
2. Navigate to the project directory: `cd idp-design`
|
|
57
|
+
3. Install dependencies: `npm install` or `yarn install`
|
|
58
|
+
4. Start the development server: `npm dev` or `yarn dev`
|