Navbar React 组件
Navbar 是屏幕顶端一个固定的（通过固定和贯穿布局类型）区域，包含页面标题和导航元素。
Navbar React 组件代表 Navbar 组件。
Navbar 组件
包含以下组件
导航栏NavLeftNavRightNavTitleNavTitleLarge
Navbar 属性
| Prop | 类型 | 默认值 | 描述 |
|---|---|---|---|
| <Navbar> 属性 | |||
| title | 字符串 | Navbar 标题 | |
| subtitle | 字符串 | Navbar 子标题 | |
| backLink | boolean 字符串 | 添加带有文本的后向链接（如果指定了string值） | |
| backLinkUrl | 字符串 | 自定义后退链接 URL | |
| backLinkForce | boolean | false | 强制页面加载并忽略历史记录中的上一页 |
| backLinkShowText | boolean | 对于 MD 主题，默认情况下后退链接文本处于禁用状态 | |
| sliding | boolean | true | 为导航元素启用“滑动”效果 |
| outline | boolean | true | 为 iOS 主题添加导航栏底部细边框（细线） |
| hidden | boolean | false | 隐藏导航栏 |
| innerClass | 字符串 | 为navbar-inner元素添加其他类 | |
| innerClassName | 字符串 | innerClass属性的别名 | |
| large | boolean | 启用带有大标题的导航栏 | |
| transparent | boolean | 让导航栏变透明。可以连同large属性一起使用，让大导航栏变透明。 | |
| titleLarge | 字符串 | 导航栏大标题文本。如果不指定，则会与title属性相同 | |
| <NavLeft>属性 | |||
| backLink | boolean 字符串 | 添加带有文本的后向链接（如果指定了字符串值） | |
| backLinkUrl | 字符串 | 自定义后退链接 URL | |
| backLinkForce | boolean | false | 强制页面加载并忽略历史记录中的上一页 |
| backLinkShowText | boolean | 对于 MD 主题，默认情况下后退链接文本处于禁用状态 | |
| sliding | boolean | 启用“滑动”效果。默认情况下，会继承父Navbar的sliding属性 | |
| <NavTitle>属性 | |||
| title | 字符串 | 指定元素内部标题文本（如果没有子元素，会影响文本） | |
| subtitle | 字符串 | 副标题文本 | |
| sliding | boolean | 启用“滑动”效果。默认情况下，会继承父Navbar的sliding属性 | |
| <NavRight>属性 | |||
| sliding | boolean | 启用“滑动”效果。默认情况下，会继承父Navbar的sliding属性 | |
导航栏方法
| <Navbar>方法 | |
|---|---|
| .hide(animate) | 隐藏导航栏 |
| .show(animate) | 显示导航栏 |
| .size() | 调整导航栏大小 |
导航栏事件
| 事件 | 描述 |
|---|---|
| <Navbar>事件 | |
| backClick clickBack | 在点击导航栏后退链接后触发 |
| navbarHide | 在导航栏变为隐藏时触发 |
| navbarShow | 在导航栏变为可见时触发 |
| navbarCollapse | 在大标题导航栏折叠（从大导航栏变为一般的导航栏）时触发 |
| navbarExpand | 在大标题导航栏展开（从一般的导航栏变为大导航栏）时触发 |
| <NavLeft>事件 | |
| backClick clickBack | 在点击导航栏后退链接后触发 |
导航栏插槽
导航栏 React 组件（<Navbar>）具有用于自定义元素的其他插槽
default- 元素将作为<div class="navbar-inner">元素的子元素插入before-inner- 元素将被插入在<div class="navbar-inner">元素的正前方after-inner- 元素将被插入在<div class="navbar-inner">元素的正后方left- 元素将被插入在导航栏的左侧元素中right- 元素将被插入在导航栏的右侧元素中title- 元素将被插入在导航栏的标题元素中title-large- 元素将被插入在导航栏的大标题文本元素中
<Navbar title="My App">
<a href="#" slot="left">Left Link</a>
<a href="#" slot="right">Right Link</a>
<div slot="before-inner">Before Inner</div>
<div slot="after-inner">After Inner</div>
<div>Default slot</div>
</Navbar>
{/* Renders to: */}
<div class="navbar">
<div class="navbar-bg"></div>
<div>Before Inner</div>
<div class="navbar-inner">
<div class="left">
<a href="#">Left Link</a>
</div>
<div class="title">My App</div>
<div class="right">
<a href="#">Right Link</a>
</div>
<div>Default slot</div>
</div>
<div>After Inner</div>
</div>
示例
极简布局
<Navbar title="My App"></Navbar>
带有后退链接的极简布局
<Navbar title="My App" backLink="Back"></Navbar>
不带有“滑动”过渡效果（仅影响 iOS 主题）
<Navbar title="My App" backLink="Back" sliding="{false}"></Navbar>
带有右侧链接，以打开右侧面板
<Navbar title="My App" backLink="Back">
<NavRight>
<Link icon="icon-bars" panelOpen="right"></Link>
</NavRight>
</Navbar>
{/* or */}
<Navbar title="My App" backLink="Back">
<Link slot="right" icon="icon-bars" panelOpen="right"></Link>
</Navbar>
带有大标题
<Navbar title="My App" backLink="Back" large></Navbar>
{/* with different large title text */}
<Navbar title="My App" backLink="Back" large titleLarge="Large Title"></Navbar>
所有三个部分
<Navbar>
<NavLeft backLink="Back"></NavLeft>
<NavTitle>My App</NavTitle>
<NavRight>
<Link icon="icon-bars" panelOpen="right"></Link>
</NavRight>
</Navbar>
完全自定义布局
<Navbar>
<NavLeft>
<Link>Left Link</Link>
</NavLeft>
<NavTitle>My App</NavTitle>
<NavRight>
<Link>Right Link</Link>
</NavRight>
</Navbar>