Skip to content

feat(navbar): v15 #2881

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

Merged
merged 6 commits into from
Dec 26, 2024
Merged

feat(navbar): v15 #2881

Show file tree
Hide file tree
Changes from 1 commit
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
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
2 changes: 1 addition & 1 deletion src/packages/navbar/doc.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -43,7 +43,7 @@ import { NavBar } from '@nutui/nutui-react'
| right | 右侧内容 | `ReactNode` | `-` |
| left | 左侧内容，渲染在返回区域的右侧 | `ReactNode` | `-` |
| back | 返回区域的文字 | `ReactNode` | `-` |
| titleAlign | 标题位置,可选值center left | `string` | `center` |
| title | 标题 | `ReactNode` | `-` |
| fixed | 是否固定 | `boolean` | `false` |
| safeAreaInsetTop | 是否适配安全区 | `boolean` | `false` |
| placeholder | 固定在顶部时，是否在标签位置生成一个等高的占位元素 | `boolean` | `false` |
Expand Down
72 changes: 32 additions & 40 deletions src/packages/navbar/navbar.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,16 +3,14 @@
position: relative;
display: flex;
flex-direction: row;
justify-content: center;
justify-content: space-between;
align-items: center;
height: $navbar-height;
box-sizing: border-box;
background: $navbar-background;
box-shadow: $navbar-box-shadow;
font-size: $navbar-font-size;
color: $navbar-color;
margin-bottom: $navbar-margin-bottom;
overflow: hidden;
padding: 0 16px;

&-fixed {
position: fixed;
Expand All @@ -32,27 +30,24 @@
padding-top: env(safe-area-inset-top);
}

&-align-left {
padding-left: 14px;
&-title-wrapper {
justify-content: space-between;
}

&-title {
width: 50%;
height: 100%;
text-align: center;
display: flex;
flex: 1;
flex-direction: row;
align-items: center;
justify-content: center;
font-size: $navbar-title-font-size;
font-weight: $navbar-title-font-weight;
color: $navbar-title-font-color;
&-align-left {
min-width: 0;
flex: 1;
justify-content: flex-start;
padding: 0 8px;
text-align: left;

&-center {
max-width: 129px;
justify-content: center;
}
}

Expand All @@ -62,64 +57,61 @@

&-left,
&-right {
position: absolute;
top: 0;
bottom: 0;
display: flex;
align-items: center;
flex-direction: row;
max-width: 124px;
height: 100%;
cursor: pointer;
padding: 0 14px;
/* #ifndef rn harmony jd h5 weapp*/
.nut-icon,
.nutui-iconfont {
width: 20px;
height: 20px;
font-size: 20px;
}

/* #endif */
&-maxwidth {
box-sizing: border-box;
width: calc(124px - 16px);
}
}

&-left {
left: 0;
padding-right: 16px;
gap: 16px;

&-rtl {
left: auto;
right: 0;
}
&-align-left {
position: static;
padding: 0;
padding-right: 0;
padding-left: 16px;
}

&-back {
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
&-children {
margin-right: 10px;
&-rtl {
margin-right: 0;
margin-left: 10px;
}
}
gap: 16px;
}

&-hidden {
padding-left: 0;
padding-right: 0;
}
}

&-right {
right: 0;
padding-left: 16px;
justify-content: flex-end;
gap: 16px;

&-rtl {
right: auto;
left: 0;
}
&-align-left {
position: static;
display: inline-flex;
white-space: nowrap;
padding-right: 16px;
padding-left: 0;
}
}

&-rtl {
.nut-icon-ArrowLeft {
transform: rotateY(180deg);
Expand Down
Loading
Loading