rdh-button1 1.0.0
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 +90 -0
- package/package.json +34 -0
package/README.md
ADDED
|
@@ -0,0 +1,90 @@
|
|
|
1
|
+
# RDH Button
|
|
2
|
+
|
|
3
|
+
一个美观、可定制的 React 按钮组件库。
|
|
4
|
+
|
|
5
|
+
## 特性
|
|
6
|
+
|
|
7
|
+
- 🎨 多种样式变体
|
|
8
|
+
- 🌈 支持自定义颜色
|
|
9
|
+
- 📱 响应式设计
|
|
10
|
+
- 🎯 TypeScript 支持
|
|
11
|
+
- ⚡ 轻量级
|
|
12
|
+
- 🧩 易于集成
|
|
13
|
+
|
|
14
|
+
## 安装
|
|
15
|
+
|
|
16
|
+
```bash
|
|
17
|
+
npm install rdh-button
|
|
18
|
+
# 或
|
|
19
|
+
yarn add rdh-button
|
|
20
|
+
# 或
|
|
21
|
+
pnpm add rdh-button
|
|
22
|
+
```
|
|
23
|
+
|
|
24
|
+
## 使用
|
|
25
|
+
|
|
26
|
+
```tsx
|
|
27
|
+
import { Button } from 'rdh-button';
|
|
28
|
+
|
|
29
|
+
function App() {
|
|
30
|
+
return (
|
|
31
|
+
<Button variant="primary" onClick={() => console.log('Clicked!')}>
|
|
32
|
+
点击我
|
|
33
|
+
</Button>
|
|
34
|
+
);
|
|
35
|
+
}
|
|
36
|
+
```
|
|
37
|
+
|
|
38
|
+
## API
|
|
39
|
+
|
|
40
|
+
### Button Props
|
|
41
|
+
|
|
42
|
+
| 属性 | 类型 | 默认值 | 描述 |
|
|
43
|
+
|------|------|--------|------|
|
|
44
|
+
| `variant` | `'primary' \| 'secondary' \| 'success' \| 'danger' \| 'warning' \| 'info' \| 'ghost'` | `'primary'` | 按钮样式变体 |
|
|
45
|
+
| `size` | `'small' \| 'medium' \| 'large'` | `'medium'` | 按钮尺寸 |
|
|
46
|
+
| `disabled` | `boolean` | `false` | 是否禁用 |
|
|
47
|
+
| `loading` | `boolean` | `false` | 是否显示加载状态 |
|
|
48
|
+
| `fullWidth` | `boolean` | `false` | 是否全宽显示 |
|
|
49
|
+
| `icon` | `ReactNode` | `undefined` | 自定义图标 |
|
|
50
|
+
| `iconPosition` | `'left' \| 'right'` | `'left'` | 图标位置 |
|
|
51
|
+
| `className` | `string` | `undefined` | 自定义类名 |
|
|
52
|
+
| `style` | `CSSProperties` | `undefined` | 自定义样式 |
|
|
53
|
+
|
|
54
|
+
## 示例
|
|
55
|
+
|
|
56
|
+
### 基础用法
|
|
57
|
+
|
|
58
|
+
```tsx
|
|
59
|
+
<Button>默认按钮</Button>
|
|
60
|
+
<Button variant="primary">主要按钮</Button>
|
|
61
|
+
<Button variant="secondary">次要按钮</Button>
|
|
62
|
+
```
|
|
63
|
+
|
|
64
|
+
### 不同尺寸
|
|
65
|
+
|
|
66
|
+
```tsx
|
|
67
|
+
<Button size="small">小按钮</Button>
|
|
68
|
+
<Button size="medium">中按钮</Button>
|
|
69
|
+
<Button size="large">大按钮</Button>
|
|
70
|
+
```
|
|
71
|
+
|
|
72
|
+
### 不同状态
|
|
73
|
+
|
|
74
|
+
```tsx
|
|
75
|
+
<Button disabled>禁用按钮</Button>
|
|
76
|
+
<Button loading>加载中...</Button>
|
|
77
|
+
```
|
|
78
|
+
|
|
79
|
+
### 带图标
|
|
80
|
+
|
|
81
|
+
```tsx
|
|
82
|
+
<Button icon={<span>✨</span>}>带图标</Button>
|
|
83
|
+
<Button icon={<span>🚀</span>} iconPosition="right">
|
|
84
|
+
图标在右侧
|
|
85
|
+
</Button>
|
|
86
|
+
```
|
|
87
|
+
|
|
88
|
+
## License
|
|
89
|
+
|
|
90
|
+
MIT
|
package/package.json
ADDED
|
@@ -0,0 +1,34 @@
|
|
|
1
|
+
{
|
|
2
|
+
"name": "rdh-button1",
|
|
3
|
+
"version": "1.0.0",
|
|
4
|
+
"description": "A beautiful and customizable React button component",
|
|
5
|
+
"main": "dist/index.js",
|
|
6
|
+
"module": "dist/index.esm.js",
|
|
7
|
+
"types": "dist/index.d.ts",
|
|
8
|
+
"files": [
|
|
9
|
+
"dist"
|
|
10
|
+
],
|
|
11
|
+
"scripts": {
|
|
12
|
+
"build": "rollup -c",
|
|
13
|
+
"dev": "rollup -c -w",
|
|
14
|
+
"test": "echo \"Error: no test specified\" && exit 1"
|
|
15
|
+
},
|
|
16
|
+
"keywords": [
|
|
17
|
+
"button",
|
|
18
|
+
"react",
|
|
19
|
+
"component",
|
|
20
|
+
"ui"
|
|
21
|
+
],
|
|
22
|
+
"author": "",
|
|
23
|
+
"license": "MIT",
|
|
24
|
+
"peerDependencies": {
|
|
25
|
+
"react": ">=16.8.0",
|
|
26
|
+
"react-dom": ">=16.8.0"
|
|
27
|
+
},
|
|
28
|
+
"devDependencies": {
|
|
29
|
+
"@types/react": "^18.2.0",
|
|
30
|
+
"rollup": "^3.29.0",
|
|
31
|
+
"rollup-plugin-typescript2": "^0.36.0",
|
|
32
|
+
"typescript": "^5.3.0"
|
|
33
|
+
}
|
|
34
|
+
}
|