Skip to content

Commit 4d3cdec

Browse files
oasis-cloudoasis-cloud
committed
fix: review
1 parent b69fde5 commit 4d3cdec

File tree

6 files changed

+130
-115
lines changed

6 files changed

+130
-115
lines changed

‎migrate-from-v2.md‎

Lines changed: 3 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -273,16 +273,9 @@ plugins: [
273273

274274
#### NavBar
275275

276-
- `desc` 重命名为 `right`，类型修改为 `React.Node`
277-
- 新增 `left`，左侧内容，渲染在返回区域的右侧
278-
- 新增 `back`，返回区域内容
279-
- `onClickBack` 重命名为 `onBackClick`
280-
- 移除 `title`，通过 `children` 实现
281-
- 移除 `leftText` `leftShow`，通过 `back`、`left`实现
282-
- `safeAreaInsetTop` 重命名为 `safeArea`
283-
- `border` 废弃
284-
- 移除 `onClickTitle` `onClickRight` `onClickIcon`，通过在`left`、`title`、`right`自定义事件实现，参考文档demo示例
285-
-
276+
- 移除 titleAlign 属性，可通过 title 和 children 替代
277+
- 增加 title 属性，默认居中展示
278+
- 组件中出现 children ，则采取 titleAlign 的 left 方式布局
286279

287280
#### Pagination
288281

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

Lines changed: 52 additions & 42 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 Demo2 = () => {
@@ -22,49 +22,59 @@ const Demo2 = () => {
2222
}
2323
return (
2424
<>
25-
<NavBar
26-
back={
27-
<>
28-
<ArrowLeft />
29-
返回
30-
</>
31-
}
32-
right={<Share onClick={(e) => Toast.show('icon')} />}
33-
onBackClick={(e) => Toast.show('返回')}
34-
>
35-
页面标题
36-
</NavBar>
37-
<NavBar
38-
right={<Share onClick={(e) => Toast.show('icon')} />}
39-
onBackClick={(e) => Toast.show('返回')}
40-
>
41-
页面标题
42-
</NavBar>
43-
<NavBar
44-
right={<span onClick={(e) => Toast.show('清空')}>清空</span>}
45-
left={<Close />}
46-
back={<ArrowLeft />}
47-
onBackClick={(e) => Toast.show('返回')}
48-
>
49-
<div style={{ ...styles.flexCenter, flexDirection: 'column' }}>
50-
<span style={styles.title} onClick={(e) => Toast.show('标题')}>
25+
<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('返回')}
36+
>
5137
页面标题
52-
</span>
53-
<span style={styles.description}>副标题</span>
38+
</NavBar>
5439
</div>
55-
</NavBar>
56-
<NavBar
57-
back={<ArrowLeft />}
58-
right={
59-
<>
60-
<span onClick={(e) => Toast.show('编辑')}>编辑</span>
61-
<More onClick={(e) => Toast.show('icon')} />
62-
</>
63-
}
64-
onBackClick={(e) => Toast.show('返回')}
65-
>
66-
<span onClick={(e) => Toast.show('页面标题')}>页面标题</span>
67-
</NavBar>
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 style={{ ...styles.flexCenter, flexDirection: 'column' }}>
56+
<span style={styles.title} onClick={(e) => Toast.show('标题')}>
57+
页面标题
58+
</span>
59+
<span style={styles.description}>副标题</span>
60+
</div>
61+
</NavBar>
62+
</div>
63+
<div style={{ background: '#fff' }}>
64+
<NavBar
65+
back={<ArrowLeft />}
66+
right={
67+
<>
68+
<span onClick={(e) => Toast.show('编辑')}>编辑</span>
69+
<More onClick={(e) => Toast.show('icon')} />
70+
</>
71+
}
72+
onBackClick={(e) => Toast.show('返回')}
73+
>
74+
<span onClick={(e) => Toast.show('页面标题')}>页面标题</span>
75+
</NavBar>
76+
</div>
77+
</Space>
6878
</>
6979
)
7080
}

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

Lines changed: 72 additions & 60 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 } from '@nutui/nutui-react-taro'
4+
import { NavBar, Space } from '@nutui/nutui-react-taro'
55
import { ArrowLeft, Close, More, Share } from '@nutui/icons-react-taro'
66
import { harmony } from '@/utils/platform-taro'
77
import pxTransform from '@/utils/px-transform'
@@ -26,76 +26,88 @@ const Demo2 = () => {
2626
}
2727
return (
2828
<>
29-
<NavBar
30-
back={
31-
<>
32-
<ArrowLeft style={harmony() ? { marginRight: 16 } : {}} />
33-
返回
34-
</>
35-
}
36-
right={<Share onClick={(e) => Taro.showToast({ title: 'icon' })} />}
37-
onBackClick={(e) => Taro.showToast({ title: '返回' })}
38-
>
39-
<View
40-
style={styles.title}
41-
onClick={(e) => Taro.showToast({ title: '页面标题' })}
42-
>
43-
页面标题
44-
</View>
45-
</NavBar>
46-
<NavBar
47-
right={<Share onClick={(e) => Taro.showToast({ title: 'icon' })} />}
48-
onBackClick={(e) => Taro.showToast({ title: '返回' })}
49-
>
50-
<View
51-
style={styles.title}
52-
onClick={(e) => Taro.showToast({ title: '页面标题' })}
53-
>
54-
页面标题
29+
<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: '返回' })}
40+
>
41+
<View
42+
style={styles.title}
43+
onClick={(e) => Taro.showToast({ title: '页面标题' })}
44+
>
45+
页面标题
46+
</View>
47+
</NavBar>
5548
</View>
56-
</NavBar>
57-
<NavBar
58-
right={
59-
<View onClick={(e) => Taro.showToast({ title: '清空' })}>清空</View>
60-
}
61-
left={<Close style={harmony() ? { marginLeft: 16 } : {}} />}
62-
back={<ArrowLeft />}
63-
onBackClick={(e) => Taro.showToast({ title: '返回' })}
64-
>
65-
<View>
66-
<View style={{ ...styles.flexCenter, flexDirection: 'column' }}>
49+
<View style={{ background: '#fff' }}>
50+
<NavBar
51+
right={<Share onClick={(e) => Taro.showToast({ title: 'icon' })} />}
52+
onBackClick={(e) => Taro.showToast({ title: '返回' })}
53+
>
6754
<View
6855
style={styles.title}
69-
onClick={(e) => Taro.showToast({ title: '标题' })}
56+
onClick={(e) => Taro.showToast({ title: '页面标题' })}
7057
>
7158
页面标题
7259
</View>
73-
<View style={styles.description}>副标题</View>
74-
</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>
74+
<View style={{ ...styles.flexCenter, flexDirection: 'column' }}>
75+
<View
76+
style={styles.title}
77+
onClick={(e) => Taro.showToast({ title: '标题' })}
78+
>
79+
页面标题
80+
</View>
81+
<View style={styles.description}>副标题</View>
82+
</View>
83+
</View>
84+
</NavBar>
7585
</View>
76-
</NavBar>
77-
<NavBar
78-
back={<ArrowLeft />}
79-
right={
80-
<>
86+
<View style={{ background: '#fff' }}>
87+
<NavBar
88+
back={<ArrowLeft />}
89+
right={
90+
<>
91+
<View
92+
style={harmony() ? { marginRight: 16 } : {}}
93+
onClick={(e) => Taro.showToast({ title: '编辑' })}
94+
>
95+
编辑
96+
</View>
97+
<More onClick={(e) => Taro.showToast({ title: 'icon' })} />
98+
</>
99+
}
100+
onBackClick={(e) => Taro.showToast({ title: '返回' })}
101+
>
81102
<View
82-
style={harmony() ? { marginRight: 16 } : {}}
83-
onClick={(e) => Taro.showToast({ title: '编辑' })}
103+
style={styles.title}
104+
onClick={(e) => Taro.showToast({ title: '页面标题' })}
84105
>
85-
编辑
106+
页面标题
86107
</View>
87-
<More onClick={(e) => Taro.showToast({ title: 'icon' })} />
88-
</>
89-
}
90-
onBackClick={(e) => Taro.showToast({ title: '返回' })}
91-
>
92-
<View
93-
style={styles.title}
94-
onClick={(e) => Taro.showToast({ title: '页面标题' })}
95-
>
96-
页面标题
108+
</NavBar>
97109
</View>
98-
</NavBar>
110+
</Space>
99111
</>
100112
)
101113
}

‎src/packages/navbar/doc.en-US.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -43,7 +43,7 @@ import { NavBar } from '@nutui/nutui-react'
4343
| right | Right side content | `ReactNode` | `-` |
4444
| left | The left content, rendered to the right of the return area | `ReactNode` | `-` |
4545
| back | Returns the text of the area | `ReactNode` | `-` |
46-
| titleAlign | Title align, optional value center、left | `string` | `center` |
46+
| title | Title | `ReactNode` | `-` |
4747
| fixed | Is it fixed | `boolean` | `false` |
4848
| safeAreaInsetTop | Whether it is suitable for the safe area | `boolean` | `false` |
4949
| placeholder | When fixed to the top, whether to generate a placeholder element of equal height at the label position | `boolean` | `false` |

‎src/packages/navbar/doc.taro.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -43,7 +43,7 @@ import { NavBar } from '@nutui/nutui-react-taro'
4343
| right | 右侧内容 | `ReactNode` | `-` |
4444
| left | 左侧内容，渲染在返回区域的右侧 | `ReactNode` | `-` |
4545
| back | 返回区域的文字 | `ReactNode` | `-` |
46-
| titleAlign | 标题位置,可选值center left | `string` | `center` |
46+
| title | 标题 | `ReactNode` | `-` |
4747
| fixed | 是否固定 | `boolean` | `false` |
4848
| safeAreaInsetTop | 是否适配安全区 | `boolean` | `false` |
4949
| placeholder | 固定在顶部时，是否在标签位置生成一个等高的占位元素 | `boolean` | `false` |

‎src/packages/navbar/doc.zh-TW.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -43,7 +43,7 @@ import { NavBar } from '@nutui/nutui-react'
4343
| right | 右側內容 | `ReactNode` | `-` |
4444
| left | 左側內容，渲染在返回區域的右側 | `ReactNode` | `-` |
4545
| back | 返回區域的文字 | `ReactNode` | `-` |
46-
| titleAlign | 標題位置,可選值center left | `string` | `center` |
46+
| title | 標題 | `ReactNode` | `-` |
4747
| fixed | 是否固定 | `boolean` | `false` |
4848
| safeAreaInsetTop | 是否適配安全區 | `boolean` | `false` |
4949
| placeholder | 固定在頂部時，是否在標簽位置生成一個等高的佔位元素 | `boolean` | `false` |

0 commit comments

Comments
 (0)