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