Navbar React 組件
Navbar 是固定在畫面頂端的固定區域（具有固定和穿透版面類型），包含頁面標題和導航元素。
Navbar React 組件代表 Navbar 組件。
Navbar 組件
包含下列組件
導覽列NavLeftNavRightNavTitleNavTitleLarge
Navbar 屬性
| 屬性 | 類型 | 預設值 | 說明 |
|---|---|---|---|
| <Navbar> 屬性 | |||
| title | 字串 | Navbar 標題 | |
| subtitle | 字串 | Navbar 子標題 | |
| backLink | 布林值 字串 | 加入後向連結，並附上文字（如果指定了 字串 值） | |
| backLinkUrl | 字串 | 自訂後向連結 URL | |
| backLinkForce | 布林值 | false | 強制頁面載入，並忽略歷史記錄中的前一頁 |
| backLinkShowText | 布林值 | 預設情況下，MD 主題會停用後向連結文字 | |
| sliding | 布林值 | true | 為導覽列元素啟用「滑動」效果 |
| outline | 布林值 | true | 為 iOS 主題加入 navbar 底部細邊框（髮絲線） |
| hidden | 布林值 | false | 隱藏 navbar |
| innerClass | 字串 | 為 navbar-inner 元素加入額外類別 | |
| innerClassName | 字串 | innerClass 屬性的別名 | |
| large | 布林值 | 啟用帶有大型標題的 navbar | |
| transparent | 布林值 | 使 navbar 透明。可與 large 屬性一起使用，以使大型 navbar 透明。 | |
| titleLarge | 字串 | Navbar 大型標題文字。如果未指定，則會等於 title 屬性 | |
| <NavLeft> 屬性 | |||
| backLink | 布林值 字串 | 加入後向連結，並附上文字（如果指定了字串值） | |
| backLinkUrl | 字串 | 自訂後向連結 URL | |
| backLinkForce | 布林值 | false | 強制頁面載入，並忽略歷史記錄中的前一頁 |
| backLinkShowText | 布林值 | 預設情況下，MD 主題會停用後向連結文字 | |
| sliding | 布林值 | 啟用「滑動」效果。預設情況下，會繼承父 Navbar 的 sliding 屬性 | |
| <NavTitle> 屬性 | |||
| title | 字串 | 指定元素內部標題文字（如果沒有子元素，則會受到影響） | |
| subtitle | 字串 | 子標題文字 | |
| sliding | 布林值 | 啟用「滑動」效果。預設情況下，會繼承父 Navbar 的 sliding 屬性 | |
| <NavRight> 屬性 | |||
| sliding | 布林值 | 啟用「滑動」效果。預設情況下，會繼承父 Navbar 的 sliding 屬性 | |
Navbar 方法
| <Navbar> 方法 | |
|---|---|
| .hide(animate) | 隱藏 navbar |
| .show(animate) | 顯示 navbar |
| .size() | 調整 navbar 大小 |
Navbar 事件
| 事件 | 說明 |
|---|---|
| <Navbar> 事件 | |
| backClick clickBack | 在點選 navbar 後向連結後，將會觸發事件 |
| navbarHide | 當 Navbar 變成隱藏時，將會觸發事件 |
| navbarShow | 當 Navbar 可見時觸發事件 |
| navbarCollapse | 當具有大標題的 Navbar 摺疊時觸發事件（從大型 navbar 到一般 navbar） |
| navbarExpand | 當具有大標題的 Navbar 展開時觸發事件（從一般 navbar 到大型 navbar） |
| <NavLeft> 事件 | |
| backClick clickBack | 在點選 navbar 後向連結後，將會觸發事件 |
Navbar 插槽
Navbar React 元件 (<Navbar>) 有額外的插槽供自訂元素使用
default- 元素將插入為<div class="navbar-inner">元素的子元素before-inner- 元素將插入在<div class="navbar-inner">元素的正前方after-inner- 元素將插入在<div class="navbar-inner">元素的正後方left- 元素將插入在 navbar 的左元素中right- 元素將插入在 navbar 的右元素中title- 元素將插入在 navbar 的標題元素中title-large- 元素將插入在 navbar 的大標題文字元素中
<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>