跳到主要内容

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