NavBar 导航栏

位于 app 内容区的上方，系统状态栏的下方，并且提供在一系列页面中的导航能力。

规则

  • 可在导航栏中显示当前视图的标题。如果标题非常冗长且无法精简，可以空缺。

  • 可在导航栏中使用 SegmentedControl 对内容进行层级划分。

  • 避免用过多的元素填满导航栏。一般情况下，一个『返回按钮』、一个『标题』、一个『当前视图的控件』就足够了；如果已经有了 SegmentedControl ，一般只搭配一个『返回按钮』或者『当前视图的控件』。

  • 为图标和文字控件，提供更大的点击热区。

代码演示

导航栏

  1. import { NavBar, Icon } from 'antd-mobile';
  3. ReactDOM.render(
  4.   <div>
  5.     <NavBar leftContent="back"
  6.       mode="light"
  7.       onLeftClick={() => console.log('onLeftClick')}
  8.       rightContent={[
  9.         <Icon key="0" type="search" style={{ marginRight: '0.32rem' }} />,
  10.         <Icon key="1" type="ellipsis" />,
  11.       ]}
  12.     >NavBar</NavBar>
  13.     <NavBar leftContent="back"
  14.       mode="dark"
  15.       onLeftClick={() => console.log('onLeftClick')}
  16.       rightContent={[
  17.         <Icon key="0" type="search" style={{ marginRight: '0.32rem' }} />,
  18.         <Icon key="1" type="ellipsis" />,
  19.       ]}
  20.     >NavBar</NavBar>
  21.   </div>
  22.   , mountNode);

NavBar导航栏 - 图1

API

适用平台：WEB
属性说明类型默认值
children导航内容any无
mode导航模式string'dark' enum{'dark', 'light'}
iconName左边的 icon name (设置为 false/null 不渲染此图标)string/false/null'left'
leftContent导航左边内容any无
rightContent导航右边内容any无
onLeftClick导航左边点击回调(e: Object): void无