NavBar 导航栏

规则

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

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

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

• 为图标和文字控件，提供更大的点击热区，至少在 44dp * 44dp 以上。

代码演示

mode

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

other

import { NavBar, Icon } from 'antd-mobile';
ReactDOM.render(
  <div style={{ padding: 8 }}>
    <NavBar iconName={false}
      rightContent={[<Icon key="0" type="user" />, <Icon key="1" type="search" />, <Icon key="2" type="plus" />]}
    >NavBar</NavBar>
    <div style={{ height: 8 }} />
    <NavBar leftContent="返回">NavBar</NavBar>
    <div style={{ height: 8 }} />
    <NavBar iconName={false}
      rightContent={<Icon type="ellipsis" />}
    >NavBar</NavBar>
    <div style={{ height: 8 }} />
    <NavBar iconName={false} leftContent="取消"
      rightContent="完成"
    >NavBar</NavBar>
  </div>
, mountNode);

API