Skip to content

N
nutui-react

京东前端 / nutui-react

通知 0
Star 2
Fork 0
N
nutui-react

体验新版 GitCode，发现更多精彩内容 >>

未验证 提交 34c82c4d 编写于 作者: L love_forever 提交者： GitHub
浏览文件
操作

feat(navbar): navbar组件能力补齐 (#177)

上级 bec53f27
隐藏空白更改
内联 并排
Showing with 610 addition and 161 deletion
src/packages/navbar/demo.tsx
浏览文件 @ 34c82c4d
import React from 'react'
import React, { useState } from 'react'
import { NavBar } from './navbar'
import { Icon } from '../icon/icon'
import { Tabs } from '../tabs/tabs'
import { TabPane } from '../tabpane/tabpane'
import { useTranslate } from '../../sites/assets/locale'
interface T {
......@@ -11,6 +14,7 @@ interface T {
cfbdc781: string
c3a3a1d2: string
e51e4582: string
c9e6df49: string
}
const NavBarDemo = () => {
......@@ -24,6 +28,7 @@ const NavBarDemo = () => {
cfbdc781: '清空',
c3a3a1d2: '购物车',
e51e4582: '浏览记录',
c9e6df49: '自定义导航栏中间内容',
},
'zh-TW': {
ce5c5446: '基礎用法',
......@@ -34,6 +39,7 @@ const NavBarDemo = () => {
cfbdc781: '清空',
c3a3a1d2: '購物車',
e51e4582: '瀏覽記錄',
c9e6df49: '自定義導航欄中間內容',
},
'en-US': {
ce5c5446: 'Basic usage',
......@@ -44,38 +50,76 @@ const NavBarDemo = () => {
cfbdc781: 'empty',
c3a3a1d2: 'shopping cart',
e51e4582: 'Browsing history',
c9e6df49: 'Customize the middle content of the navigation bar',
},
})
const [tab1value, setTab1value] = useState('Tab 1')
return (
<>
<div className="demo">
<h2>{translated.ce5c5446}</h2>
<NavBar
title={translated.c38a08ef}
icon="share"
leftShow
leftText={translated.a74a1fd4}
onClickTitle={(e) => alert(translated.b840c88f)}
onClickBack={(e) => alert(translated.a74a1fd4)}
onClickIcon={(e) => alert('icon')}
/>
onClickRight={(e) => alert('icon')}
>
<Icon name="share" slot="right" />
</NavBar>
<NavBar
title={translated.e51e4582}
desc={translated.cfbdc781}
leftShow
onClickTitle={(e) => alert(translated.b840c88f)}
onClickBack={(e) => alert(translated.a74a1fd4)}
onClickClear={(e) => alert(translated.cfbdc781)}
onClickRight={(e) => alert(translated.cfbdc781)}
/>
<NavBar
title={translated.c3a3a1d2}
icon="more"
desc={translated['8dab2f66']}
titIcon="locationg3"
onClickTitle={(e) => alert(translated.b840c88f)}
onClickRight={(e) => alert(translated['8dab2f66'])}
onClickBack={(e) => alert(translated.a74a1fd4)}
onClickClear={(e) => alert(translated['8dab2f66'])}
onClickIcon={(e) => alert('icon')}
/>
>
<Icon name="more-x" slot="right" />
</NavBar>
<NavBar
title={translated.c38a08ef}
leftShow
border
leftText={translated.a74a1fd4}
onClickTitle={(e) => alert(translated.b840c88f)}
onClickBack={(e) => alert(translated.a74a1fd4)}
onClickRight={(e) => alert('icon')}
>
<Icon name="share" slot="right" />
</NavBar>
<h2>{translated.c9e6df49}</h2>
<NavBar
desc={translated['8dab2f66']}
onClickTitle={(e) => alert(translated.b840c88f)}
onClickRight={(e) => alert(translated['8dab2f66'])}
onClickBack={(e) => alert(translated.a74a1fd4)}
onClickIcon={(e) => alert('icon')}
>
<div slot="content">
<Tabs
value={tab1value}
onChange={({ paneKey }) => {
setTab1value(paneKey)
}}
>
<TabPane title="Tab 1"> Tab 1 </TabPane>
<TabPane title="Tab 2"> Tab 2 </TabPane>
<TabPane title="Tab 3"> Tab 3 </TabPane>
</Tabs>
</div>
<Icon name="more-x" slot="right" />
</NavBar>
</div>
</>
)
......
src/packages/navbar/doc.en-US.md
浏览文件 @ 34c82c4d
......@@ -15,6 +15,32 @@ import { NavBar } from '@nutui/nutui-react';
### Basic usage
:::demo
```tsx
import React from "react";
import { NavBar, Icon } from '@nutui/nutui-react';
const App = () => {
return (
<>
<NavBar
title="order details"
leftShow
leftText="back"
onClickTitle={(e) => alert("back")}
onClickBack={(e) => alert("title")}
onClickRight={(e) => alert('icon')}
>
<Icon name="share" slot="right"></Icon>
</NavBar>
</>
);
};
export default App;
```
:::
:::demo
```tsx
import React from "react";
......@@ -23,14 +49,14 @@ import { NavBar } from '@nutui/nutui-react';
const App = () => {
return (
<>
<NavBar
title="order details"
icon="share"
leftShow
onClickTitle={(e) => alert('title')}
onClickBack={(e) => alert('back')}
onClickIcon={(e) => alert('icon')}
/>
<NavBar
title="Browsing history"
desc="clear"
leftShow
onClickTitle={(e) => alert("back")}
onClickBack={(e) => alert("title")}
onClickRight={(e) => alert('clear')}
/>
</>
);
};
......@@ -42,19 +68,22 @@ export default App;
:::demo
```tsx
import React from "react";
import { NavBar } from '@nutui/nutui-react';
import { NavBar, Icon } from '@nutui/nutui-react';
const App = () => {
return (
<>
<NavBar
title="Browsing history"
desc="clear"
leftShow
onClickTitle={(e) => alert('title')}
onClickBack={(e) => alert('back')}
onClickClear={(e) => alert('clear')}
/>
<NavBar
title="cart"
desc="edit"
titIcon="locationg3"
onClickTitle={(e) => alert("back")}
onClickBack={(e) => alert("title")}
onClickRight={(e) => alert('edit')}
onClickIcon={(e) => alert('icon')}
>
<Icon name="more-x" slot="right"></Icon>
</NavBar>
</>
);
};
......@@ -66,21 +95,58 @@ export default App;
:::demo
```tsx
import React from "react";
import { NavBar } from '@nutui/nutui-react';
import { NavBar, Icon } from '@nutui/nutui-react';
const App = () => {
return (
<>
<NavBar
title="order details"
leftShow
border
leftText="back"
onClickTitle={(e) => alert("back")}
onClickBack={(e) => alert("title")}
onClickRight={(e) => alert('icon')}
>
<Icon name="share" slot="right"></Icon>
</NavBar>
</>
);
};
export default App;
```
:::
### Customize the middle content of the navigation bar
:::demo
```tsx
import React, { useState } from "react";
import { NavBar, Icon, Tabs, TabPane } from '@nutui/nutui-react';
const App = () => {
const [tab1value, setTab1value] = useState('Tab 1')
return (
<>
<NavBar
title="cart"
icon="more"
desc="edit"
titIcon="locationg3"
onClickTitle={(e) => alert('title')}
onClickBack={(e) => alert('back')}
onClickClear={(e) => alert('edit')}
onClickIcon={(e) => alert('icon')}
/>
<NavBar
desc="edit"
onClickTitle={(e) => alert("title")}
onClickRight={(e) => alert("edit")}
onClickBack={(e) => alert("back")}
onClickIcon={(e) => alert('icon')}
>
<div slot="content">
<Tabs value={tab1value} onChange={({ paneKey }) => { setTab1value(paneKey) }}>
<TabPane title="Tab 1"> Tab 1 </TabPane>
<TabPane title="Tab 2"> Tab 2 </TabPane>
<TabPane title="Tab 3"> Tab 3 </TabPane>
</Tabs>
</div>
<Icon name="more-x" slot="right"></Icon>
</NavBar>
</>
);
};
......@@ -95,14 +161,22 @@ export default App;
|-----------------|------------------------------------------------------------------------------------------------|---------|---------|
| title | title name | String | - |
| desc | Description on the right | String | - |
| leftShow | Whether to show the left arrow | Boolean | false |
| icon | Left [icon name](#/icon) or image link | String | - |
| titIcon | title with icon | String | - |
| leftShow | Whether to show the left arrow | Boolean | true |
| titIcon | title with icon | String | - |
| leftText | copy on the left | String | - |
| fixed | Is it fixed | Boolean | false |
| safeAreaInsetTop | Whether it is suitable for the safe area | Boolean | false |
| border | whether to show the bottom border | Boolean | false |
| placeholder | When fixed to the top, whether to generate a placeholder element of equal height at the label position | Boolean | false |
| zIndex | Navigation Bar Hierarchy | Number、String | 10 |
| style | container style | React.CSSProperties | {} |
| className | container class name | String | "" |
### Event
| Event | Description | callback parameter |
|-------|----------|-------------|
| onClickTitle | Click page title event | event:Event |
| onClickClear | Click on the copy event on the right | event:Event |
| onClickBack | Click to return to previous page of events | event:Event |
| onClickIcon | Click the right icon event | event:Event |
\ No newline at end of file
| onClickTitle | click title event | event:Event |
| onClickRight | Click on the event on the right | event:Event |
| onClickBack | click back event | event:Event |
| onClickIcon | Click the icon event on the right side of the title | event:Event |
\ No newline at end of file
src/packages/navbar/doc.md
浏览文件 @ 34c82c4d
......@@ -18,19 +18,21 @@ import { NavBar } from '@nutui/nutui-react';
:::demo
```tsx
import React from "react";
import { NavBar } from '@nutui/nutui-react';
import { NavBar, Icon } from '@nutui/nutui-react';
const App = () => {
return (
<>
<NavBar
title="订单详情"
icon="share"
leftShow
onClickTitle={(e) => alert('标题')}
onClickBack={(e) => alert('返回')}
onClickIcon={(e) => alert('icon')}
/>
<NavBar
title="订单详情"
leftShow
leftText="返回"
onClickTitle={(e) => alert("返回")}
onClickBack={(e) => alert("标题")}
onClickRight={(e) => alert('icon')}
>
<Icon name="share" slot="right"></Icon>
</NavBar>
</>
);
};
......@@ -47,14 +49,14 @@ import { NavBar } from '@nutui/nutui-react';
const App = () => {
return (
<>
<NavBar
title="浏览记录"
desc="清空"
leftShow
onClickTitle={(e) => alert('标题')}
onClickBack={(e) => alert('返回')}
onClickClear={(e) => alert('清空')}
/>
<NavBar
title="浏览记录"
desc="清空"
leftShow
onClickTitle={(e) => alert("返回")}
onClickBack={(e) => alert("标题")}
onClickRight={(e) => alert('清空')}
/>
</>
);
};
......@@ -66,21 +68,85 @@ export default App;
:::demo
```tsx
import React from "react";
import { NavBar } from '@nutui/nutui-react';
import { NavBar, Icon } from '@nutui/nutui-react';
const App = () => {
return (
<>
<NavBar
title="购物车"
desc="编辑"
titIcon="locationg3"
onClickTitle={(e) => alert("返回")}
onClickBack={(e) => alert("标题")}
onClickRight={(e) => alert('编辑')}
onClickIcon={(e) => alert('icon')}
>
<Icon name="more-x" slot="right"></Icon>
</NavBar>
</>
);
};
export default App;
```
:::
:::demo
```tsx
import React from "react";
import { NavBar, Icon } from '@nutui/nutui-react';
const App = () => {
return (
<>
<NavBar
title="订单详情"
leftShow
border
leftText="返回"
onClickTitle={(e) => alert("返回")}
onClickBack={(e) => alert("标题")}
onClickRight={(e) => alert('icon')}
>
<Icon name="share" slot="right"></Icon>
</NavBar>
</>
);
};
export default App;
```
:::
### 自定义导航栏中间内容
:::demo
```tsx
import React, { useState } from "react";
import { NavBar, Icon, Tabs, TabPane } from '@nutui/nutui-react';
const App = () => {
const [tab1value, setTab1value] = useState('Tab 1')
return (
<>
<NavBar
title="购物车"
icon="more"
desc="编辑"
titIcon="locationg3"
onClickTitle={(e) => alert('标题')}
onClickBack={(e) => alert('返回')}
onClickClear={(e) => alert('编辑')}
onClickIcon={(e) => alert('icon')}
/>
<NavBar
desc="编辑"
onClickTitle={(e) => alert("标题")}
onClickRight={(e) => alert("编辑")}
onClickBack={(e) => alert("返回")}
onClickIcon={(e) => alert('icon')}
>
<div slot="content">
<Tabs value={tab1value} onChange={({ paneKey }) => { setTab1value(paneKey) }}>
<TabPane title="Tab 1"> Tab 1 </TabPane>
<TabPane title="Tab 2"> Tab 2 </TabPane>
<TabPane title="Tab 3"> Tab 3 </TabPane>
</Tabs>
</div>
<Icon name="more-x" slot="right"></Icon>
</NavBar>
</>
);
};
......@@ -95,14 +161,21 @@ export default App;
|-----------------|------------------------------------------------------------------------------------------------|---------|---------|
| title | 标题名称 | String | - |
| desc | 右侧描述 | String | - |
| leftShow | 是否展示左侧箭头 | Boolean | false |
| icon | 左侧 [图标名称](#/icon) 或图片链接 | String | - |
| titIcon | 标题带icon | String | - |
| leftShow | 是否展示左侧箭头 | Boolean | true |
| titIcon | 标题带icon | String | - |
| leftText | 左侧文案 | String | - |
| fixed | 是否固定 | Boolean | false |
| safeAreaInsetTop | 是否适配安全区 | Boolean | false |
| border | 是否显示底部边框 | Boolean | false |
| placeholder | 固定在顶部时，是否在标签位置生成一个等高的占位元素 | Boolean | false |
| zIndex | 导航栏层级 | Number、String | 10 |
| style | 容器样式 | React.CSSProperties | {} |
| className | 容器类名 | String | "" |
### Event
| 名称 | 说明 | 回调参数 |
|-------|----------|-------------|
| onClickTitle | 点击页面标题事件 | event:Event |
| onClickClear | 点击右侧文案事件 | event:Event |
| onClickBack | 点击返回上一页事件 | event:Event |
| onClickIcon | 点击右侧icon事件 | event:Event |
\ No newline at end of file
| onClickTitle | 点击标题事件 | event:Event |
| onClickRight | 点击右侧事件 | event:Event |
| onClickBack | 点击返回事件 | event:Event |
| onClickIcon | 点击标题右侧icon事件 | event:Event |
\ No newline at end of file
src/packages/navbar/doc.zh-TW.md
浏览文件 @ 34c82c4d
......@@ -18,19 +18,21 @@ import { NavBar } from '@nutui/nutui-react';
:::demo
```tsx
import React from "react";
import { NavBar } from '@nutui/nutui-react';
import { NavBar, Icon } from '@nutui/nutui-react';
const App = () => {
return (
<>
<NavBar
title="訂單詳情"
icon="share"
leftShow
onClickTitle={(e) => alert('標題')}
onClickBack={(e) => alert('返回')}
onClickIcon={(e) => alert('icon')}
/>
<NavBar
title="訂單詳情"
leftShow
leftText="返回"
onClickTitle={(e) => alert("返回")}
onClickBack={(e) => alert("標題")}
onClickRight={(e) => alert('icon')}
>
<Icon name="share" slot="right"></Icon>
</NavBar>
</>
);
};
......@@ -47,14 +49,14 @@ import { NavBar } from '@nutui/nutui-react';
const App = () => {
return (
<>
<NavBar
title="瀏覽記錄"
desc="清空"
leftShow
onClickTitle={(e) => alert('標題')}
onClickBack={(e) => alert('返回')}
onClickClear={(e) => alert('清空')}
/>
<NavBar
title="瀏覽記錄"
desc="清空"
leftShow
onClickTitle={(e) => alert("返回")}
onClickBack={(e) => alert("標題")}
onClickRight={(e) => alert('清空')}
/>
</>
);
};
......@@ -66,21 +68,85 @@ export default App;
:::demo
```tsx
import React from "react";
import { NavBar } from '@nutui/nutui-react';
import { NavBar, Icon } from '@nutui/nutui-react';
const App = () => {
return (
<>
<NavBar
title="購物車"
desc="編輯"
titIcon="locationg3"
onClickTitle={(e) => alert("返回")}
onClickBack={(e) => alert("標題")}
onClickRight={(e) => alert('編輯')}
onClickIcon={(e) => alert('icon')}
>
<Icon name="more-x" slot="right"></Icon>
</NavBar>
</>
);
};
export default App;
```
:::
:::demo
```tsx
import React from "react";
import { NavBar, Icon } from '@nutui/nutui-react';
const App = () => {
return (
<>
<NavBar
title="訂單詳情"
leftShow
border
leftText="返回"
onClickTitle={(e) => alert("返回")}
onClickBack={(e) => alert("標題")}
onClickRight={(e) => alert('icon')}
>
<Icon name="share" slot="right"></Icon>
</NavBar>
</>
);
};
export default App;
```
:::
### 自定義導航欄中間內容
:::demo
```tsx
import React, { useState } from "react";
import { NavBar, Icon, Tabs, TabPane } from '@nutui/nutui-react';
const App = () => {
const [tab1value, setTab1value] = useState('Tab 1')
return (
<>
<NavBar
title="購物車"
icon="more"
desc="編輯"
titIcon="locationg3"
onClickTitle={(e) => alert('標題')}
onClickBack={(e) => alert('返回')}
onClickClear={(e) => alert('編輯')}
onClickIcon={(e) => alert('icon')}
/>
<NavBar
desc="編輯"
onClickTitle={(e) => alert("標題")}
onClickRight={(e) => alert("編輯")}
onClickBack={(e) => alert("返回")}
onClickIcon={(e) => alert('icon')}
>
<div slot="content">
<Tabs value={tab1value} onChange={({ paneKey }) => { setTab1value(paneKey) }}>
<TabPane title="Tab 1"> Tab 1 </TabPane>
<TabPane title="Tab 2"> Tab 2 </TabPane>
<TabPane title="Tab 3"> Tab 3 </TabPane>
</Tabs>
</div>
<Icon name="more-x" slot="right"></Icon>
</NavBar>
</>
);
};
......@@ -95,14 +161,21 @@ export default App;
|-----------------|------------------------------------------------------------------------------------------------|---------|---------|
| title | 標題名稱 | String | - |
| desc | 右側描述 | String | - |
| leftShow | 是否展示左側箭頭 | Boolean | false |
| icon | 左側 [圖標名稱](#/icon) 或圖片鏈接 | String | - |
| titIcon | 標題帶icon | String | - |
| leftShow | 是否展示左側箭頭 | Boolean | true |
| titIcon | 標題帶icon | String | - |
| leftText | 左側文案 | String | - |
| fixed | 是否固定 | Boolean | false |
| safeAreaInsetTop | 是否適配安全區 | Boolean | false |
| border | 是否顯示底部邊框 | Boolean | false |
| placeholder | 固定在頂部時，是否在標籤位置生成一個等高的佔位元素 | Boolean | false |
| zIndex | 導航欄層級 | Number、String | 10 |
| style | 容器樣式 | React.CSSProperties | {} |
| className | 容器類名 | String | "" |
### Event
| 名稱 | 說明 | 回調參數 |
|-------|----------|-------------|
| onClickTitle | 點擊頁面標題事件 | event:Event |
| onClickClear | 點擊右側文案事件 | event:Event |
| onClickBack | 點擊返回上一頁事件 | event:Event |
| onClickIcon | 點擊右側icon事件 | event:Event |
\ No newline at end of file
| onClickTitle | 點擊標題事件 | event:Event |
| onClickRight | 點擊右側事件 | event:Event |
| onClickBack | 點擊返回事件 | event:Event |
| onClickIcon | 點擊標題右側icon事件 | event:Event |
\ No newline at end of file
src/packages/navbar/navbar.scss
浏览文件 @ 34c82c4d
@import '../icon/icon.scss';
.nut-navbar {
position: relative;
display: flex;
justify-content: space-around;
align-items: center;
height: 44px;
padding: 13px 16px;
background: #fff;
box-shadow: 0 1px 7px 0 #edeef1;
font-size: 14px;
color: #666;
margin-bottom: 20px;
&__back {
padding: 0 16px;
&:before {
content: '\e673';
height: $navbar-height;
box-sizing: border-box;
padding: $navbar-padding;
background: $navbar-background;
box-shadow: $navbar-box-shadow;
font-size: $navbar-title-base-font;
color: $navbar-color;
margin-bottom: $navbar-margin-bottom;
overflow: hidden;
&:active::before {
opacity: 0.1;
}
&--border {
border-bottom: 1px solid #eee;
}
&--fixed {
position: fixed;
top: 0;
left: 0;
width: 100%;
}
&--placeholder {
display: inline-block;
width: 100%;
}
&--safe-area-inset-top {
padding-top: constant(safe-area-inset-top);
padding-top: env(safe-area-inset-top);
}
&--clickable {
&::before {
position: absolute;
content: ' ';
top: 50%;
left: 50%;
width: 100%;
height: 100%;
background-color: $black;
border: inherit;
border-color: $black;
border-radius: inherit;
transform: translate(-50%, -50%);
opacity: 0;
}
}
&__icon {
display: flex;
margin-left: 16px;
.nut-icon:before {
max-width: 100%;
.nutui-iconfont {
.nut-icon-left {
text-align: left;
}
}
&__title {
flex: 1;
min-width: 53%;
margin: 0 auto;
text-align: center;
display: flex;
align-items: center;
justify-content: center;
.title {
min-width: $navbar-title-width;
font-size: $navbar-title-font;
font-weight: $navbar-title-font-weight;
color: $navbar-title-font-color;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 1;
overflow: hidden;
}
&.icon {
.icon {
margin: $navbar-title-icon-margin;
}
}
.nut-icon {
vertical-align: middle;
margin-top: -2px;
display: inline;
}
&-desc {
font-size: $cell-title-desc-font;
}
.text__title {
display: inline-block;
}
.nut-tabs__titles {
background: $white;
}
.nut-tabpane {
display: none;
}
}
&__title ::-webkit-scrollbar {
display: none;
}
&__left {
font-size: $cell-desc-font;
color: $cell-desc-color;
position: absolute;
left: 0;
top: 0;
bottom: 0;
display: flex;
align-items: center;
cursor: pointer;
padding: 0 16px;
}
&__right {
font-size: $cell-desc-font;
color: $cell-desc-color;
position: absolute;
right: 0;
top: 0;
bottom: 0;
display: flex;
align-items: center;
padding: 0 16px;
cursor: pointer;
.rightIcon {
margin-left: 16px;
}
.leftIcon {
margin-left: 16px;
}
}
}
src/packages/navbar/navbar.tsx
浏览文件 @ 34c82c4d
import React, { FunctionComponent } from 'react'
import classNames from 'classnames'
import Icon from '@/packages/icon'
import bem from '@/utils/bem'
export interface NavBarProps {
title: string
desc: string
leftShow: boolean
icon: string
title: string
titIcon: string
leftText: string
desc: string
className: string
fixed: boolean
safeAreaInsetTop: boolean
border: boolean
placeholder: boolean
zIndex: number | string
style: React.CSSProperties
onClickTitle: (e: React.MouseEvent<HTMLDivElement>) => void
onClickIcon: (e: React.MouseEvent<HTMLDivElement>) => void
onClickBack: (e: React.MouseEvent<HTMLElement>) => void
onClickClear: (e: React.MouseEvent<HTMLDivElement>) => void
onClickRight: (e: React.MouseEvent<HTMLDivElement>) => void
}
const defaultProps = {
title: '',
desc: '',
leftShow: false,
icon: '',
leftShow: true,
titIcon: '',
className: '',
leftText: '',
fixed: false,
safeAreaInsetTop: false,
border: false,
placeholder: false,
zIndex: 10,
style: {},
} as NavBarProps
export const NavBar: FunctionComponent<Partial<NavBarProps>> = (props) => {
const {
desc,
icon,
title,
titIcon,
leftShow,
className,
style,
leftText,
fixed,
safeAreaInsetTop,
border,
placeholder,
zIndex,
onClickTitle,
onClickIcon,
onClickBack,
onClickClear,
onClickRight,
} = {
...defaultProps,
...props,
}
const b = bem('navbar')
return (
<div className={`nut-navbar ${className}`} style={style}>
{leftShow && (
<i
className={['nut-icon', 'nutui-iconfont', `${b('back')}`].join(' ')}
onClick={(e) => onClickBack(e)}
/>
)}
<div className={`${b('title')}`} onClick={(e) => onClickTitle(e)}>
{title}
{titIcon && <Icon name={titIcon} />}
const children = Array.isArray(props.children)
? props.children
: [props.children]
const slot = children.reduce((slot: any, item: React.ReactElement) => {
const data = slot
if (item && item.props) {
data[item.props.slot] = item
}
return data
}, {})
const styles = () => {
return {
...style,
zIndex,
}
}
const renderLeft = () => {
return (
<div className={`${b('left')}`} onClick={(e) => onClickBack(e)}>
{leftShow && <Icon name="left" color="#979797" />}
{leftText && <div className={`${b('text')}`}>{leftText}</div>}
{slot.left}
</div>
)
}
const renderContent = () => {
return (
<div className={`${b('title')}`}>
{title && (
<div className="title" onClick={(e) => onClickTitle(e)}>
{title}
</div>
)}
{titIcon && (
<div onClick={(e) => onClickIcon(e)}>
<Icon name={titIcon} />
</div>
)}
{slot.content}
</div>
)
}
const renderRight = () => {
return (
<div className={`${b('right')}`} onClick={(e) => onClickRight(e)}>
{desc && <div className={`${b('text')}`}>{desc}</div>}
{slot.right}
</div>
<div className={`${b('desc')}`} onClick={(e) => onClickClear(e)}>
{desc}
)
}
const renderWrapper = () => {
return (
<div className={cls} style={styles()}>
{renderLeft()}
{renderContent()}
{renderRight()}
</div>
{icon && (
<div className={`${b('icon')}`} onClick={(e) => onClickIcon(e)}>
<Icon name={icon} />
</div>
)
}
const classes = classNames({
[`nut-navbar--border`]: border,
[`nut-navbar--fixed`]: fixed,
[`nut-navbar--safe-area-inset-top`]: safeAreaInsetTop,
})
const cls = classNames(b(''), classes, className)
return (
<>
{fixed && placeholder ? (
<div className={`${b('')}--placeholder`}>{renderWrapper()}</div>
) : (
renderWrapper()
)}
</div>
</>
)
}
......
src/styles/variables.scss
浏览文件 @ 34c82c4d
......@@ -477,6 +477,20 @@ $divider-vertical-top: 2px !default;
$divider-vertical-border-left: rgba(0, 0, 0, 0.06) !default;
$divider-vertical-margin: 0 8px !default;
//navbar
$navbar-height: 44px !default;
$navbar-margin-bottom: 20px !default;
$navbar-padding: 13px 16px !default;
$navbar-background: $white !default;
$navbar-box-shadow: 0px 1px 7px 0px rgba(237, 238, 241, 1) !default;
$navbar-color: $title-color2 !default;
$navbar-title-base-font: $font-size-2 !default;
$navbar-title-font: $font-size-2 !default;
$navbar-title-font-weight: 0 !default;
$navbar-title-font-color: $navbar-color !default;
$navbar-title-width: 100px !default;
$navbar-title-icon-margin: 0 0 0 13px !default;
// layout
$row-content-color: #fff !default;
$row-content-background-color: #ff8881 !default;
......
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或