Skip to content

Commit fd247f0

Browse files
xiaoyatongxiaoyatong
authored
fix(navbar): 支持background的配置,补充了部分demo (#3258)
1 parent 3b03fa0 commit fd247f0

File tree

12 files changed

+159
-153
lines changed

12 files changed

+159
-153
lines changed

‎src/packages/navbar/demos/h5/demo1.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import React from 'react'
2-
import { NavBar, Toast } from '@nutui/nutui-react'
2+
import { NavBar, Toast, Space } from '@nutui/nutui-react'
33
import { ArrowLeft, Close, More, Share } from '@nutui/icons-react'
44

55
const Demo1 = () => {
@@ -21,7 +21,7 @@ const Demo1 = () => {
2121
},
2222
}
2323
return (
24-
<>
24+
<Space direction="vertical">
2525
<NavBar
2626
title="页面标题"
2727
back={
@@ -63,7 +63,7 @@ const Demo1 = () => {
6363
}
6464
onBackClick={(e) => Toast.show('返回')}
6565
/>
66-
</>
66+
</Space>
6767
)
6868
}
6969
export default Demo1

‎src/packages/navbar/demos/h5/demo2.tsx‎

Lines changed: 48 additions & 56 deletions
Original file line numberDiff line numberDiff line change
@@ -23,63 +23,55 @@ const Demo2 = () => {
2323
return (
2424
<>
2525
<Space direction="vertical">
26-
<div style={{ background: '#fff' }}>
27-
<NavBar
28-
back={
29-
<>
30-
<ArrowLeft />
31-
返回
32-
</>
33-
}
34-
right={<Share onClick={(e) => Toast.show('icon')} />}
35-
onBackClick={(e) => Toast.show('返回')}
26+
<NavBar
27+
back={
28+
<>
29+
<ArrowLeft />
30+
返回
31+
</>
32+
}
33+
right={<Share onClick={(e) => Toast.show('icon')} />}
34+
onBackClick={(e) => Toast.show('返回')}
35+
>
36+
页面标题
37+
</NavBar>
38+
<NavBar
39+
right={<Share onClick={(e) => Toast.show('icon')} />}
40+
onBackClick={(e) => Toast.show('返回')}
41+
>
42+
页面标题
43+
</NavBar>
44+
<NavBar
45+
right={<span onClick={(e) => Toast.show('清空')}>清空</span>}
46+
left={<Close />}
47+
back={<ArrowLeft />}
48+
onBackClick={(e) => Toast.show('返回')}
49+
>
50+
<div
51+
style={{
52+
...styles.flexCenter,
53+
alignItems: 'flex-start',
54+
flexDirection: 'column',
55+
}}
3656
>
37-
页面标题
38-
</NavBar>
39-
</div>
40-
<div style={{ background: '#fff' }}>
41-
<NavBar
42-
right={<Share onClick={(e) => Toast.show('icon')} />}
43-
onBackClick={(e) => Toast.show('返回')}
44-
>
45-
页面标题
46-
</NavBar>
47-
</div>
48-
<div style={{ background: '#fff' }}>
49-
<NavBar
50-
right={<span onClick={(e) => Toast.show('清空')}>清空</span>}
51-
left={<Close />}
52-
back={<ArrowLeft />}
53-
onBackClick={(e) => Toast.show('返回')}
54-
>
55-
<div
56-
style={{
57-
...styles.flexCenter,
58-
alignItems: 'flex-start',
59-
flexDirection: 'column',
60-
}}
61-
>
62-
<span style={styles.title} onClick={(e) => Toast.show('标题')}>
63-
页面标题
64-
</span>
65-
<span style={styles.description}>副标题</span>
66-
</div>
67-
</NavBar>
68-
</div>
69-
<div style={{ background: '#fff' }}>
70-
<NavBar
71-
back={<ArrowLeft />}
72-
right={
73-
<>
74-
<span onClick={(e) => Toast.show('编辑')}>编辑</span>
75-
<More onClick={(e) => Toast.show('icon')} />
76-
</>
77-
}
78-
onBackClick={(e) => Toast.show('返回')}
79-
>
80-
<span onClick={(e) => Toast.show('页面标题')}>页面标题</span>
81-
</NavBar>
82-
</div>
57+
<span style={styles.title} onClick={(e) => Toast.show('标题')}>
58+
页面标题
59+
</span>
60+
<span style={styles.description}>副标题</span>
61+
</div>
62+
</NavBar>
63+
<NavBar
64+
back={<ArrowLeft />}
65+
right={
66+
<>
67+
<span onClick={(e) => Toast.show('编辑')}>编辑</span>
68+
<More onClick={(e) => Toast.show('icon')} />
69+
</>
70+
}
71+
onBackClick={(e) => Toast.show('返回')}
72+
>
73+
<span onClick={(e) => Toast.show('页面标题')}>页面标题</span>
74+
</NavBar>
8375
</Space>
8476
</>
8577
)

‎src/packages/navbar/demos/h5/demo3.tsx‎

Lines changed: 15 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,14 @@
11
import React, { useState } from 'react'
2-
import { NavBar, TabPane, Tabs, Toast } from '@nutui/nutui-react'
2+
import { NavBar, TabPane, Tabs, Toast, Space } from '@nutui/nutui-react'
33
import { ArrowLeft, More } from '@nutui/icons-react'
44

55
const Demo3 = () => {
66
const [tab1value, setTab1value] = useState<string | number>('0')
77
const [tab2value, setTab2value] = useState<string | number>('0')
88
return (
9-
<>
9+
<Space direction="vertical">
1010
<NavBar
11+
style={{ '--nutui-navbar-background': 'transparent' }}
1112
back={<ArrowLeft />}
1213
right={
1314
<>
@@ -25,7 +26,7 @@ const Demo3 = () => {
2526
}}
2627
style={{
2728
'--nutui-tabs-titles-gap': 0,
28-
background: 'transparent',
29+
'--nutui-tabs-titles-background-color': 'transparent',
2930
}}
3031
>
3132
<TabPane title="Tab 1"> Tab 1 </TabPane>
@@ -35,6 +36,10 @@ const Demo3 = () => {
3536
</div>
3637
</NavBar>
3738
<NavBar
39+
style={{
40+
'--nutui-navbar-background': '#ff0f23',
41+
'--nutui-navbar-color': '#fff',
42+
}}
3843
back={<ArrowLeft />}
3944
right={
4045
<>
@@ -46,7 +51,12 @@ const Demo3 = () => {
4651
>
4752
<div>
4853
<Tabs
49-
className="navbar-tabs"
54+
style={{
55+
'--nutui-tabs-titles-gap': 0,
56+
'--nutui-tabs-titles-background-color': 'transparent',
57+
'--nutui-tabs-titles-item-color': '#fff',
58+
'--nutui-color-title': 'white',
59+
}}
5060
align="left"
5161
activeType="simple"
5262
value={tab2value}
@@ -59,7 +69,7 @@ const Demo3 = () => {
5969
</Tabs>
6070
</div>
6171
</NavBar>
62-
</>
72+
</Space>
6373
)
6474
}
6575
export default Demo3

‎src/packages/navbar/demos/taro/demo1.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import React from 'react'
22
import Taro from '@tarojs/taro'
33
import { View } from '@tarojs/components'
4-
import { NavBar, pxTransform, harmony } from '@nutui/nutui-react-taro'
4+
import { NavBar, pxTransform, harmony, Space } from '@nutui/nutui-react-taro'
55
import { ArrowLeft, Close, More, Share } from '@nutui/icons-react-taro'
66

77
const Demo1 = () => {
@@ -25,7 +25,7 @@ const Demo1 = () => {
2525
},
2626
}
2727
return (
28-
<>
28+
<Space direction="vertical">
2929
<NavBar
3030
title="页面标题"
3131
back={
@@ -84,7 +84,7 @@ const Demo1 = () => {
8484
}
8585
onBackClick={(e) => Taro.showToast({ title: '返回' })}
8686
/>
87-
</>
87+
</Space>
8888
)
8989
}
9090
export default Demo1

‎src/packages/navbar/demos/taro/demo2.tsx‎

Lines changed: 68 additions & 77 deletions
Original file line numberDiff line numberDiff line change
@@ -27,92 +27,83 @@ const Demo2 = () => {
2727
return (
2828
<>
2929
<Space direction="vertical">
30-
<View style={{ background: '#fff' }}>
31-
<NavBar
32-
back={
33-
<>
34-
<ArrowLeft style={harmony() ? { marginRight: 16 } : {}} />
35-
返回
36-
</>
37-
}
38-
right={<Share onClick={(e) => Taro.showToast({ title: 'icon' })} />}
39-
onBackClick={(e) => Taro.showToast({ title: '返回' })}
30+
<NavBar
31+
back={
32+
<>
33+
<ArrowLeft style={harmony() ? { marginRight: 16 } : {}} />
34+
返回
35+
</>
36+
}
37+
right={<Share onClick={(e) => Taro.showToast({ title: 'icon' })} />}
38+
onBackClick={(e) => Taro.showToast({ title: '返回' })}
39+
>
40+
<View
41+
style={styles.title}
42+
onClick={(e) => Taro.showToast({ title: '页面标题' })}
4043
>
41-
<View
42-
style={styles.title}
43-
onClick={(e) => Taro.showToast({ title: '页面标题' })}
44-
>
45-
页面标题
46-
</View>
47-
</NavBar>
48-
</View>
49-
<View style={{ background: '#fff' }}>
50-
<NavBar
51-
right={<Share onClick={(e) => Taro.showToast({ title: 'icon' })} />}
52-
onBackClick={(e) => Taro.showToast({ title: '返回' })}
44+
页面标题
45+
</View>
46+
</NavBar>
47+
48+
<NavBar
49+
right={<Share onClick={(e) => Taro.showToast({ title: 'icon' })} />}
50+
onBackClick={(e) => Taro.showToast({ title: '返回' })}
51+
>
52+
<View
53+
style={styles.title}
54+
onClick={(e) => Taro.showToast({ title: '页面标题' })}
5355
>
56+
页面标题
57+
</View>
58+
</NavBar>
59+
<NavBar
60+
right={
61+
<View onClick={(e) => Taro.showToast({ title: '清空' })}>清空</View>
62+
}
63+
left={<Close style={harmony() ? { marginLeft: 16 } : {}} />}
64+
back={<ArrowLeft />}
65+
onBackClick={(e) => Taro.showToast({ title: '返回' })}
66+
>
67+
<View>
5468
<View
55-
style={styles.title}
56-
onClick={(e) => Taro.showToast({ title: '页面标题' })}
69+
style={{
70+
...styles.flexCenter,
71+
alignItems: 'flex-start',
72+
flexDirection: 'column',
73+
}}
5774
>
58-
页面标题
59-
</View>
60-
</NavBar>
61-
</View>
62-
<View style={{ background: '#fff' }}>
63-
<NavBar
64-
right={
65-
<View onClick={(e) => Taro.showToast({ title: '清空' })}>
66-
清空
67-
</View>
68-
}
69-
left={<Close style={harmony() ? { marginLeft: 16 } : {}} />}
70-
back={<ArrowLeft />}
71-
onBackClick={(e) => Taro.showToast({ title: '返回' })}
72-
>
73-
<View>
7475
<View
75-
style={{
76-
...styles.flexCenter,
77-
alignItems: 'flex-start',
78-
flexDirection: 'column',
79-
}}
76+
style={styles.title}
77+
onClick={(e) => Taro.showToast({ title: '标题' })}
8078
>
81-
<View
82-
style={styles.title}
83-
onClick={(e) => Taro.showToast({ title: '标题' })}
84-
>
85-
页面标题
86-
</View>
87-
<View style={styles.description}>副标题</View>
79+
页面标题
8880
</View>
81+
<View style={styles.description}>副标题</View>
8982
</View>
90-
</NavBar>
91-
</View>
92-
<View style={{ background: '#fff' }}>
93-
<NavBar
94-
back={<ArrowLeft />}
95-
right={
96-
<>
97-
<View
98-
style={harmony() ? { marginRight: 16 } : {}}
99-
onClick={(e) => Taro.showToast({ title: '编辑' })}
100-
>
101-
编辑
102-
</View>
103-
<More onClick={(e) => Taro.showToast({ title: 'icon' })} />
104-
</>
105-
}
106-
onBackClick={(e) => Taro.showToast({ title: '返回' })}
83+
</View>
84+
</NavBar>
85+
<NavBar
86+
back={<ArrowLeft />}
87+
right={
88+
<>
89+
<View
90+
style={harmony() ? { marginRight: 16 } : {}}
91+
onClick={(e) => Taro.showToast({ title: '编辑' })}
92+
>
93+
编辑
94+
</View>
95+
<More onClick={(e) => Taro.showToast({ title: 'icon' })} />
96+
</>
97+
}
98+
onBackClick={(e) => Taro.showToast({ title: '返回' })}
99+
>
100+
<View
101+
style={styles.title}
102+
onClick={(e) => Taro.showToast({ title: '页面标题' })}
107103
>
108-
<View
109-
style={styles.title}
110-
onClick={(e) => Taro.showToast({ title: '页面标题' })}
111-
>
112-
页面标题
113-
</View>
114-
</NavBar>
115-
</View>
104+
页面标题
105+
</View>
106+
</NavBar>
116107
</Space>
117108
</>
118109
)

0 commit comments

Comments
 (0)