NavBar 顶部导航

定义／Definition

导航栏能够实现在应用不同信息层级结构间的导航，有时候也可用于管理当前屏幕内容。

规则 / Rule

导航栏通常位于屏幕的上方，状态栏正下方。导航栏居中展示当前屏幕或当前视图的标题。当用户在信息层级中穿梭时，也可以通过点击导航栏中的返回按钮，或轻扫屏幕的边缘来回到上一层。另外，用户可以使用导航栏上相应的控件来管理当前的屏幕内容。导航栏上面所有的控件都是无边界的(borderless)。 使用当前视图的标题作为导航栏标题。若觉得标题冗余，你也可以将标题留空。当用户到达一个新的层级，你需要做以下两件事：

  • 将导航栏标题改为当前层级的标题

  • 在当前标题左侧放置返回按钮，按钮的标题应为前一层级的标题

即使空间充足，也应当避免让过多的控件填满你的导航栏。导航栏上应该不多于以下三个元素：当前视图的标题、返回按钮和一个针对当前的操作控件。

代码演示

mode

模式 

  1. import { NavBar, Icon } from 'antd-mobile';
  2. ReactDOM.render(
  3.   <div style={{ padding: 8 }}>
  4.     <NavBar leftContent="返回"
  5.       rightContent={[<Icon key="0" type="user" />, <Icon key="1" type="search" />, <Icon key="2" type="plus" />]}
  6.     >NavBar</NavBar>
  7.     <div style={{ height: 8 }} />
  8.     <NavBar leftContent="返回" mode="light"
  9.       rightContent={[<Icon key="0" type="user" />, <Icon key="1" type="search" />, <Icon key="2" type="plus" />]}
  10.     >NavBar</NavBar>
  11.   </div>
  12. , mountNode);

other

左侧或右侧无内容 

  1. import { NavBar, Icon } from 'antd-mobile';
  2. ReactDOM.render(
  3.   <div style={{ padding: 8 }}>
  4.     <NavBar iconName={false}
  5.       rightContent={[<Icon key="0" type="user" />, <Icon key="1" type="search" />, <Icon key="2" type="plus" />]}
  6.     >NavBar</NavBar>
  7.     <div style={{ height: 8 }} />
  8.     <NavBar leftContent="返回">NavBar</NavBar>
  9.     <div style={{ height: 8 }} />
  10.     <NavBar iconName={false}
  11.       rightContent={<Icon type="ellipsis" />}
  12.     >NavBar</NavBar>
  13.     <div style={{ height: 8 }} />
  14.     <NavBar iconName={false} leftContent="取消"
  15.       rightContent="完成"
  16.     >NavBar</NavBar>
  17.   </div>
  18. , mountNode);

NavBar顶部导航 - 图1

API

成员说明类型默认值
children导航内容any无
mode导航模式string'dark' enum{'dark', 'light'}
iconName左边icon namestring'left'
leftContent导航左边内容any无
rightContent导航右边内容any无
onLeftClick导航左边点击回调function无