Skip to content

Commit d737618

Browse files
QiuShuiBaiQiuShuiBai
authored
Merge pull request #27 from didi/feat-rn-tip
Feat rn tip
2 parents 2a55e03 + f0f14dc commit d737618

File tree

19 files changed

+634
-210
lines changed

19 files changed

+634
-210
lines changed

‎docs/guide/design-tokens.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -35,7 +35,7 @@
3535
|<span id="color-secondary" class="css-var-name">$color-secondary</span>|<div>#4F5E83</div>|基础-次要颜色|
3636
|<span id="color-disabled" class="css-var-name">$color-disabled</span>|<div>#ccc</div>|基础-禁用色|
3737
|<span id="color-dark-grey" class="css-var-name">$color-dark-grey</span>|<div>#333</div>|基础-灰色|
38-
|<span id="color-dark-grey-s" class="css-var-name">$color-dark-grey-s</span>|<div>#000000</div>|-|
38+
|<span id="color-dark-grey-s" class="css-var-name">$color-dark-grey-s</span>|<div>#323233</div>|基础-浅灰|
3939
|<span id="color-light-grey-opacity" class="css-var-name">$color-light-grey-opacity</span>|<div>rgba(0, 0, 0, .04)</div>|基础-透明灰|
4040
|<span id="mask-bgc_opacity" class="css-var-name">$mask-bgc_opacity</span>|<div>rgba(37, 38, 45, 0.4)</div>|遮罩层背景|
4141
|<span id="fill-bgc" class="css-var-name">$fill-bgc</span>|<div>#f2f2f2</div>|基础-填充背景色|

‎example/pages/index.mpx‎

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -24,15 +24,15 @@
2424
<cube-icon class="icon" type="arrow"></cube-icon>
2525
</view>
2626
</view>
27-
<cube-picker-modal
28-
title="选择主题样式"
29-
cancel-txt="取消"
30-
confirm-txt="确认"
31-
selected-index="{{ themeIndex }}"
32-
list="{{ themeList }}"
33-
wx:ref="pickerPopup"
34-
bindvalueChange="onThemeChange"></cube-picker-modal>
3527
</scroll-view>
28+
<cube-picker-modal
29+
title="选择主题样式"
30+
cancel-txt="取消"
31+
confirm-txt="确认"
32+
selected-index="{{ themeIndex }}"
33+
list="{{ themeList }}"
34+
wx:ref="pickerPopup"
35+
bindvalueChange="onThemeChange"></cube-picker-modal>
3636
</theme-container>
3737
</template>
3838

‎example/pages/tip/README.md‎

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,36 @@
66

77
用于弹出提示气泡框，可以通过配置控制弹出位置。
88

9+
<mark>已适配RN</mark>
10+
11+
### 注意
12+
13+
rn时，需要给组件添加 style="position: static"或者使用虚拟节点 autoVirtualHostRules。
14+
15+
```vue
16+
<!-- 添加style -->
17+
<template>
18+
<cube-tip style="position: static"></cube-tip>
19+
</template>
20+
```
21+
22+
```js
23+
// mpx.config.js
24+
module.exports = defineConfig({
25+
// ...
26+
pluginOptions: {
27+
mpx: {
28+
plugin: {
29+
// ...
30+
autoVirtualHostRules: {
31+
include: [resolve('node_modules/@mpxjs/mpx-cube-ui/lib/components/tip/index.mpx')]
32+
}
33+
},
34+
}
35+
}
36+
})
37+
```
38+
939
</card>
1040

1141
## 示例

‎example/pages/tip/tip.mpx‎

Lines changed: 15 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
<template>
22
<view class="tips-demo">
33
<cube-icon
4-
class="cube-tip-icon"
4+
class="cube-tip-demo-icon"
55
type="question"
66
bind:click="onIconClick"
77
/>
@@ -11,9 +11,14 @@
1111
direction="{{ direction }}"
1212
custom-style="{{ customStyle }}"
1313
bind:close="onTipClose"
14+
showClose="{{ showClose }}"
1415
>
1516
<view>this is tips</view>
1617
</cube-tip>
18+
<view class="tip-demo-close">
19+
<view>是否显示关闭按钮：{{showClose}}</view>
20+
<cube-switch wx:model="{{showClose}}"></cube-switch>
21+
</view>
1722
</view>
1823
</template>
1924

@@ -24,7 +29,8 @@ createComponent({
2429
data: {
2530
index: 0,
2631
direction: 'top',
27-
customStyle: {}
32+
customStyle: {},
33+
showClose: false
2834
},
2935
methods: {
3036
onIconClick() {
@@ -75,14 +81,19 @@ createComponent({
7581
margin 70px auto
7682
text-align center
7783
line-height 1
78-
.cube-tip-icon
79-
font-size 30px
84+
.cube-tip-demo-icon
85+
font-size 30px
86+
.tip-demo-close
87+
margin-top: 20px
88+
line-height 30px
89+
text-align: left
8090
</style>
8191

8292
<script type="application/json">
8393
{
8494
"usingComponents": {
8595
"cube-tip": "@mpxjs/mpx-cube-ui/src/components/tip/index",
96+
"cube-switch": "@mpxjs/mpx-cube-ui/src/components/switch/index",
8697
"cube-icon": "@mpxjs/mpx-cube-ui/src/components/icon/index"
8798
}
8899
}

‎packages/mpx-cube-ui/lib/common/stylus/theme/components/tip.styl‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,11 @@ $tip-bgc := $tip-dark-opacity-bgc // 背景颜色
66
$tip-z-index := 10 // 叠层上下文层级
77

88
$tip-padding := 14px 38px 14px 14px // 内边距
9+
$tip-padding-top := 14px
10+
$tip-padding-right := 38px
11+
$tip-padding-bottom := 14px
12+
$tip-padding-left := 14px
13+
$tip-padding-right-without-close := 14px
914
$tip-max-height := 60px // 最大高度
1015
$tip-border-radius := 7px // 圆角
1116

‎packages/mpx-cube-ui/lib/components/switch/index.mpx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,13 +2,13 @@
22
<view
33
wx:class="{{ switchClass }}"
44
bindtap="toggleSwitch"
5-
animation="{{ switchAnimationData }}"
5+
animation@_ios|_android="{{ switchAnimationData }}"
66
wx:style="{{ swithBGClass }}"
77
>
88
<view
99
class="cube-switch-handle"
1010
wx:class="{{ {'cube-switch-handle-on': isOn }}}"
11-
animation="{{ switchHandleAnimationData }}"
11+
animation@_ios|_android="{{ switchHandleAnimationData }}"
1212
/>
1313
</view>
1414
</template>

‎packages/mpx-cube-ui/lib/components/tip/css.rn.styl‎

Lines changed: 99 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,99 @@
1+
@require "../../common/stylus/variable.rn.styl"
2+
@require '../../common/stylus/mixin.rn.styl'
3+
@require "../../common/stylus/theme/components/tip.styl"
4+
5+
.cube-tip
6+
position absolute
7+
z-index $var(tip-z-index)
8+
display flex
9+
max-height $var(tip-max-height)
10+
font-size $var(font-size-xs)
11+
color $var(tip-color)
12+
transform scale(0)
13+
opacity 0
14+
border-radius $var(tip-border-radius)
15+
.cube-tip-angle-wapper
16+
position absolute
17+
z-index: 2
18+
.cube-tip-angle
19+
border-top-width: 0
20+
border-right-width: 6px
21+
border-bottom-width: 6px
22+
border-left-width: 6px
23+
24+
border-style $var(tip-angle-border-style)
25+
border-top-color transparent
26+
border-left-color transparent
27+
border-right-color transparent
28+
border-bottom-color $var(tip-angle-border-color)
29+
.cube-tip-angle-wapper_top
30+
top 0
31+
left 50%
32+
transform translateX(-50%)
33+
margin-top $var(tip-vertical-reverse-margin)
34+
.cube-tip-angle_top
35+
transform rotate(0deg)
36+
.cube-tip-angle-wapper_bottom
37+
bottom 0
38+
left 50%
39+
transform translateX(-50%)
40+
margin-bottom $var(tip-vertical-reverse-margin)
41+
.cube-tip-angle_bottom
42+
transform rotate(180deg)
43+
.cube-tip-angle-wapper_left
44+
left 0
45+
top 50%
46+
transform translateY(-50%)
47+
margin-left $var(tip-horizontal-reverse-margin)
48+
.cube-tip-angle_left
49+
transform rotate(-90deg)
50+
.cube-tip-angle-wapper_right
51+
right 0
52+
top 50%
53+
transform translateY(-50%)
54+
margin-right $var(tip-horizontal-reverse-margin)
55+
.cube-tip-angle_right
56+
transform rotate(90deg)
57+
.cube-tip-line-wrapper
58+
position absolute
59+
z-index: 3
60+
right $var(tip-close-right)
61+
top $var(tip-close-top)
62+
width $var(tip-close-width)
63+
height $var(tip-close-height)
64+
transform scale(1.6)
65+
.cube-tip-line
66+
position absolute
67+
top: 50%
68+
left: 50%
69+
width $var(tip-close-width)
70+
height $var(tip-close-height)
71+
transform: translate(-50%, -50%), rotate(45deg), scale(0.625)
72+
background-color: #fff
73+
.cube-tip-line-horizontal
74+
width $var(font-size-lg)
75+
height: 2px
76+
.cube-tip-line-vertical
77+
width: 2px
78+
height $var(font-size-lg)
79+
80+
.cube-tip-popup
81+
position: absolute
82+
z-index: 1
83+
width: 2000vw
84+
height: 2000vh
85+
left: -1000vw
86+
top: -1000vh
87+
opacity: 0
88+
pointer-events: box-only
89+
.cube-tip-content
90+
z-index: 2
91+
padding-all($var(tip-padding-top), $var(tip-padding-right), $var(tip-padding-bottom), $var(tip-padding-left))
92+
background-color $var(tip-bgc)
93+
border-radius $var(tip-border-radius)
94+
min-height $var(tip-content-min-height)
95+
line-height $var(tip-content-line-height)
96+
overflow hidden
97+
98+
.cube-tip-content-without-close
99+
padding-right: $var(tip-padding-right-without-close)

‎packages/mpx-cube-ui/lib/components/tip/css.styl‎

Lines changed: 86 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,86 @@
1+
@require "../../common/stylus/variable.styl"
2+
@require "../../common/stylus/mixin.styl"
3+
@require "../../common/stylus/animation.styl"
4+
@require "../../common/stylus/theme/components/tip.styl"
5+
6+
.cube-tip
7+
position absolute
8+
z-index $var(tip-z-index)
9+
display flex
10+
padding $var(tip-padding)
11+
max-height $var(tip-max-height)
12+
border-radius $var(tip-border-radius)
13+
background $var(tip-bgc)
14+
transition opacity .2s
15+
font-size $var(font-size-xs)
16+
color $var(tip-color)
17+
transform scale(0)
18+
&.cube-tip-direction_top,
19+
&.cube-tip-direction_bottom
20+
.cube-tip-angle-wapper
21+
left 50%
22+
transform translateX(-50%)
23+
&.cube-tip-direction_top
24+
.cube-tip-angle-wapper
25+
top 0
26+
.cube-tip-angle
27+
margin-top $var(tip-vertical-reverse-margin)
28+
transform rotate(0deg)
29+
&.cube-tip-direction_bottom
30+
.cube-tip-angle-wapper
31+
bottom 0
32+
.cube-tip-angle
33+
margin-bottom $var(tip-vertical-reverse-margin)
34+
transform rotate(180deg)
35+
&.cube-tip-direction_left,
36+
&.cube-tip-direction_right
37+
.cube-tip-angle-wapper
38+
top 50%
39+
transform translateY(-50%)
40+
&.cube-tip-direction_left
41+
.cube-tip-angle-wapper
42+
left 0
43+
.cube-tip-angle
44+
margin-left $var(tip-horizontal-reverse-margin)
45+
transform rotate(-90deg)
46+
&.cube-tip-direction_right
47+
.cube-tip-angle-wapper
48+
right 0
49+
.cube-tip-angle
50+
margin-right $var(tip-horizontal-reverse-margin)
51+
transform rotate(90deg)
52+
.cube-tip-angle-wapper
53+
position absolute
54+
.cube-tip-angle
55+
display block
56+
border-width $var(tip-angle-border-width)
57+
border-style $var(tip-angle-border-style)
58+
border-color transparent transparent $var(tip-angle-border-color)
59+
content " "
60+
.cube-tip-without-close
61+
padding-right: $var(tip-padding-right-without-close)
62+
.cube-tip-close
63+
position absolute
64+
right $var(tip-close-right)
65+
top $var(tip-close-top)
66+
width $var(tip-close-width)
67+
height $var(tip-close-height)
68+
padding 0
69+
outline none
70+
border none
71+
background none
72+
transform scale($var(tip-close-scale))
73+
color inherit
74+
.cube-tip-content
75+
min-height $var(tip-content-min-height)
76+
line-height $var(tip-content-line-height)
77+
// flex-fix()
78+
overflow hidden
79+
flex 1
80+
min-width 0
81+
82+
.scale-enter
83+
animation scale-in .4s forwards
84+
85+
.scale-leave
86+
animation scale-out .2s forwards

0 commit comments

Comments
 (0)