tango-ui-cw 0.1.0 → 0.2.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.
- 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,270 +0,0 @@
|
|
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
|
-
}
|
File without changes
|
@@ -1,54 +0,0 @@
|
|
1
|
-
.line {
|
2
|
-
display: flex;
|
3
|
-
align-items: center;
|
4
|
-
justify-content: center;
|
5
|
-
position: relative;
|
6
|
-
width: 100%;
|
7
|
-
}
|
8
|
-
|
9
|
-
.line-small {
|
10
|
-
margin: 2px 0;
|
11
|
-
}
|
12
|
-
|
13
|
-
.line-medium {
|
14
|
-
margin: 6px 0;
|
15
|
-
}
|
16
|
-
|
17
|
-
.line-large {
|
18
|
-
margin: 10px 0;
|
19
|
-
}
|
20
|
-
|
21
|
-
.line-huge {
|
22
|
-
margin: 15px 0;
|
23
|
-
}
|
24
|
-
|
25
|
-
.line::before,
|
26
|
-
.line::after {
|
27
|
-
content: "";
|
28
|
-
flex: 1;
|
29
|
-
height: 1px;
|
30
|
-
background-color: #b2b2b2;
|
31
|
-
}
|
32
|
-
|
33
|
-
.line::before {
|
34
|
-
margin-right: 10px;
|
35
|
-
}
|
36
|
-
|
37
|
-
.line::after {
|
38
|
-
margin-left: 10px;
|
39
|
-
}
|
40
|
-
|
41
|
-
/* 如果没有文字,移除伪元素的间隔 */
|
42
|
-
.line:not(:has(.line-text))::before,
|
43
|
-
.line:not(:has(.line-text))::after {
|
44
|
-
margin: 0;
|
45
|
-
}
|
46
|
-
|
47
|
-
.line-text {
|
48
|
-
padding: 0 5px;
|
49
|
-
color: inherit; /* 继承文本颜色 */
|
50
|
-
background-color: transparent;
|
51
|
-
white-space: nowrap;
|
52
|
-
z-index: 1;
|
53
|
-
}
|
54
|
-
|
@@ -1,43 +0,0 @@
|
|
1
|
-
.space,.space-default{
|
2
|
-
width: auto;
|
3
|
-
height: auto;;
|
4
|
-
}
|
5
|
-
.space-inline{
|
6
|
-
display: inline-block;
|
7
|
-
}
|
8
|
-
.space-fixed{
|
9
|
-
position: fixed
|
10
|
-
}
|
11
|
-
.space-absolute{
|
12
|
-
position: absolute
|
13
|
-
}
|
14
|
-
.space-relative{
|
15
|
-
position: relative
|
16
|
-
}
|
17
|
-
.space-circle{
|
18
|
-
border-radius: 50%;
|
19
|
-
-webkit-border-radius: 50%;
|
20
|
-
-moz-border-radius: 50%;
|
21
|
-
-ms-border-radius: 50%;
|
22
|
-
-o-border-radius: 50%;
|
23
|
-
}
|
24
|
-
/* 三角形盒子 */
|
25
|
-
.space-triangle {
|
26
|
-
width: 0;
|
27
|
-
height: 0;
|
28
|
-
border-left: 50px solid transparent;
|
29
|
-
border-right: 50px solid transparent;
|
30
|
-
border-bottom: 100px solid #4caf50;
|
31
|
-
}
|
32
|
-
|
33
|
-
/* 半圆盒子 */
|
34
|
-
.space-halfCircle {
|
35
|
-
width: 100px;
|
36
|
-
height: 50px;
|
37
|
-
background: #4caf50;
|
38
|
-
border-top-left-radius: 100px;
|
39
|
-
border-top-right-radius: 100px;
|
40
|
-
border-bottom-left-radius: 0;
|
41
|
-
border-bottom-right-radius: 0;
|
42
|
-
}
|
43
|
-
|
@@ -1,105 +0,0 @@
|
|
1
|
-
/* Tooltip 容器样式 */
|
2
|
-
.tooltip-wrapper {
|
3
|
-
position: relative; /* 相对定位,便于控制 tooltip 的位置 */
|
4
|
-
display: inline-block; /* 适配内联内容 */
|
5
|
-
}
|
6
|
-
|
7
|
-
/* Tooltip 的默认样式 */
|
8
|
-
.tooltip {
|
9
|
-
position: absolute;
|
10
|
-
bottom: 150%; /* 定位到父元素上方 */
|
11
|
-
left: 50%; /* 水平居中 */
|
12
|
-
transform: translateX(-50%);
|
13
|
-
background: black;
|
14
|
-
color: white;
|
15
|
-
font-size: 16px;
|
16
|
-
padding: 8px 15px;
|
17
|
-
border-radius: 8px;
|
18
|
-
white-space: nowrap;
|
19
|
-
display: none;
|
20
|
-
z-index: 999; /* 确保在顶层 */
|
21
|
-
box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1); /* 添加阴影效果 */
|
22
|
-
}
|
23
|
-
|
24
|
-
/* 添加 Tooltip 的倒三角 */
|
25
|
-
.tooltip::after {
|
26
|
-
content: ""; /* 空内容用于绘制形状 */
|
27
|
-
position: absolute;
|
28
|
-
top: 100%; /* 定位到 Tooltip 的下方 */
|
29
|
-
left: 50%; /* 水平居中 */
|
30
|
-
transform: translateX(-50%);
|
31
|
-
border-width: 8px; /* 调整三角形大小 */
|
32
|
-
border-style: solid;
|
33
|
-
border-color: black transparent transparent transparent; /* 黑色三角形,透明边框 */
|
34
|
-
}
|
35
|
-
|
36
|
-
/* Hover 状态时显示 Tooltip */
|
37
|
-
.tooltip-wrapper:hover .tooltip {
|
38
|
-
display: block; /* Hover 时显示 */
|
39
|
-
}
|
40
|
-
|
41
|
-
/* Placement 样式 */
|
42
|
-
/* Tooltip 显示在顶部 */
|
43
|
-
.tooltip-wrapper.tooltip-top .tooltip {
|
44
|
-
bottom: 130%; /* 提示框在父元素上方 */
|
45
|
-
left: 47%;
|
46
|
-
transform: translateX(-50%);
|
47
|
-
margin-bottom: 8px; /* 与父元素的间距 */
|
48
|
-
}
|
49
|
-
|
50
|
-
.tooltip-wrapper.tooltip-top .tooltip::after {
|
51
|
-
top: 100%;
|
52
|
-
left: 50%;
|
53
|
-
transform: translateX(-50%);
|
54
|
-
border-color: black transparent transparent transparent;
|
55
|
-
}
|
56
|
-
|
57
|
-
/* Tooltip 显示在底部 */
|
58
|
-
.tooltip-wrapper.tooltip-bottom .tooltip {
|
59
|
-
top: 130%; /* 提示框在父元素下方 */
|
60
|
-
left: 45%;
|
61
|
-
height: 40px;
|
62
|
-
transform: translateX(-50%);
|
63
|
-
margin-top: 8px;
|
64
|
-
}
|
65
|
-
|
66
|
-
.tooltip-wrapper.tooltip-bottom .tooltip::after {
|
67
|
-
bottom: 100%;
|
68
|
-
left: 42%;
|
69
|
-
transform: translateY(-351%);
|
70
|
-
border-color: transparent transparent black transparent;
|
71
|
-
}
|
72
|
-
|
73
|
-
/* Tooltip 显示在左侧,有问题,暂时屏蔽,不提供左侧显示 */
|
74
|
-
/* .tooltip-wrapper.tooltip-left .tooltip {
|
75
|
-
right: 130%;
|
76
|
-
top: 50%;
|
77
|
-
height: 40px;
|
78
|
-
|
79
|
-
transform: translateY(-50%);
|
80
|
-
margin-right: 8px;
|
81
|
-
}
|
82
|
-
|
83
|
-
.tooltip-wrapper.tooltip-left .tooltip::after {
|
84
|
-
right: -8px;
|
85
|
-
top: 50%;
|
86
|
-
transform: translateY(-50%);
|
87
|
-
border-color: transparent transparent transparent black;
|
88
|
-
} */
|
89
|
-
|
90
|
-
/* Tooltip 显示在右侧 */
|
91
|
-
.tooltip-wrapper.tooltip-right .tooltip {
|
92
|
-
left: 110%; /* 提示框在父元素右侧 */
|
93
|
-
top: 50%;
|
94
|
-
height: 40px;
|
95
|
-
|
96
|
-
transform: translateY(-50%);
|
97
|
-
margin-left: 8px;
|
98
|
-
}
|
99
|
-
|
100
|
-
.tooltip-wrapper.tooltip-right .tooltip::after {
|
101
|
-
left: -8px;
|
102
|
-
top: 28%;
|
103
|
-
transform: translateX(-52%);
|
104
|
-
border-color: transparent black transparent transparent;
|
105
|
-
}
|