Skip to content

Commit fd4b23b

Browse files
oasis-cloudoasis-cloud
committed
feat(navbar): v15 - taro
1 parent 966a829 commit fd4b23b

File tree

5 files changed

+117
-289
lines changed

5 files changed

+117
-289
lines changed

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

Lines changed: 40 additions & 82 deletions
Original file line numberDiff line numberDiff line change
@@ -1,121 +1,79 @@
11
import React from 'react'
2-
import { NavBar } from '@nutui/nutui-react-taro'
3-
import { Share, More, Cart, ArrowLeft, Close } from '@nutui/icons-react-taro'
42
import Taro from '@tarojs/taro'
5-
import { View, Text } from '@tarojs/components'
6-
import pxTransform from '@/utils/px-transform'
3+
import { View } from '@tarojs/components'
4+
import { NavBar } from '@nutui/nutui-react-taro'
5+
import { ArrowLeft, Close, More, Share } from '@nutui/icons-react-taro'
76

87
const Demo1 = () => {
98
const styles = {
109
flexCenter: {
1110
display: 'flex',
12-
alignItems: 'center',
11+
aliginItems: 'center',
1312
},
1413
title: {
15-
fontSize: pxTransform(18),
14+
fontSize: '18px',
1615
fontWeight: 'bold',
17-
lineHeight: pxTransform(26),
16+
lineHeight: '26px',
1817
},
1918
description: {
20-
fontSize: pxTransform(12),
19+
fontSize: '12px',
2120
fontWeight: 400,
2221
color: 'rgba(0,0,0, 0.5)',
23-
lineHeight: pxTransform(16),
24-
textAlign: 'center',
22+
lineHeight: '16px',
2523
},
2624
}
2725
return (
2826
<>
2927
<NavBar
28+
title="页面标题"
3029
back={
3130
<>
32-
<ArrowLeft size={20} />
33-
<Text>返回</Text>
31+
<ArrowLeft />
32+
返回
3433
</>
3534
}
36-
right={
37-
<View
38-
style={styles.flexCenter}
39-
onClick={(e) => Taro.showToast({ title: 'icon' })}
40-
>
41-
<Share size={20} />
42-
</View>
43-
}
35+
right={<Share onClick={(e) => Taro.showToast({ title: 'icon' })} />}
4436
onBackClick={(e) => Taro.showToast({ title: '返回' })}
45-
>
46-
<Text style={styles.title}>订单详情</Text>
47-
</NavBar>
37+
/>
4838
<NavBar
49-
right={
50-
<View
51-
style={styles.flexCenter}
52-
onClick={(e) => Taro.showToast({ title: 'icon' })}
53-
>
54-
<Share size={20} />
55-
</View>
56-
}
39+
title="页面标题"
40+
right={<Share onClick={(e) => Taro.showToast({ title: 'icon' })} />}
5741
onBackClick={(e) => Taro.showToast({ title: '返回' })}
58-
>
59-
<Text style={styles.title}>订单详情</Text>
60-
</NavBar>
42+
/>
6143
<NavBar
44+
title={
45+
<View style={{ ...styles.flexCenter, flexDirection: 'column' }}>
46+
<View
47+
style={styles.title}
48+
onClick={(e) => Taro.showToast({ title: '标题' })}
49+
>
50+
页面标题
51+
</View>
52+
<View style={styles.description}>副标题</View>
53+
</View>
54+
}
6255
right={
63-
<Text onClick={(e) => Taro.showToast({ title: '清空' })}>清空</Text>
56+
<View onClick={(e) => Taro.showToast({ title: '清空' })}>清空</View>
6457
}
65-
left={<Close size={20} />}
66-
back={<ArrowLeft size={20} />}
58+
left={<Close />}
59+
back={<ArrowLeft />}
6760
onBackClick={(e) => Taro.showToast({ title: '返回' })}
68-
>
69-
<View
70-
style={{
71-
...styles.flexCenter,
72-
flexDirection: 'column',
73-
}}
74-
>
75-
<Text
76-
style={styles.title}
77-
onClick={(e) => Taro.showToast({ title: '标题' })}
78-
>
79-
浏览记录
80-
</Text>
81-
<Text style={styles.description}>浏览记录</Text>
82-
</View>
83-
</NavBar>
61+
/>
8462
<NavBar
85-
back={<ArrowLeft size={20} />}
63+
back={<ArrowLeft />}
64+
title={
65+
<View onClick={(e) => Taro.showToast({ title: '页面标题' })}>
66+
页面标题
67+
</View>
68+
}
8669
right={
8770
<>
88-
<Text
89-
style={{ marginRight: pxTransform(5) }}
90-
onClick={(e) => Taro.showToast({ title: '编辑' })}
91-
>
92-
编辑
93-
</Text>
94-
<More
95-
size={20}
96-
onClick={(e) => Taro.showToast({ title: 'icon' })}
97-
/>
71+
<View onClick={(e) => Taro.showToast({ title: '编辑' })}>编辑</View>
72+
<More onClick={(e) => Taro.showToast({ title: 'icon' })} />
9873
</>
9974
}
10075
onBackClick={(e) => Taro.showToast({ title: '返回' })}
101-
>
102-
<Text
103-
style={styles.title}
104-
onClick={(e) => Taro.showToast({ title: '标题' })}
105-
>
106-
购物车
107-
</Text>
108-
<View
109-
style={{
110-
...styles.flexCenter,
111-
marginLeft: pxTransform(5),
112-
marginRight: pxTransform(5),
113-
}}
114-
onClick={(e) => Taro.showToast({ title: 'icon' })}
115-
>
116-
<Cart size={20} />
117-
</View>
118-
</NavBar>
76+
/>
11977
</>
12078
)
12179
}

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

Lines changed: 26 additions & 70 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,8 @@
11
import React from 'react'
2-
import { NavBar } from '@nutui/nutui-react-taro'
3-
import { Share, More, Cart, ArrowLeft, Close } from '@nutui/icons-react-taro'
42
import Taro from '@tarojs/taro'
5-
import { View, Text } from '@tarojs/components'
6-
import pxTransform from '@/utils/px-transform'
3+
import { View } from '@tarojs/components'
4+
import { NavBar } from '@nutui/nutui-react-taro'
5+
import { ArrowLeft, Close, More, Share } from '@nutui/icons-react-taro'
76

87
const Demo2 = () => {
98
const styles = {
@@ -12,110 +11,67 @@ const Demo2 = () => {
1211
aliginItems: 'center',
1312
},
1413
title: {
15-
fontSize: pxTransform(18),
14+
fontSize: '18px',
1615
fontWeight: 'bold',
17-
lineHeight: pxTransform(26),
16+
lineHeight: '26px',
1817
},
1918
description: {
20-
fontSize: pxTransform(12),
19+
fontSize: '12px',
2120
fontWeight: 400,
2221
color: 'rgba(0,0,0, 0.5)',
23-
lineHeight: pxTransform(16),
22+
lineHeight: '16px',
2423
},
2524
}
2625
return (
2726
<>
2827
<NavBar
29-
titleAlign="left"
3028
back={
3129
<>
32-
<ArrowLeft size={20} />
33-
<Text>返回</Text>
30+
<ArrowLeft />
31+
返回
3432
</>
3533
}
36-
right={
37-
<View
38-
style={styles.flexCenter}
39-
onClick={(e) => Taro.showToast({ title: 'icon' })}
40-
>
41-
<Share size={20} />
42-
</View>
43-
}
34+
right={<Share onClick={(e) => Taro.showToast({ title: 'icon' })} />}
4435
onBackClick={(e) => Taro.showToast({ title: '返回' })}
4536
>
46-
<Text style={styles.title}>订单详情</Text>
37+
页面标题
4738
</NavBar>
4839
<NavBar
49-
titleAlign="left"
50-
right={
51-
<View
52-
style={styles.flexCenter}
53-
onClick={(e) => Taro.showToast({ title: 'icon' })}
54-
>
55-
<Share size={20} />
56-
</View>
57-
}
40+
right={<Share onClick={(e) => Taro.showToast({ title: 'icon' })} />}
5841
onBackClick={(e) => Taro.showToast({ title: '返回' })}
5942
>
60-
<Text style={styles.title}>订单详情</Text>
43+
页面标题
6144
</NavBar>
6245
<NavBar
63-
titleAlign="left"
6446
right={
65-
<Text onClick={(e) => Taro.showToast({ title: '清空' })}>清空</Text>
47+
<View onClick={(e) => Taro.showToast({ title: '清空' })}>清空</View>
6648
}
67-
left={<Close size={20} />}
68-
back={<ArrowLeft size={20} />}
49+
left={<Close />}
50+
back={<ArrowLeft />}
6951
onBackClick={(e) => Taro.showToast({ title: '返回' })}
7052
>
71-
<View
72-
style={{
73-
display: 'flex',
74-
flexDirection: 'column',
75-
}}
76-
>
77-
<Text
53+
<View style={{ ...styles.flexCenter, flexDirection: 'column' }}>
54+
<View
7855
style={styles.title}
7956
onClick={(e) => Taro.showToast({ title: '标题' })}
8057
>
81-
浏览记录
82-
</Text>
83-
<Text style={styles.description}>浏览记录</Text>
58+
页面标题
59+
</View>
60+
<View style={styles.description}>副标题</View>
8461
</View>
8562
</NavBar>
8663
<NavBar
87-
back={<ArrowLeft size={20} />}
64+
back={<ArrowLeft />}
8865
right={
8966
<>
90-
<Text
91-
style={{ marginRight: pxTransform(5) }}
92-
onClick={(e) => Taro.showToast({ title: '编辑' })}
93-
>
94-
编辑
95-
</Text>
96-
<More
97-
size={20}
98-
onClick={(e) => Taro.showToast({ title: 'icon' })}
99-
/>
67+
<View onClick={(e) => Taro.showToast({ title: '编辑' })}>编辑</View>
68+
<More onClick={(e) => Taro.showToast({ title: 'icon' })} />
10069
</>
10170
}
10271
onBackClick={(e) => Taro.showToast({ title: '返回' })}
10372
>
104-
<Text
105-
style={styles.title}
106-
onClick={(e) => Taro.showToast({ title: '标题' })}
107-
>
108-
购物车
109-
</Text>
110-
<View
111-
style={{
112-
...styles.flexCenter,
113-
marginLeft: pxTransform(5),
114-
marginRight: pxTransform(5),
115-
}}
116-
onClick={(e) => Taro.showToast({ title: 'icon' })}
117-
>
118-
<Cart size={20} />
73+
<View onClick={(e) => Taro.showToast({ title: '页面标题' })}>
74+
页面标题
11975
</View>
12076
</NavBar>
12177
</>

0 commit comments

Comments
 (0)