tango-ui-cw 0.1.0 → 0.2.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/dist/index.css +1 -1
- package/dist/index.js +10 -10
- package/dist/index.mjs +889 -757
- package/package.json +1 -1
- package/src/component/CSSFab/useTangoStyle.jsx +182 -182
- package/src/component/MaterialButton/{MaterialButton.css → MaterialButton.module.css} +64 -64
- package/src/component/MaterialButton/index.jsx +69 -58
- package/src/component/MaterialInput/{MaterialInput.css → MaterialInput.module.css} +37 -33
- package/src/component/MaterialInput/index.jsx +34 -29
- package/src/component/TButton/TButton.module.css +184 -0
- package/src/component/TButton/index.jsx +81 -74
- package/src/component/TColorPicker/{TColorPicker.css → TColorPicker.module.css} +24 -24
- package/src/component/TColorPicker/index.jsx +107 -106
- package/src/component/TDate/index.jsx +146 -148
- package/src/component/TDatePicker/TDatePicker.module.css +12 -0
- package/src/component/TDatePicker/index.jsx +72 -72
- package/src/component/TDrawer/{TDrawer.css → TDrawer.module.css} +203 -202
- package/src/component/TDrawer/index.jsx +80 -74
- package/src/component/TInput/{TInput.css → TInput.module.css} +67 -80
- package/src/component/TInput/index.jsx +95 -102
- package/src/component/TLayout/TLayout.css +88 -88
- package/src/component/TLayout/index.jsx +77 -77
- package/src/component/TLine/TLine.module.css +52 -0
- package/src/component/TLine/index.jsx +48 -57
- package/src/component/TMark/{TMark.css → TMark.module.css} +6 -6
- package/src/component/TMark/index.jsx +69 -78
- package/src/component/TModal/{TModal.css → TModal.module.css} +109 -108
- package/src/component/TModal/index.jsx +75 -69
- package/src/component/TNotice/{TNotice.css → TNotice.module.css} +50 -52
- package/src/component/TNotice/index.jsx +37 -38
- package/src/component/TNotice/useNotice.jsx +54 -54
- package/src/component/TSearch/{TSearch.css → TSearch.module.css} +80 -90
- package/src/component/TSearch/index.jsx +86 -100
- package/src/component/TSpace/TSpace.module.css +43 -0
- package/src/component/TSpace/index.jsx +60 -60
- package/src/component/TTable/{TTable.css → TTable.module.css} +26 -26
- package/src/component/TTable/index.jsx +73 -77
- package/src/component/TTooltip/TTooltip.module.css +66 -0
- package/src/component/TTooltip/index.jsx +33 -25
- package/src/component/Tango/store.js +105 -105
- package/src/component/Tools/WaterMark/WaterMark.jsx +78 -78
- package/src/component/TButton/TButton.css +0 -270
- package/src/component/TDate/TDate.css +0 -0
- package/src/component/TDatePicker/TDatePicker.css +0 -13
- package/src/component/TLine/TLine.css +0 -54
- package/src/component/TSpace/TSpace.css +0 -43
- package/src/component/TTooltip/TTooltip.css +0 -105
@@ -1,33 +1,37 @@
|
|
1
|
-
.materialInput
|
2
|
-
|
3
|
-
|
4
|
-
|
5
|
-
|
6
|
-
|
7
|
-
|
8
|
-
width: 100%;
|
9
|
-
|
10
|
-
|
11
|
-
|
12
|
-
|
13
|
-
|
14
|
-
|
15
|
-
|
16
|
-
|
17
|
-
|
18
|
-
|
19
|
-
|
20
|
-
|
21
|
-
|
22
|
-
|
23
|
-
|
24
|
-
|
25
|
-
|
26
|
-
|
27
|
-
|
28
|
-
|
29
|
-
|
30
|
-
|
31
|
-
|
32
|
-
|
33
|
-
|
1
|
+
.materialInput {
|
2
|
+
width: 100%;
|
3
|
+
}
|
4
|
+
|
5
|
+
.inputWrapper {
|
6
|
+
position: relative;
|
7
|
+
margin: 10px 0;
|
8
|
+
width: 100%;
|
9
|
+
}
|
10
|
+
|
11
|
+
.materialInputField {
|
12
|
+
width: 100%;
|
13
|
+
padding: 16px 8px 8px 8px;
|
14
|
+
font-size: 16px;
|
15
|
+
border: none;
|
16
|
+
border-bottom: 1px solid grey;
|
17
|
+
background: transparent;
|
18
|
+
outline: none;
|
19
|
+
}
|
20
|
+
|
21
|
+
.materialLabel {
|
22
|
+
position: absolute;
|
23
|
+
left: 8px;
|
24
|
+
top: 16px;
|
25
|
+
font-size: 16px;
|
26
|
+
color: grey;
|
27
|
+
transition: all 0.2s ease;
|
28
|
+
pointer-events: none;
|
29
|
+
}
|
30
|
+
|
31
|
+
/* 上浮状态样式 */
|
32
|
+
.filled ~ .materialLabel,
|
33
|
+
.float {
|
34
|
+
top: 2px;
|
35
|
+
font-size: 12px;
|
36
|
+
color: #45a047;
|
37
|
+
}
|
@@ -1,29 +1,34 @@
|
|
1
|
-
// Material风格Input
|
2
|
-
import { useState } from "react";
|
3
|
-
import
|
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=
|
13
|
-
<div className=
|
14
|
-
<input
|
15
|
-
type={type}
|
16
|
-
className={
|
17
|
-
|
18
|
-
|
19
|
-
|
20
|
-
|
21
|
-
|
22
|
-
|
23
|
-
|
24
|
-
|
25
|
-
|
26
|
-
|
27
|
-
|
28
|
-
|
29
|
-
|
1
|
+
// Material风格Input
|
2
|
+
import { useState } from "react";
|
3
|
+
import styles from "./MaterialInput.module.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={styles.materialInput}>
|
13
|
+
<div className={styles.inputWrapper}>
|
14
|
+
<input
|
15
|
+
type={type}
|
16
|
+
className={`${styles.materialInputField} ${
|
17
|
+
isFloating ? styles.filled : ""
|
18
|
+
}`}
|
19
|
+
onFocus={() => setFocused(true)}
|
20
|
+
onBlur={() => setFocused(false)}
|
21
|
+
onChange={(e) => setValue(e.target.value)}
|
22
|
+
value={value}
|
23
|
+
/>
|
24
|
+
<label
|
25
|
+
className={`${styles.materialLabel} ${
|
26
|
+
isFloating ? styles.float : ""
|
27
|
+
}`}
|
28
|
+
>
|
29
|
+
{label}
|
30
|
+
</label>
|
31
|
+
</div>
|
32
|
+
</div>
|
33
|
+
);
|
34
|
+
}
|
@@ -0,0 +1,184 @@
|
|
1
|
+
/* TButton.module.css */
|
2
|
+
|
3
|
+
.btn {
|
4
|
+
font-family: Arial, sans-serif;
|
5
|
+
border: none;
|
6
|
+
cursor: pointer;
|
7
|
+
padding: 8px 16px;
|
8
|
+
border-radius: 8px;
|
9
|
+
transition: all 0.3s;
|
10
|
+
letter-spacing: 2px;
|
11
|
+
}
|
12
|
+
|
13
|
+
.btn:hover {
|
14
|
+
transition: 0.5s;
|
15
|
+
animation: btn-content 1s;
|
16
|
+
outline: 0.1em solid transparent;
|
17
|
+
outline-offset: 0.2em;
|
18
|
+
}
|
19
|
+
|
20
|
+
.btn-default {
|
21
|
+
background-color: rgb(213, 213, 213);
|
22
|
+
color: #000;
|
23
|
+
}
|
24
|
+
|
25
|
+
.btn-default:hover {
|
26
|
+
box-shadow: 0 0 0.4em 0 rgb(213, 213, 213);
|
27
|
+
}
|
28
|
+
|
29
|
+
.btn-transparent {
|
30
|
+
background-color: transparent;
|
31
|
+
color: black;
|
32
|
+
}
|
33
|
+
|
34
|
+
.btn-transparent:hover {
|
35
|
+
box-shadow: 0 0 0.4em 0 rgb(213, 213, 213);
|
36
|
+
}
|
37
|
+
|
38
|
+
.btn-danger {
|
39
|
+
background-color: #dc3545;
|
40
|
+
color: #fff;
|
41
|
+
}
|
42
|
+
|
43
|
+
.btn-danger:hover {
|
44
|
+
box-shadow: 0 0 0.4em 0 #dc3545;
|
45
|
+
}
|
46
|
+
|
47
|
+
.btn-success {
|
48
|
+
background-color: #4caf50;
|
49
|
+
color: #fff;
|
50
|
+
}
|
51
|
+
|
52
|
+
.btn-success:hover {
|
53
|
+
box-shadow: 0 0 0.4em 0 #4caf50;
|
54
|
+
}
|
55
|
+
|
56
|
+
.btn-outline {
|
57
|
+
background-color: transparent;
|
58
|
+
border-width: 1px;
|
59
|
+
border-color: #000;
|
60
|
+
}
|
61
|
+
|
62
|
+
.btn-default.btn-outline {
|
63
|
+
color: #000;
|
64
|
+
border: 1px solid #d5d5d5;
|
65
|
+
}
|
66
|
+
|
67
|
+
.btn-default.btn-outline:hover {
|
68
|
+
box-shadow: 0 0 0.4em 0 #d5d5d5;
|
69
|
+
}
|
70
|
+
|
71
|
+
.btn-success.btn-outline {
|
72
|
+
color: #28a745;
|
73
|
+
border: 1px solid #28a745;
|
74
|
+
}
|
75
|
+
|
76
|
+
.btn-success.btn-outline:hover {
|
77
|
+
box-shadow: 0 0 0.4em 0 #28a745;
|
78
|
+
}
|
79
|
+
|
80
|
+
.btn-danger.btn-outline {
|
81
|
+
color: #dc3545;
|
82
|
+
border: 1px solid #dc3545;
|
83
|
+
}
|
84
|
+
|
85
|
+
.btn-danger.btn-outline:hover {
|
86
|
+
box-shadow: 0 0 0.4em 0 #dc3545;
|
87
|
+
}
|
88
|
+
|
89
|
+
.btn-transparent.btn-outline {
|
90
|
+
color: black;
|
91
|
+
border: 1px solid #6c757d;
|
92
|
+
}
|
93
|
+
|
94
|
+
.btn-transparent.btn-outline:hover {
|
95
|
+
box-shadow: 0 0 0.4em 0 #6c757d;
|
96
|
+
}
|
97
|
+
|
98
|
+
.btn-Neumorphism {
|
99
|
+
background: #e0e0e0;
|
100
|
+
box-shadow: 4px 4px 8px #bebebe, -4px -4px 8px #ffffff;
|
101
|
+
color: white;
|
102
|
+
}
|
103
|
+
|
104
|
+
.btn-Neumorphism:hover {
|
105
|
+
box-shadow: inset 4px 4px 8px rgba(190, 190, 190, 0.6), inset -4px -4px 8px rgba(255, 255, 255, 0.8), 4px 4px 8px rgba(190, 190, 190, 0.6), -4px -4px 8px rgba(255, 255, 255, 0.8);
|
106
|
+
transform: translateY(-2px);
|
107
|
+
}
|
108
|
+
|
109
|
+
.btn-Neumorphism:active {
|
110
|
+
box-shadow: inset 4px 4px 8px #bebebe, inset -4px -4px 8px #ffffff;
|
111
|
+
transform: translateY(1px);
|
112
|
+
}
|
113
|
+
|
114
|
+
.btn-success.btn-Neumorphism {
|
115
|
+
background-color: #28a745;
|
116
|
+
box-shadow: inset 4px 4px 8px rgba(20, 90, 37, 0.6), inset -4px -4px 8px rgba(50, 200, 100, 0.8), 4px 4px 8px rgba(20, 90, 37, 0.3), -4px -4px 8px rgba(50, 200, 100, 0.5);
|
117
|
+
}
|
118
|
+
|
119
|
+
.btn-success.btn-Neumorphism:hover {
|
120
|
+
box-shadow: inset 3px 3px 6px rgba(20, 90, 37, 0.8), inset -3px -3px 6px rgba(50, 200, 100, 0.9), 3px 3px 6px rgba(20, 90, 37, 0.5), -3px -3px 6px rgba(50, 200, 100, 0.7);
|
121
|
+
}
|
122
|
+
|
123
|
+
.btn-success.btn-Neumorphism:active {
|
124
|
+
box-shadow: inset 4px 4px 8px rgba(20, 90, 37, 0.9), inset -4px -4px 8px rgba(50, 200, 100, 1);
|
125
|
+
}
|
126
|
+
|
127
|
+
.btn-transparent.btn-Neumorphism {
|
128
|
+
background-color: transparent;
|
129
|
+
color: white;
|
130
|
+
border: 1px solid rgba(0, 0, 0, 0.1);
|
131
|
+
box-shadow: 4px 4px 8px rgba(190, 190, 190, 0.6), -4px -4px 8px rgba(255, 255, 255, 0.8);
|
132
|
+
}
|
133
|
+
|
134
|
+
.btn-transparent.btn-Neumorphism:hover {
|
135
|
+
box-shadow: inset 4px 4px 8px rgba(190, 190, 190, 0.6), inset -4px -4px 8px rgba(255, 255, 255, 0.8), 0 0 0.4em rgba(213, 213, 213, 0.8);
|
136
|
+
}
|
137
|
+
|
138
|
+
.btn-transparent.btn-Neumorphism:active {
|
139
|
+
box-shadow: inset 6px 6px 12px rgba(190, 190, 190, 0.8), inset -6px -6px 12px rgba(255, 255, 255, 1);
|
140
|
+
}
|
141
|
+
|
142
|
+
.btn-danger.btn-Neumorphism {
|
143
|
+
background-color: #dc3545;
|
144
|
+
box-shadow: 4px 4px 8px rgba(145, 40, 50, 0.6), -4px -4px 8px rgba(255, 102, 112, 0.8);
|
145
|
+
}
|
146
|
+
|
147
|
+
.btn-danger.btn-Neumorphism:hover {
|
148
|
+
box-shadow: inset 4px 4px 8px rgba(145, 40, 50, 0.6), inset -4px -4px 8px rgba(255, 102, 112, 0.8), 0 0 0.4em rgba(220, 53, 69, 0.8);
|
149
|
+
}
|
150
|
+
|
151
|
+
.btn-danger.btn-Neumorphism:active {
|
152
|
+
box-shadow: inset 6px 6px 12px rgba(145, 40, 50, 0.8), inset -6px -6px 12px rgba(255, 102, 112, 1);
|
153
|
+
}
|
154
|
+
|
155
|
+
.btn-small {
|
156
|
+
font-size: 12px;
|
157
|
+
padding: 4px 8px;
|
158
|
+
}
|
159
|
+
|
160
|
+
.btn-medium {
|
161
|
+
font-size: 14px;
|
162
|
+
padding: 8px 16px;
|
163
|
+
}
|
164
|
+
|
165
|
+
.btn-large {
|
166
|
+
font-size: 16px;
|
167
|
+
padding: 12px 20px;
|
168
|
+
}
|
169
|
+
|
170
|
+
.btn-huge {
|
171
|
+
font-size: 25px;
|
172
|
+
padding: 18px 45px;
|
173
|
+
}
|
174
|
+
|
175
|
+
.btn-disabled {
|
176
|
+
background-color: #e0e0e0;
|
177
|
+
color: #a0a0a0;
|
178
|
+
cursor: not-allowed;
|
179
|
+
}
|
180
|
+
|
181
|
+
.btn-disabled:hover {
|
182
|
+
transition: 0s;
|
183
|
+
box-shadow: none;
|
184
|
+
}
|
@@ -1,74 +1,81 @@
|
|
1
|
-
// 封装的button组件
|
2
|
-
import React from "react";
|
3
|
-
import PropTypes from "prop-types";
|
4
|
-
import
|
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 =
|
24
|
-
|
25
|
-
|
26
|
-
|
27
|
-
|
28
|
-
|
29
|
-
|
30
|
-
|
31
|
-
|
32
|
-
|
33
|
-
|
34
|
-
|
35
|
-
|
36
|
-
|
37
|
-
|
38
|
-
|
39
|
-
sx
|
40
|
-
|
41
|
-
|
42
|
-
|
43
|
-
|
44
|
-
|
45
|
-
|
46
|
-
|
47
|
-
|
48
|
-
|
49
|
-
|
50
|
-
|
51
|
-
|
52
|
-
|
53
|
-
|
54
|
-
|
55
|
-
|
56
|
-
|
57
|
-
|
58
|
-
|
59
|
-
|
60
|
-
|
61
|
-
|
62
|
-
|
63
|
-
|
64
|
-
|
65
|
-
|
66
|
-
|
67
|
-
|
68
|
-
|
69
|
-
|
70
|
-
|
71
|
-
{
|
72
|
-
|
73
|
-
|
74
|
-
}
|
1
|
+
// 封装的button组件
|
2
|
+
import React from "react";
|
3
|
+
import PropTypes from "prop-types";
|
4
|
+
import styles from './TButton.module.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 = [
|
24
|
+
styles.btn,
|
25
|
+
styles[`btn-${type}`],
|
26
|
+
styles[`btn-${size}`],
|
27
|
+
disabled ? styles['btn-disabled'] : '',
|
28
|
+
outline ? styles['btn-outline'] : '',
|
29
|
+
Neumorphism ? styles['btn-Neumorphism'] : '',
|
30
|
+
userClassName // 用户传入的 className 保持字符串形式
|
31
|
+
]
|
32
|
+
.filter(Boolean) // 过滤掉空值
|
33
|
+
.join(" ");
|
34
|
+
// 合并用户传入的 className
|
35
|
+
|
36
|
+
// 用于接收sx属性设置的属性样式
|
37
|
+
const sxStyle = useTangoStyle(sx);
|
38
|
+
|
39
|
+
// 合并 sx 和 style,确保 style 优先级更高
|
40
|
+
const combinedStyle = { ...sxStyle, ...userStyle };
|
41
|
+
|
42
|
+
// 定义属性类型
|
43
|
+
TButton.propTypes = {
|
44
|
+
type: PropTypes.oneOf(["default", "transparent", "danger", "success"]), // 按钮类型:默认、透明、警告、成功
|
45
|
+
size: PropTypes.oneOf(["small", "medium", "large", "huge"]), // 按钮大小
|
46
|
+
sx: PropTypes.object, // 自定义样式对象
|
47
|
+
style: PropTypes.object, // 用户传入的 style 属性,保证style属性优先级最高
|
48
|
+
onClick: PropTypes.func, // 点击事件
|
49
|
+
className: PropTypes.string, // 添加 className PropTypes
|
50
|
+
children: PropTypes.node.isRequired, // 按钮内容
|
51
|
+
disabled: PropTypes.bool, // 是否禁用
|
52
|
+
outline: PropTypes.bool, // 是否为轮廓按钮
|
53
|
+
Neumorphism: PropTypes.bool, // 是否为新拟态风格按钮
|
54
|
+
};
|
55
|
+
|
56
|
+
// 默认属性
|
57
|
+
TButton.defaultProps = {
|
58
|
+
type: "default",
|
59
|
+
size: "medium",
|
60
|
+
sx: {},
|
61
|
+
style: {},
|
62
|
+
onClick: () => {},
|
63
|
+
className: "", // 默认值为空字符串
|
64
|
+
disabled: false,
|
65
|
+
outline: false,
|
66
|
+
Neumorphism: false,
|
67
|
+
};
|
68
|
+
|
69
|
+
return (
|
70
|
+
<button
|
71
|
+
className={className}
|
72
|
+
style={combinedStyle} // 应用解析后的内联样式
|
73
|
+
onClick={onClick}
|
74
|
+
disabled={disabled}
|
75
|
+
outline={outline}
|
76
|
+
Neumorphism={Neumorphism}
|
77
|
+
>
|
78
|
+
{children}
|
79
|
+
</button>
|
80
|
+
);
|
81
|
+
};
|
@@ -1,24 +1,24 @@
|
|
1
|
-
.
|
2
|
-
width: 35px;
|
3
|
-
height: 35px;
|
4
|
-
|
5
|
-
|
6
|
-
|
7
|
-
|
8
|
-
|
9
|
-
|
10
|
-
|
11
|
-
|
12
|
-
|
13
|
-
|
14
|
-
|
15
|
-
|
16
|
-
|
17
|
-
|
18
|
-
|
19
|
-
|
20
|
-
|
21
|
-
|
22
|
-
|
23
|
-
|
24
|
-
|
1
|
+
.colorPicker {
|
2
|
+
width: 35px;
|
3
|
+
height: 35px;
|
4
|
+
padding: 0px 1px;
|
5
|
+
background: white;
|
6
|
+
}
|
7
|
+
|
8
|
+
.colorPickerDisabled {
|
9
|
+
cursor: not-allowed;
|
10
|
+
}
|
11
|
+
|
12
|
+
.colorPickerWrapper {
|
13
|
+
display: flex;
|
14
|
+
align-items: center;
|
15
|
+
gap: 10px;
|
16
|
+
}
|
17
|
+
|
18
|
+
.colorText {
|
19
|
+
display: flex;
|
20
|
+
flex-direction: column;
|
21
|
+
font-size: 12px;
|
22
|
+
color: #555;
|
23
|
+
}
|
24
|
+
|