Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat(navbar): v15 #2881

Merged
merged 6 commits into from
Dec 26, 2024
Merged

feat(navbar): v15 #2881

Show file tree
Hide file tree
Changes from 3 commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
966a829
feat(navbar): v15
oasis-cloud Dec 23, 2024
fd4b23b
feat(navbar): v15 - taro
oasis-cloud Dec 23, 2024
b32990c
feat(navbar): v15 - taro
oasis-cloud Dec 23, 2024
79b7011
fix: spell error
oasis-cloud Dec 26, 2024
b69fde5
Merge branch 'feat_v3.x' into feat_navbar_15
oasis-cloud Dec 26, 2024
4d3cdec
fix: review
oasis-cloud Dec 26, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions src/config.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -331,6 +331,7 @@
"sort": 1,
"show": true,
"taro": true,
"v15": true,
"author": "dsj"
},
{
Expand Down
2 changes: 1 addition & 1 deletion src/packages/navbar/__test__/__snapshots__/navbar.spec.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,3 @@
// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html

exports[`should render placeholder element when using placeholder prop 1`] = `"<div class="nut-navbar nut-navbar-fixed nut-navbar-align-center" style="z-index: 10;"><div class="nut-navbar-title nut-navbar-title-align-center" style="min-width: 100%; width: 100%;">订单详情</div><div class="nut-navbar-right nut-navbar-right-align-center"></div></div>"`;
exports[`should render placeholder element when using placeholder prop 1`] = `"<div class="nut-navbar nut-navbar-fixed" style="z-index: 10;"><div class="nut-navbar-left nut-navbar-left-hidden"></div><div class="nut-navbar-title">订单详情</div><div class="nut-navbar-right"></div></div>"`;
60 changes: 19 additions & 41 deletions src/packages/navbar/demos/h5/demo1.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import React from 'react'
import { NavBar, Toast } from '@nutui/nutui-react'
import { Share, More, Cart, ArrowLeft, Close } from '@nutui/icons-react'
import { ArrowLeft, Close, More, Share } from '@nutui/icons-react'

const Demo1 = () => {
const styles = {
Expand All @@ -18,73 +18,51 @@ const Demo1 = () => {
fontWeight: 400,
color: 'rgba(0,0,0, 0.5)',
lineHeight: '16px',
textAlign: 'center',
},
}
return (
<>
<NavBar
title="页面标题"
back={
<>
<ArrowLeft />
返回
</>
}
right={
<span style={styles.flexCenter} onClick={(e) => Toast.show('icon')}>
<Share />
</span>
}
right={<Share onClick={(e) => Toast.show('icon')} />}
onBackClick={(e) => Toast.show('返回')}
>
订单详情
</NavBar>
/>
<NavBar
right={
<span style={styles.flexCenter} onClick={(e) => Toast.show('icon')}>
<Share />
</span>
}
title="页面标题"
right={<Share onClick={(e) => Toast.show('icon')} />}
onBackClick={(e) => Toast.show('返回')}
>
订单详情
</NavBar>
/>
<NavBar
title={
<div style={{ ...styles.flexCenter, flexDirection: 'column' }}>
<span style={styles.title} onClick={(e) => Toast.show('标题')}>
页面标题
</span>
<span style={styles.description}>副标题</span>
</div>
}
right={<span onClick={(e) => Toast.show('清空')}>清空</span>}
left={<Close />}
back={<ArrowLeft />}
onBackClick={(e) => Toast.show('返回')}
>
<div style={{ ...styles.flexCenter, flexDirection: 'column' }}>
<span style={styles.title} onClick={(e) => Toast.show('标题')}>
浏览记录
</span>
<span style={styles.description}>浏览记录</span>
</div>
</NavBar>
/>
<NavBar
back={<ArrowLeft />}
title={<span onClick={(e) => Toast.show('页面标题')}>页面标题</span>}
right={
<>
<span
style={{ marginRight: '5px' }}
onClick={(e) => Toast.show('编辑')}
>
编辑
</span>
<span onClick={(e) => Toast.show('编辑')}>编辑</span>
<More onClick={(e) => Toast.show('icon')} />
</>
}
onBackClick={(e) => Toast.show('返回')}
>
<span onClick={(e) => Toast.show('标题')}>购物车</span>
<i
style={{ ...styles.flexCenter, margin: '0 5px' }}
onClick={(e) => Toast.show('icon')}
>
<Cart />
</i>
</NavBar>
/>
</>
)
}
Expand Down
41 changes: 9 additions & 32 deletions src/packages/navbar/demos/h5/demo2.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import React from 'react'
import { NavBar, Toast } from '@nutui/nutui-react'
import { Share, More, Cart, ArrowLeft, Close } from '@nutui/icons-react'
import { ArrowLeft, Close, More, Share } from '@nutui/icons-react'

const Demo2 = () => {
const styles = {
Expand All @@ -23,70 +23,47 @@ const Demo2 = () => {
return (
<>
<NavBar
titleAlign="left"
back={
<>
<ArrowLeft />
返回
</>
}
right={
<span style={styles.flexCenter} onClick={(e) => Toast.show('icon')}>
<Share />
</span>
}
right={<Share onClick={(e) => Toast.show('icon')} />}
onBackClick={(e) => Toast.show('返回')}
>
订单详情
页面标题
</NavBar>
<NavBar
titleAlign="left"
right={
<span style={styles.flexCenter} onClick={(e) => Toast.show('icon')}>
<Share />
</span>
}
right={<Share onClick={(e) => Toast.show('icon')} />}
onBackClick={(e) => Toast.show('返回')}
>
订单详情
页面标题
</NavBar>
<NavBar
titleAlign="left"
right={<span onClick={(e) => Toast.show('清空')}>清空</span>}
left={<Close />}
back={<ArrowLeft />}
onBackClick={(e) => Toast.show('返回')}
>
<div style={{ ...styles.flexCenter, flexDirection: 'column' }}>
<span style={styles.title} onClick={(e) => Toast.show('标题')}>
浏览记录
页面标题
</span>
<span style={styles.description}>浏览记录</span>
<span style={styles.description}>副标题</span>
</div>
</NavBar>
<NavBar
titleAlign="left"
back={<ArrowLeft />}
right={
<>
<span
style={{ marginRight: '5px' }}
onClick={(e) => Toast.show('编辑')}
>
编辑
</span>
<span onClick={(e) => Toast.show('编辑')}>编辑</span>
<More onClick={(e) => Toast.show('icon')} />
</>
}
onBackClick={(e) => Toast.show('返回')}
>
<span onClick={(e) => Toast.show('标题')}>购物车</span>
<i
style={{ ...styles.flexCenter, margin: '0 5px' }}
onClick={(e) => Toast.show('icon')}
>
<Cart />
</i>
<span onClick={(e) => Toast.show('页面标题')}>页面标题</span>
</NavBar>
</>
)
Expand Down
21 changes: 4 additions & 17 deletions src/packages/navbar/demos/h5/demo3.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import React, { useState } from 'react'
import { NavBar, Toast, Tabs, TabPane } from '@nutui/nutui-react'
import { More, ArrowLeft } from '@nutui/icons-react'
import { NavBar, TabPane, Tabs, Toast } from '@nutui/nutui-react'
import { ArrowLeft, More } from '@nutui/icons-react'

const Demo3 = () => {
const [tab1value, setTab1value] = useState<string | number>('0')
Expand All @@ -11,12 +11,7 @@ const Demo3 = () => {
back={<ArrowLeft />}
right={
<>
<span
onClick={(e) => Toast.show('编辑')}
style={{ marginRight: '5px' }}
>
编辑
</span>
<span onClick={(e) => Toast.show('编辑')}>编辑</span>
<More onClick={(e) => Toast.show('icon')} />
</>
}
Expand All @@ -35,21 +30,14 @@ const Demo3 = () => {
<TabPane title="Tab 1"> Tab 1 </TabPane>
<TabPane title="Tab 2"> Tab 2 </TabPane>
<TabPane title="Tab 3"> Tab 3 </TabPane>
<TabPane title="Tab 4"> Tab 4 </TabPane>
</Tabs>
</div>
</NavBar>
<NavBar
titleAlign="left"
back={<ArrowLeft />}
right={
<>
<span
onClick={(e) => Toast.show('编辑')}
style={{ marginRight: '5px' }}
>
编辑
</span>
<span onClick={(e) => Toast.show('编辑')}>编辑</span>
<More onClick={(e) => Toast.show('icon')} />
</>
}
Expand All @@ -67,7 +55,6 @@ const Demo3 = () => {
>
<TabPane title="Tab1"> Tab1 </TabPane>
<TabPane title="Tab2"> Tab2 </TabPane>
<TabPane title="Tab3"> Tab3 </TabPane>
</Tabs>
</div>
</NavBar>
Expand Down
Loading
Loading