导航栏 Svelte 组件
导航栏是屏幕顶部的一个固定区域（带有固定和贯穿布局类型），包含页面标题和导航元素。
导航栏 Svelte 组件表示 导航栏 组件。
导航栏组件
包含以下组件
导航栏NavLeftNavRightNavTitleNavTitleLarge
导航栏属性
| 属性 | 类型 | 默认值 | 描述 |
|---|---|---|---|
| <Navbar> 属性 | |||
| title | 字符串 | 导航栏标题 | |
| subtitle | 字符串 | 导航栏副标题 | |
| backLink | 布尔值 字符串 | 添加带文本的后退链接（如果指定了 字符串 值） | |
| backLinkUrl | 字符串 | 自定义后退链接 URL | |
| backLinkForce | 布尔值 | false | 强制页面加载并忽略历史记录中的前一页 |
| backLinkShowText | 布尔值 | 默认情况下，MD 主题禁用后退链接文本 | |
| sliding | 布尔值 | true | 为导航元素启用“滑动”效果 |
| outline | 布尔值 | true | 为 iOS 主题添加导航栏底部细边框（发际线） |
| hidden | 布尔值 | false | 使导航栏隐藏 |
| innerClass | 字符串 | 向 navbar-inner 元素添加附加类 | |
| innerClassName | 字符串 | innerClass 属性的别名 | |
| large | 布尔值 | 启用带有大标题的导航栏 | |
| transparent | 布尔值 | 使导航栏透明。 可以与 large 属性结合使用，以使大型导航栏透明。 | |
| titleLarge | 字符串 | 导航栏大标题文本。 如果未指定，则将等于 title 属性 | |
| <NavLeft> 属性 | |||
| backLink | 布尔值 字符串 | 添加带文本的后退链接（如果指定了字符串值） | |
| backLinkUrl | 字符串 | 自定义后退链接 URL | |
| 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>