Skip to content

Commit 71f892c

Browse files
author
liyuan-meng
committed
🐛[Tooltip]修改气泡三角的样式，需继承阴影样式
1 parent d5fba43 commit 71f892c

3 files changed

Lines changed: 143 additions & 55 deletions

File tree

‎src/components/popover/demos/basic.md‎

Lines changed: 11 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@ import React, { useState, useEffect } from 'react';
99
import { Button, Popover, Message, Checkbox } from 'cloud-react';
1010

1111
export default function PopoverDemo() {
12-
const [isClick, setIsClick] = useState(false);
12+
const [isClick, setIsClick] = useState(true);
1313
const [trigger, setTrigger] = useState('hover');
1414

1515
useEffect(() => {
@@ -28,7 +28,7 @@ export default function PopoverDemo() {
2828
trigger={trigger}
2929
placement="right"
3030
content="这是一段文字描述">
31-
<Button size="small" type="secondary">纯文字</Button>
31+
<Button>纯文字</Button>
3232
</Popover>
3333
{split}
3434
<Popover
@@ -38,14 +38,14 @@ export default function PopoverDemo() {
3838
content="这是一段文字描述"
3939
showCancelBtn
4040
showConfirmBtn >
41-
<Button size="small" type="secondary">文字 + btn</Button>
41+
<Button>文字 + btn</Button>
4242
</Popover>
4343
{split}
4444
<Popover
4545
trigger={trigger}
4646
content="这是一段文字描述"
4747
showIcon >
48-
<Button size="small" type="secondary">文字 + Icon</Button>
48+
<Button>文字 + Icon</Button>
4949
</Popover>
5050
{split}
5151
<Popover
@@ -55,15 +55,15 @@ export default function PopoverDemo() {
5555
showIcon
5656
showCancelBtn
5757
showConfirmBtn>
58-
<Button size="small" type="secondary">文字 + Icon + btn</Button>
58+
<Button>文字 + Icon + btn</Button>
5959
</Popover>
6060
{split}
6161
<Popover
6262
trigger={trigger}
6363
size="small"
6464
title="标题"
6565
content="这是一段文字描述">
66-
<Button size="small" type="secondary">标题</Button>
66+
<Button>标题</Button>
6767
</Popover>
6868
{split}
6969
<Popover
@@ -72,7 +72,7 @@ export default function PopoverDemo() {
7272
title="标题"
7373
content="这是一段文字描述"
7474
showIcon>
75-
<Button size="small" type="secondary">标题 + Icon</Button>
75+
<Button>标题 + Icon</Button>
7676
</Popover>
7777
{split}
7878
<Popover
@@ -88,7 +88,7 @@ export default function PopoverDemo() {
8888
onConfirmClick={() => {
8989
console.log('confirmBtn is clicked');
9090
}}>
91-
<Button size="small" type="secondary">标题 + btn</Button>
91+
<Button>标题 + btn</Button>
9292
</Popover>
9393
{split}
9494
<Popover
@@ -109,7 +109,7 @@ export default function PopoverDemo() {
109109
Message.error('校验不合法，无法关闭弹窗')
110110
return a >= 2000;
111111
}}>
112-
<Button size="small" type="secondary">标题 + Icon + btn（click 触发）</Button>
112+
<Button>标题 + Icon + btn（click 触发）</Button>
113113
</Popover>
114114
{split}
115115
<Popover
@@ -119,14 +119,14 @@ export default function PopoverDemo() {
119119
showIcon
120120
showCancelBtn
121121
showConfirmBtn>
122-
<Button size="small" type="secondary">超长</Button>
122+
<Button>超长</Button>
123123
</Popover>
124124
{split}
125125
<Popover
126126
type="remind"
127127
trigger={trigger}
128128
content="正文内容正内容正文内容正文内容正文内容正文内容正文内容正内容正文内容正文内容正文内容正文内容">
129-
<Button size="small" type="secondary">新功能提醒</Button>
129+
<Button>新功能提醒</Button>
130130
</Popover>
131131
</div>
132132
);

‎src/components/popover/index.js‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -104,6 +104,7 @@ function Popover(props) {
104104
<Button
105105
onClick={handleCancelClick}
106106
size="small"
107+
type="secondary"
107108
className={cancelBtnClass}
108109
{...cancelBtnOpts}
109110
>
@@ -149,7 +150,7 @@ function Popover(props) {
149150
title || showCancelBtn || showConfirmBtn,
150151
})}
151152
overlayStyle={{
152-
width, maxWidth: width, maxHeight: 280, padding: 12,
153+
width, maxWidth: width, maxHeight: 280, padding: 12, borderRadius: 6,
153154
}}
154155
{...otherProps}
155156
>

‎src/components/tooltip/index.less‎

Lines changed: 130 additions & 43 deletions
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,52 @@
11
@import '../style/index';
22

33
@tooltip-prefix-cls: ~'@{prefix}-tooltip';
4-
@left-space-size: 5px;
5-
@top-space-size: 5px;
6-
@offset-size: -10px;
4+
@left-space-size: 11px;
5+
@top-space-size: 11px;
6+
@offset-size: -4px;
77
@light-offset-size: -3px;
88

9-
.theme-style(@backColor, @color) {
9+
@angleColor: rgb(38 38 38);
10+
11+
.theme-style(@backColor, @color, @angleColor) {
1012
background-color: @backColor;
1113
color: @color;
1214
&:after {
13-
border-top-color: @backColor;
15+
background: @backColor;
16+
}
17+
&:before {
18+
background: @angleColor;
1419
}
1520
}
1621

22+
.top-before-style() {
23+
width: calc(100% - 8px);
24+
height: 10px;
25+
bottom: 0;
26+
left: 4px;
27+
}
28+
29+
.right-before-style() {
30+
width: 10px;
31+
height: calc(100% - 8px);
32+
left: 0;
33+
top: 4px;
34+
}
35+
36+
.left-before-style() {
37+
width: 10px;
38+
height: calc(100% - 8px);
39+
right: 0;
40+
top: 4px;
41+
}
42+
43+
.bottom-before-style() {
44+
width: calc(100% - 8px);
45+
height: 10px;
46+
top: 0;
47+
left: 4px;
48+
}
49+
1750
.@{tooltip-prefix-cls} {
1851
position: absolute;
1952
font-size: 12px;
@@ -42,111 +75,165 @@
4275
&:after {
4376
content: '';
4477
position: absolute;
45-
width: 0;
46-
height: 0;
47-
border: 5px solid transparent;
48-
border-top-width: 5px;
78+
width: 10px;
79+
height: 10px;
80+
box-shadow: @border-shadow-4;
81+
transform: rotate(45deg);
82+
}
83+
84+
&:before {
85+
content: '';
86+
position: absolute;
87+
z-index: 1;
4988
}
5089

5190
&.is-dark {
52-
.theme-style(@gray-9, @color-white);
91+
.theme-style(@gray-9, @color-white, @angleColor);
5392
}
5493

5594
&.is-light {
56-
.theme-style(@color-white, @gray-9);
95+
.theme-style(@color-white, @gray-9, @color-white);
5796
box-shadow: @border-shadow-4;
5897
}
5998

6099
&.is-error {
61-
.theme-style(@color-red1, @color-gray1);
100+
.theme-style(@color-red1, @color-gray1, @color-red1);
62101
box-shadow: @border-shadow-4;
63102
}
64103

65104
&.is-remind {
66-
.theme-style(@blue-4, @color-white);
105+
.theme-style(@blue-4, @color-white, @blue-4);
67106
}
68107

69-
&.top-left:after {
70-
bottom: @offset-size;
71-
left: @left-space-size;
72-
transform: rotate(0);
108+
&.top-left {
109+
&:after {
110+
bottom: @offset-size;
111+
left: @left-space-size;
112+
transform: rotate(45deg);
113+
}
114+
&:before {
115+
.top-before-style();
116+
}
73117
}
74118

75-
&.top-center:after {
76-
bottom: @offset-size;
77-
left: 50%;
78-
transform: translate(-50%) rotate(0);
119+
&.top-center {
120+
&:after {
121+
bottom: @offset-size;
122+
left: 50%;
123+
transform: translate(-50%) rotate(45deg);
124+
}
125+
&:before {
126+
.top-before-style();
127+
}
79128
}
80129

81-
&.top-right:after {
82-
bottom: @offset-size;
83-
left: calc(100% - @left-space-size + @offset-size);
84-
transform: rotate(0);
130+
&.top-right {
131+
&:after {
132+
bottom: @offset-size;
133+
left: calc(100% - @left-space-size + @offset-size);
134+
transform: rotate(45deg);
135+
}
136+
&:before {
137+
.top-before-style();
138+
}
85139
}
86140

87-
&.right-top:after {
88-
left: @offset-size;
89-
top: @top-space-size;
90-
transform: rotate(90deg);
141+
&.right-top {
142+
&:after {
143+
left: @offset-size;
144+
top: @top-space-size;
145+
transform: rotate(45deg);
146+
}
147+
&:before {
148+
.right-before-style()
149+
}
91150
}
92151

93-
&.right-center:after {
94-
left: @offset-size;
95-
top: 50%;
96-
transform: translate(0, -50%) rotate(90deg);
152+
&.right-center {
153+
&:after {
154+
left: @offset-size;
155+
top: 50%;
156+
transform: translate(0, -50%) rotate(45deg);
157+
}
158+
&:before {
159+
.right-before-style()
160+
}
97161
}
98162

99-
&.right-bottom:after {
100-
left: @offset-size;
101-
top: calc(100% - @top-space-size + @offset-size);
102-
transform: rotate(90deg);
163+
&.right-bottom {
164+
&:after {
165+
left: @offset-size;
166+
top: calc(100% - @top-space-size + @offset-size);
167+
transform: rotate(45deg);
168+
}
169+
&:before {
170+
.right-before-style()
171+
}
103172
}
104173

105174
&.left-top {
106175
&:after {
107176
right: @offset-size;
108177
top: @top-space-size;
109-
transform: rotate(270deg);
178+
transform: rotate(45deg);
179+
}
180+
&:before {
181+
.left-before-style();
110182
}
111183
}
112184

113185
&.left-center {
114186
&:after {
115187
right: @offset-size;
116188
top: 50%;
117-
transform: translate(0, -50%) rotate(270deg);
189+
transform: translate(0, -50%) rotate(45deg);
190+
}
191+
&:before {
192+
.left-before-style();
118193
}
119194
}
120195

121196
&.left-bottom {
122197
&:after {
123198
right: @offset-size;
124199
top: calc(100% - @top-space-size + @offset-size);
125-
transform: rotate(270deg);
200+
transform: rotate(45deg);
201+
}
202+
&:before {
203+
.left-before-style();
126204
}
127205
}
128206

129207
&.bottom-left {
130208
&:after {
131209
top: @offset-size;
132210
left: @left-space-size;
133-
transform: rotate(180deg);
211+
transform: rotate(45deg);
212+
}
213+
&:before {
214+
.bottom-before-style();
134215
}
135216
}
136217

137218
&.bottom-center {
138219
&:after {
139220
top: @offset-size;
140221
left: 50%;
141-
transform: translate(-50%) rotate(180deg);
222+
transform: translate(-50%) rotate(45deg);
223+
}
224+
&:before {
225+
.bottom-before-style();
142226
}
143227
}
144228

145229
&.bottom-right {
146230
&:after {
147231
top: @offset-size;
148232
left: calc(100% - @left-space-size + @offset-size);
149-
transform: rotate(180deg);
233+
transform: rotate(45deg);
234+
}
235+
&:before {
236+
.bottom-before-style();
150237
}
151238
}
152239
}

0 commit comments

Comments
 (0)