跳到主要内容

NavBar 导航栏

介绍

导航栏

用法

基础

const leftIcons = ["return"]
const rightTexts = [{ id: 1, text: "按钮" }]

<OsNavBar
title='标题'
leftIcons={leftIcons}
rightTexts={rightTexts}
onLeftIconClick={onLeftIconClick.bind(this)}
onRightTextClick={onRightTextClick.bind(this)}
></OsNavBar>

左侧定制

<OsNavBar
title='标题'
leftIcons={leftIcons}
rightTexts={rightTexts}
leftTexts={leftTexts}
onLeftTextClick={onLeftTextClick.bind(this)}
></OsNavBar>

右侧定制

<OsNavBar
title='标题'
leftIcons={leftIcons3}
rightIcons={rightIcons3}
onRightIconClick={onRightIconClick.bind(this)}
></OsNavBar>

2列均分导航

<OsNavBar
type='2column'
title='标题'
rightTexts={rightTxts1}
></OsNavBar>

自定义导航

<OsNavBar type='custom' showSplitLine={false}>
<View className='custom-nabbar'>
<View className='navbar--left'>
<OsIcon
type='return'
size={40}
customStyle={{ verticalAlign: "top" }}
></OsIcon>
</View>
<View className='navbar--middle'>
<OsSearch padding={0} showSplitLine={false}></OsSearch>
</View>
<View className='navbar--right'>
<OsBadge type='info' info={9}>
<OsIcon
type='detail-cart'
customStyle={{ verticalAlign: "top" }}
></OsIcon>
</OsBadge>
</View>
</View>
</OsNavBar>
<OsIcon
type='return'
size={40}
customStyle={{ verticalAlign: "top" }}
></OsIcon>
<OsSearch padding={0} showSplitLine={false}></OsSearch>
<OsBadge type='info' info={9}>
<OsIcon
type='detail-cart'
customStyle={{ verticalAlign: "top" }}
></OsIcon>
</OsBadge>
<OsIcon
type='detail-cart'
customStyle={{ verticalAlign: "top" }}
></OsIcon>

API

属性

参数说明类型默认值
type2column | 3column | custom,可选string3column
title导航标题,可选string-
middleSlot自定义左侧内容,存在时覆盖title,但比custom优先级低,可选any-
leftIcons左侧icon,取值参考OsIcon,可选string[]-
leftTexts左侧文案,可选Texts[]-
leftSlot自定义左侧内容,存在时覆盖leftIcons和leftTexts,但比custom优先级低,可选any-
rightIcons右侧icon,取值参考OsIcon,可选string[]-
rightTexts右侧文案,可选Texts[]-
rightSlot自定义右侧内容,存在时覆盖rightIcons和rightTexts,但比custom优先级低,可选any-
showSplitLine展示分割线,可选booleantrue
custom自定义整个导航,会用custom中的内容作为整个导航的内容,覆盖所有icon/text/title/slot,可选any-
iconColoricon的颜色,仅当使用ossa提供的icon时有效,可选string#7f7f7f
className自定义类名,可选string-
customStyle自定义样式,可选object-

Texts属性

参数说明类型默认值
id文案标识number-
text文案string-

方法

函数名说明参数
onLeftIconClick点击左侧icon时触发当前点击icon的名称
onLeftTextClick点击左侧文案时触发当前点击文案的id
onRightIconClick点击右侧icon时触发当前点击icon的名称
onRightTextClick点击右侧文案时触发当前点击文案的id