tango-ui-cw 0.0.1

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.
Files changed (42) hide show
  1. package/README.md +1 -0
  2. package/dist/index.js +30 -0
  3. package/dist/index.mjs +661 -0
  4. package/package.json +37 -0
  5. package/src/component/CSSFab/useTangoStyle.jsx +182 -0
  6. package/src/component/MaterialButton/MaterialButton.css +64 -0
  7. package/src/component/MaterialButton/index.jsx +58 -0
  8. package/src/component/MaterialInput/MaterialInput.css +33 -0
  9. package/src/component/MaterialInput/index.jsx +29 -0
  10. package/src/component/TButton/TButton.css +270 -0
  11. package/src/component/TButton/index.jsx +74 -0
  12. package/src/component/TColorPicker/TColorPicker.css +24 -0
  13. package/src/component/TColorPicker/index.jsx +106 -0
  14. package/src/component/TDate/TDate.css +0 -0
  15. package/src/component/TDate/index.jsx +148 -0
  16. package/src/component/TDatePicker/TDatePicker.css +13 -0
  17. package/src/component/TDatePicker/index.jsx +60 -0
  18. package/src/component/TDrawer/TDrawer.css +202 -0
  19. package/src/component/TDrawer/index.jsx +74 -0
  20. package/src/component/TInput/TInput.css +80 -0
  21. package/src/component/TInput/index.jsx +102 -0
  22. package/src/component/TLayout/TLayout.css +88 -0
  23. package/src/component/TLayout/index.jsx +77 -0
  24. package/src/component/TLine/TLine.css +54 -0
  25. package/src/component/TLine/index.jsx +57 -0
  26. package/src/component/TMark/TMark.css +6 -0
  27. package/src/component/TMark/index.jsx +78 -0
  28. package/src/component/TModal/TModal.css +108 -0
  29. package/src/component/TModal/index.jsx +69 -0
  30. package/src/component/TNotice/TNotice.css +52 -0
  31. package/src/component/TNotice/index.jsx +38 -0
  32. package/src/component/TNotice/useNotice.jsx +54 -0
  33. package/src/component/TSearch/TSearch.css +90 -0
  34. package/src/component/TSearch/index.jsx +100 -0
  35. package/src/component/TSpace/TSpace.css +43 -0
  36. package/src/component/TSpace/index.jsx +60 -0
  37. package/src/component/TTable/TTable.css +26 -0
  38. package/src/component/TTable/index.jsx +77 -0
  39. package/src/component/TTooltip/TTooltip.css +105 -0
  40. package/src/component/TTooltip/index.jsx +25 -0
  41. package/src/component/Tango/store.js +105 -0
  42. package/src/component/Tools/WaterMark/WaterMark.jsx +78 -0
@@ -0,0 +1,182 @@
1
+ // 封装sx属性值
2
+ export const useTangoStyle = (sx) => {
3
+ return Object.entries(sx).reduce((acc, [key, value]) => {
4
+ const pxValue = `${value}px`;
5
+
6
+ switch (key) {
7
+ case "mt":
8
+ acc.marginTop = typeof value === "number" ? `${value}px` : value;
9
+ break;
10
+ case "mr":
11
+ acc.marginRight = typeof value === "number" ? `${value}px` : value;
12
+ break;
13
+ case "mb":
14
+ acc.marginBottom = typeof value === "number" ? `${value}px` : value;
15
+ break;
16
+ case "ml":
17
+ acc.marginLeft = typeof value === "number" ? `${value}px` : value;
18
+ break;
19
+ case "m":
20
+ acc.margin = typeof value === "number" ? `${value}px` : value;
21
+ break;
22
+
23
+ case "pt":
24
+ acc.paddingTop = pxValue;
25
+ break;
26
+ case "pr":
27
+ acc.paddingRight = pxValue;
28
+ break;
29
+ case "pb":
30
+ acc.paddingBottom = pxValue;
31
+ break;
32
+ case "pl":
33
+ acc.paddingLeft = pxValue;
34
+ break;
35
+ case "p":
36
+ acc.padding = pxValue;
37
+ break;
38
+ case "br":
39
+ acc.borderRadius = typeof value === "number" ? `${value}px` : value;
40
+ break;
41
+ case "bg":
42
+ acc.background = value; // 直接使用传入的背景值
43
+ break;
44
+ case "c":
45
+ acc.color = value;
46
+ break;
47
+ case "b":
48
+ acc.border = value === 1 ? "1px solid red" : value; // 如果值是 1,则设置为 "1px solid red"
49
+ break;
50
+ case "center":
51
+ acc.position = "absolute"; // 设置绝对定位
52
+ acc.inset = 0; // 设置inset为0
53
+ acc.margin = "auto"; // 设置margin为auto,保证元素居中
54
+ break;
55
+ case "pot":
56
+ acc.top = pxValue;
57
+ break;
58
+ case "por":
59
+ acc.right = pxValue;
60
+ break;
61
+ case "pob":
62
+ acc.bottom = pxValue;
63
+ break;
64
+ case "pol":
65
+ acc.left = pxValue;
66
+ break;
67
+ case "rel":
68
+ acc.position = "relative"; // 设置相对定位
69
+ break;
70
+ case "ab":
71
+ acc.position = "absolute"; // 设置绝对定位
72
+ break;
73
+ case "fixed":
74
+ acc.position = "fixed"; // 设置窗口定位
75
+ break;
76
+ case "w":
77
+ acc.width = pxValue;
78
+ break;
79
+ case "h":
80
+ acc.height = pxValue;
81
+ break;
82
+ case "vw":
83
+ acc.width = `${value}vw`; // 将宽度值转换为 vw 单位
84
+ break;
85
+ case "vh":
86
+ acc.height = `${value}vh`; // 将高度值转换为 vh 单位
87
+ break;
88
+ case "presentw":
89
+ acc.width = `${value}%`; // 将宽度值转换为 % 单位
90
+ break;
91
+ case "presenth":
92
+ acc.height = `${value}%`; // 将高度值转换为 % 单位
93
+ break;
94
+ case "mw":
95
+ acc.minWidth = pxValue;
96
+ break;
97
+ case "mh":
98
+ acc.minHieght = pxValue;
99
+ break;
100
+ case "fl":
101
+ acc.float = "left";
102
+ break;
103
+ case "fr":
104
+ acc.float = "right";
105
+ break;
106
+ case "size":
107
+ acc.fontSize = pxValue;
108
+ break;
109
+ case "tac":
110
+ acc.textAlign = "center";
111
+ break;
112
+ case "z":
113
+ acc.zIndex = value;
114
+ break;
115
+ case "tran":
116
+ acc.transition = `${value}s`;
117
+ break;
118
+ case "flex":
119
+ acc.display = "flex";
120
+ break;
121
+ case "aic":
122
+ acc.alignItems = "center";
123
+ break;
124
+ case "jcc":
125
+ acc.justifyContent = "center";
126
+ break;
127
+ case "jc":
128
+ acc.justifyContent = value;
129
+ break;
130
+ case "oh":
131
+ acc.overflow = "hidden";
132
+ break;
133
+ case "ohauto":
134
+ acc.overflow = "auto";
135
+ break;
136
+ case "op":
137
+ acc.opacity = value;
138
+ break;
139
+ case "none":
140
+ acc.display = "none";
141
+ break;
142
+ case "ar":
143
+ acc.aspectRatio = value;
144
+ break;
145
+ case "ls":
146
+ acc.letterSpacing = pxValue;
147
+ break;
148
+ case "lh":
149
+ acc.lineHeight = pxValue;
150
+ break;
151
+ case "fwb":
152
+ acc.fontWeight = "bold";
153
+ break;
154
+ case "boxsizing":
155
+ acc.boxSizing = "border-box";
156
+ break;
157
+ case "boxshadow":
158
+ acc.boxShadow = value;
159
+ break;
160
+
161
+ case "f":
162
+ acc.flex = typeof value === "number" ? value : `${value}`; // 支持数字或字符串
163
+ break;
164
+ case "bColor":
165
+ acc.borderColor = value; // 直接使用传入的背景值
166
+ break;
167
+ case "bgSize":
168
+ acc.backgroundSize = value; // 直接使用传入的背景值
169
+ break;
170
+ case "bgPosition":
171
+ acc.backgroundPosition = value; // 直接使用传入的背景值
172
+ break;
173
+ case "bgRepeat":
174
+ acc.backgroundRepeat = value; // 直接使用传入的背景值
175
+ break;
176
+ default:
177
+ acc[key] = value; // 允许其他样式直接传入,理论上可以支持所有的CSS样式传入
178
+ }
179
+
180
+ return acc;
181
+ }, {});
182
+ };
@@ -0,0 +1,64 @@
1
+ .material-btn {
2
+ position: relative;
3
+ overflow: hidden;
4
+ border: none;
5
+ border-radius: 6px;
6
+ cursor: pointer;
7
+ font-family: Arial, sans-serif;
8
+ font-weight: 500;
9
+ color: white;
10
+ background-color: #4caf50;
11
+ transition: background-color 0.3s ease;
12
+ user-select: none;
13
+ outline: none;
14
+ padding: 10px 20px;
15
+ }
16
+
17
+ .material-btn:hover:not(.material-btn-disabled) {
18
+ background-color: #45a047;
19
+ }
20
+
21
+ .material-btn:active:not(.material-btn-disabled) {
22
+ background-color: #388e3c;
23
+ }
24
+
25
+ /* 不同大小 */
26
+ .material-btn-small {
27
+ font-size: 12px;
28
+ padding: 6px 12px;
29
+ }
30
+
31
+ .material-btn-medium {
32
+ font-size: 14px;
33
+ padding: 10px 20px;
34
+ }
35
+
36
+ .material-btn-large {
37
+ font-size: 18px;
38
+ padding: 14px 28px;
39
+ }
40
+
41
+ /* 禁用 */
42
+ .material-btn-disabled {
43
+ background-color: #e0e0e0;
44
+ color: #a0a0a0;
45
+ cursor: not-allowed;
46
+ }
47
+
48
+ /* 波纹效果 */
49
+ .ripple {
50
+ position: absolute;
51
+ border-radius: 50%;
52
+ background: rgba(255, 255, 255, 0.6);
53
+ transform: scale(0);
54
+ animation: ripple-effect 600ms linear;
55
+ pointer-events: none;
56
+ z-index: 0;
57
+ }
58
+
59
+ @keyframes ripple-effect {
60
+ to {
61
+ transform: scale(4);
62
+ opacity: 0;
63
+ }
64
+ }
@@ -0,0 +1,58 @@
1
+ import React, { useRef } from "react";
2
+ import "./MaterialButton.css"
3
+ import { useTangoStyle } from "../CSSFab/useTangoStyle"; // 继续导入
4
+
5
+ export default function MaterialButton({
6
+ size = "medium",
7
+ sx = {},
8
+ style = {},
9
+ className = "",
10
+ onClick,
11
+ children,
12
+ disabled = false,
13
+ ...rest
14
+ }) {
15
+ const buttonRef = useRef(null);
16
+
17
+ const sxStyle = useTangoStyle(sx); // 用你的自定义hook解析sx样式
18
+ const combinedStyle = { ...sxStyle, ...style }; // style优先
19
+
20
+ function handleRipple(e) {
21
+ if (disabled) return;
22
+
23
+ const button = buttonRef.current;
24
+ const circle = document.createElement("span");
25
+ const diameter = Math.max(button.clientWidth, button.clientHeight);
26
+ const radius = diameter / 2;
27
+
28
+ circle.classList.add("ripple");
29
+ circle.style.width = circle.style.height = `${diameter}px`;
30
+ circle.style.left = `${e.clientX - button.getBoundingClientRect().left - radius}px`;
31
+ circle.style.top = `${e.clientY - button.getBoundingClientRect().top - radius}px`;
32
+
33
+ const ripple = button.querySelector(".ripple");
34
+ if (ripple) ripple.remove();
35
+
36
+ button.appendChild(circle);
37
+ }
38
+
39
+ const sizeClass = `material-btn-${size}`;
40
+ const combinedClassName = `material-btn ${sizeClass} ${className} ${disabled ? "material-btn-disabled" : ""}`;
41
+
42
+ return (
43
+ <button
44
+ ref={buttonRef}
45
+ className={combinedClassName}
46
+ style={combinedStyle}
47
+ onClick={(e) => {
48
+ handleRipple(e);
49
+ onClick && onClick(e);
50
+ }}
51
+ disabled={disabled}
52
+ {...rest}
53
+ >
54
+ {children}
55
+ </button>
56
+ );
57
+ }
58
+
@@ -0,0 +1,33 @@
1
+ .materialInput .inputWrapper {
2
+ position: relative;
3
+ margin: 10px 0;
4
+ width: 100%;
5
+ }
6
+
7
+ .materialInputField {
8
+ width: 100%;
9
+ padding: 16px 8px 8px 8px;
10
+ font-size: 16px;
11
+ border: none;
12
+ border-bottom: 1px solid grey;
13
+ background: transparent;
14
+ outline: none;
15
+ }
16
+
17
+ .materialLabel {
18
+ position: absolute;
19
+ left: 8px;
20
+ top: 16px;
21
+ font-size: 16px;
22
+ color: grey;
23
+ transition: all 0.2s ease;
24
+ pointer-events: none;
25
+ }
26
+
27
+ /* label 上浮时 */
28
+ .filled ~ .materialLabel,
29
+ .float {
30
+ top: 2px;
31
+ font-size: 12px;
32
+ color: #45a047;
33
+ }
@@ -0,0 +1,29 @@
1
+ // Material风格Input
2
+ import { useState } from "react";
3
+ import './MaterialInput.css';
4
+
5
+ export default function FloatInput({ label, type = "text" }) {
6
+ const [focused, setFocused] = useState(false);
7
+ const [value, setValue] = useState("");
8
+
9
+ const isFloating = focused || value;
10
+
11
+ return (
12
+ <div className="materialInput">
13
+ <div className="inputWrapper">
14
+ <input
15
+ type={type}
16
+ className={`materialInputField ${isFloating ? "filled" : ""}`}
17
+ onFocus={() => setFocused(true)}
18
+ onBlur={() => setFocused(false)}
19
+ onChange={(e) => setValue(e.target.value)}
20
+ value={value}
21
+ />
22
+ <label className={`materialLabel ${isFloating ? "float" : ""}`}>
23
+ {label}
24
+ </label>
25
+ </div>
26
+ </div>
27
+ );
28
+ }
29
+
@@ -0,0 +1,270 @@
1
+ /* 默认按钮样式 */
2
+ .btn {
3
+ font-family: Arial, sans-serif;
4
+ border: none;
5
+ cursor: pointer;
6
+ padding: 8px 16px;
7
+ border-radius: 8px;
8
+ transition: all 0.3s;
9
+ -webkit-border-radius: 8px;
10
+ -moz-border-radius: 8px;
11
+ -ms-border-radius: 8px;
12
+ -o-border-radius: 8px;
13
+ letter-spacing: 2px;
14
+ }
15
+
16
+ .btn:hover {
17
+ transition: 0.5s;
18
+ -webkit-animation: btn-content 1s;
19
+ animation: btn-content 1s;
20
+ outline: 0.1em solid transparent;
21
+ outline-offset: 0.2em;
22
+ }
23
+
24
+ /* 类型样式 */
25
+ .btn-default {
26
+ background-color: rgb(213, 213, 213);
27
+ color: #000;
28
+ }
29
+
30
+ .btn-default:hover {
31
+ box-shadow: 0 0 0.4em 0 rgb(213, 213, 213);
32
+ }
33
+
34
+ .btn-transparent {
35
+ background-color: transparent;
36
+ color: black;
37
+ }
38
+
39
+ .btn-transparent:hover {
40
+ box-shadow: 0 0 0.4em 0 rgb(213, 213, 213);
41
+ }
42
+
43
+ .btn-danger {
44
+ background-color: #dc3545;
45
+ color: #fff;
46
+ }
47
+
48
+ .btn-danger:hover {
49
+ box-shadow: 0 0 0.4em 0 #dc3545;
50
+ }
51
+
52
+ .btn-success {
53
+ background-color: #4caf50;
54
+ color: #fff;
55
+ }
56
+
57
+ .btn-success:hover {
58
+ box-shadow: 0 0 0.4em 0 #4caf50;
59
+ }
60
+
61
+ /* 默认轮廓按钮 */
62
+ .btn-outline {
63
+ background-color: transparent;
64
+ border-width: 1px;
65
+ border-color: #000;
66
+ }
67
+
68
+ /* 默认类型 */
69
+ .btn-default.btn-outline {
70
+ color: #000;
71
+ border: 1px solid #d5d5d5;
72
+ }
73
+
74
+ .btn-default.btn-outline:hover {
75
+ box-shadow: 0 0 0.4em 0 #d5d5d5;
76
+ }
77
+
78
+ /* 成功类型 */
79
+ .btn-success.btn-outline {
80
+ color: #28a745;
81
+ border: 1px solid #28a745;
82
+ }
83
+
84
+ .btn-success.btn-outline:hover {
85
+ box-shadow: 0 0 0.4em 0 #28a745;
86
+ }
87
+
88
+ /* 警告类型 */
89
+ .btn-danger.btn-outline {
90
+ color: #dc3545;
91
+ border: 1px solid #dc3545;
92
+ }
93
+
94
+ .btn-danger.btn-outline:hover {
95
+ box-shadow: 0 0 0.4em 0 #dc3545;
96
+ }
97
+
98
+ /* 透明类型 */
99
+ .btn-transparent.btn-outline {
100
+ color: black;
101
+ border: 1px solid #6c757d;
102
+ }
103
+
104
+ .btn-transparent.btn-outline:hover {
105
+ box-shadow: 0 0 0.4em 0 #6c757d;
106
+ }
107
+
108
+ /* 新拟态风格默认按钮 */
109
+ .btn-Neumorphism {
110
+ font-family: Arial, sans-serif;
111
+ border: none;
112
+ cursor: pointer;
113
+ padding: 8px 16px;
114
+ border-radius: 8px;
115
+ background: #e0e0e0;
116
+ box-shadow:
117
+ 4px 4px 8px #bebebe,
118
+ -4px -4px 8px #ffffff;
119
+ transition: all 0.2s ease-in-out;
120
+ color: white;
121
+ }
122
+
123
+ /* hover时的效果 */
124
+ .btn-Neumorphism:hover {
125
+ box-shadow:
126
+ inset 4px 4px 8px rgba(190, 190, 190, 0.6),
127
+ inset -4px -4px 8px rgba(255, 255, 255, 0.8),
128
+ 4px 4px 8px rgba(190, 190, 190, 0.6),
129
+ -4px -4px 8px rgba(255, 255, 255, 0.8);
130
+ transform: translateY(-2px);
131
+ }
132
+
133
+
134
+ /* 按下时的内凹效果 */
135
+ .btn-Neumorphism:active {
136
+ box-shadow:
137
+ inset 4px 4px 8px #bebebe,
138
+ inset -4px -4px 8px #ffffff;
139
+ transform: translateY(1px);
140
+ }
141
+
142
+ /* 新拟态风格-成功类型 */
143
+ .btn-success.btn-Neumorphism {
144
+ background-color: #28a745;
145
+ color: #ffffff;
146
+ box-shadow:
147
+ inset 4px 4px 8px rgba(20, 90, 37, 0.6),
148
+ inset -4px -4px 8px rgba(50, 200, 100, 0.8),
149
+ 4px 4px 8px rgba(20, 90, 37, 0.3),
150
+ -4px -4px 8px rgba(50, 200, 100, 0.5);
151
+ border-radius: 8px;
152
+ transition: all 0.3s ease;
153
+ }
154
+
155
+ .btn-success.btn-Neumorphism:hover {
156
+ box-shadow:
157
+ inset 3px 3px 6px rgba(20, 90, 37, 0.8),
158
+ inset -3px -3px 6px rgba(50, 200, 100, 0.9),
159
+ 3px 3px 6px rgba(20, 90, 37, 0.5),
160
+ -3px -3px 6px rgba(50, 200, 100, 0.7);
161
+ transform: translateY(-2px);
162
+ }
163
+
164
+ .btn-success.btn-Neumorphism:active {
165
+ box-shadow:
166
+ inset 4px 4px 8px rgba(20, 90, 37, 0.9),
167
+ inset -4px -4px 8px rgba(50, 200, 100, 1);
168
+ transform: translateY(1px);
169
+ }
170
+
171
+ /* 新拟态风格-透明按钮 */
172
+ .btn-transparent.btn-Neumorphism {
173
+ background-color: transparent;
174
+ color: white;
175
+ border: 1px solid rgba(0, 0, 0, 0.1);
176
+ border-radius: 8px;
177
+ box-shadow:
178
+ 4px 4px 8px rgba(190, 190, 190, 0.6),
179
+ -4px -4px 8px rgba(255, 255, 255, 0.8);
180
+ padding: 8px 16px;
181
+ font-family: Arial, sans-serif;
182
+ cursor: pointer;
183
+ transition: all 0.2s ease-in-out;
184
+ }
185
+
186
+ /* 悬停状态 */
187
+ .btn-transparent.btn-Neumorphism:hover {
188
+ box-shadow:
189
+ inset 4px 4px 8px rgba(190, 190, 190, 0.6),
190
+ inset -4px -4px 8px rgba(255, 255, 255, 0.8),
191
+ 0 0 0.4em rgba(213, 213, 213, 0.8);
192
+ transform: translateY(-2px);
193
+ }
194
+
195
+ /* 按下状态 */
196
+ .btn-transparent.btn-Neumorphism:active {
197
+ box-shadow:
198
+ inset 6px 6px 12px rgba(190, 190, 190, 0.8),
199
+ inset -6px -6px 12px rgba(255, 255, 255, 1);
200
+ transform: translateY(1px);
201
+ }
202
+
203
+ /* 新拟态风格-警告按钮 */
204
+ .btn-danger.btn-Neumorphism {
205
+ background-color: #dc3545;
206
+ color: #fff;
207
+ border: none;
208
+ border-radius: 8px;
209
+ box-shadow:
210
+ 4px 4px 8px rgba(145, 40, 50, 0.6),
211
+ -4px -4px 8px rgba(255, 102, 112, 0.8);
212
+ padding: 8px 16px;
213
+ font-family: Arial, sans-serif;
214
+ cursor: pointer;
215
+ transition: all 0.2s ease-in-out;
216
+ }
217
+
218
+ /* 悬停状态 */
219
+ .btn-danger.btn-Neumorphism:hover {
220
+ box-shadow:
221
+ inset 4px 4px 8px rgba(145, 40, 50, 0.6),
222
+ inset -4px -4px 8px rgba(255, 102, 112, 0.8),
223
+ 0 0 0.4em rgba(220, 53, 69, 0.8);
224
+ transform: translateY(-2px);
225
+ }
226
+
227
+ /* 按下状态 */
228
+ .btn-danger.btn-Neumorphism:active {
229
+ box-shadow:
230
+ inset 6px 6px 12px rgba(145, 40, 50, 0.8),
231
+ inset -6px -6px 12px rgba(255, 102, 112, 1);
232
+ transform: translateY(1px);
233
+ }
234
+
235
+
236
+
237
+
238
+
239
+ /* 大小样式 */
240
+ .btn-small {
241
+ font-size: 12px;
242
+ padding: 4px 8px;
243
+ }
244
+
245
+ .btn-medium {
246
+ font-size: 14px;
247
+ padding: 8px 16px;
248
+ }
249
+
250
+ .btn-large {
251
+ font-size: 16px;
252
+ padding: 12px 20px;
253
+ }
254
+
255
+ .btn-huge {
256
+ font-size: 25px;
257
+ padding: 18px 45px;
258
+ }
259
+
260
+ /* 禁用状态 */
261
+ .btn-disabled {
262
+ background-color: #e0e0e0;
263
+ color: #a0a0a0;
264
+ cursor: not-allowed;
265
+ }
266
+
267
+ .btn-disabled:hover {
268
+ transition: 0s;
269
+ box-shadow: none;
270
+ }
@@ -0,0 +1,74 @@
1
+ // 封装的button组件
2
+ import React from "react";
3
+ import PropTypes from "prop-types";
4
+ import "./TButton.css"; // 引入样式文件
5
+ import { useTangoStyle } from "../CSSFab/useTangoStyle"; // 导入 useFastStyle 函数
6
+
7
+ export default function Button(props) {
8
+ // 接收属性参数,调整按钮样式
9
+ const {
10
+ type = "default",
11
+ size = "medium",
12
+ sx = {},
13
+ style: userStyle = {},
14
+ className: userClassName = "", // 允许用户自定义 className
15
+ onClick,
16
+ children,
17
+ disabled,
18
+ outline,
19
+ Neumorphism,
20
+ } = props;
21
+
22
+ // 使用类名控制按钮的样式:按钮类型,按钮尺寸,按钮是否禁用
23
+ const className = `btn btn-${type} btn-${size} ${
24
+ disabled ? "btn-disabled" : ""
25
+ } ${outline ? "btn-outline" : ""} ${
26
+ Neumorphism ? "btn-Neumorphism" : ""
27
+ } ${userClassName}`; // 合并用户传入的 className
28
+
29
+ // 用于接收sx属性设置的属性样式
30
+ const sxStyle = useTangoStyle(sx);
31
+
32
+ // 合并 sx 和 style,确保 style 优先级更高
33
+ const combinedStyle = { ...sxStyle, ...userStyle };
34
+
35
+ // 定义属性类型
36
+ Button.propTypes = {
37
+ type: PropTypes.oneOf(["default", "transparent", "danger", "success"]), // 按钮类型:默认、透明、警告、成功
38
+ size: PropTypes.oneOf(["small", "medium", "large", "huge"]), // 按钮大小
39
+ sx: PropTypes.object, // 自定义样式对象
40
+ style: PropTypes.object, // 用户传入的 style 属性,保证style属性优先级最高
41
+ onClick: PropTypes.func, // 点击事件
42
+ className: PropTypes.string, // 添加 className PropTypes
43
+ children: PropTypes.node.isRequired, // 按钮内容
44
+ disabled: PropTypes.bool, // 是否禁用
45
+ outline: PropTypes.bool, // 是否为轮廓按钮
46
+ Neumorphism: PropTypes.bool, // 是否为新拟态风格按钮
47
+ };
48
+
49
+ // 默认属性
50
+ Button.defaultProps = {
51
+ type: "default",
52
+ size: "medium",
53
+ sx: {},
54
+ style: {},
55
+ onClick: () => {},
56
+ className: "", // 默认值为空字符串
57
+ disabled: false,
58
+ outline: false,
59
+ Neumorphism: false,
60
+ };
61
+
62
+ return (
63
+ <button
64
+ className={className}
65
+ style={combinedStyle} // 应用解析后的内联样式
66
+ onClick={onClick}
67
+ disabled={disabled}
68
+ outline={outline}
69
+ Neumorphism={Neumorphism}
70
+ >
71
+ {children}
72
+ </button>
73
+ );
74
+ };