- 开始使用
- Svelte 组件
Navbar Svelte 组件
Navbar 是屏幕顶部的一个固定区域（具有 Fixed 和 Through 布局类型），包含页面标题和导航元素。
Navbar Svelte 组件表示导航栏组件。
Navbar 组件
包含以下组件：
NavbarNavLeftNavRightNavTitleNavTitleLarge
Navbar 属性
| 属性 | 类型 | 默认 | 描述 |
|---|---|---|---|
| <Navbar> 属性 | |||
| title | 字符串 | Navbar 标题 | |
| subtitle | 字符串 | Navbar 子标题 | |
| backLink | 布尔值 字符串 | 添加带文本的返回链接（如果string值已指定） | |
| backLinkUrl | 字符串 | 自定义返回链接 URL | |
| backLinkForce | 布尔值 | false | 强制页面加载并忽略历史记录中的上一页 |
| backLinkShowText | 布尔值 | 默认情况下，返回链接文本在 MD 主题中禁用 | |
| sliding | 布尔值 | true | 为导航元素启用“滑动”效果 |
| outline | 布尔值 | true | 为 iOS 主题的导航栏添加底部细边框（细线） |
| hidden | 布尔值 | false | 使导航栏隐藏 |
| innerClass | 字符串 | 为navbar-inner元素之前插入元素 | |
| innerClassName | 字符串 | 别名innerClassprop | |
| large | 布尔值 | 启用带大标题的导航栏 | |
| transparent | 布尔值 | 使导航栏透明。可与largeprop 结合使用，以使大导航栏透明。 | |
| titleLarge | 字符串 | 导航栏大标题文本。如果未指定，则等于titleprop | |
| <NavLeft> 属性 | |||
| backLink | 布尔值 字符串 | 添加带文本的返回链接（如果字符串值已指定） | |
| backLinkUrl | 字符串 | 自定义返回链接 URL | |
| backLinkForce | 布尔值 | false | 强制页面加载并忽略历史记录中的上一页 |
| backLinkShowText | 布尔值 | 默认情况下，返回链接文本在 MD 主题中禁用 | |
| sliding | 布尔值 | 启用“滑动”效果。默认情况下继承sliding父级Navbar | |
| <NavTitle> 属性 | |||
| title | 字符串 | 指定元素内部标题文本（如果没有子元素则生效） | |
| subtitle | 字符串 | 子标题文本 | |
| sliding | 布尔值 | 启用“滑动”效果。默认情况下继承sliding父级Navbar | |
| <NavRight> 属性 | |||
| sliding | 布尔值 | 启用“滑动”效果。默认情况下继承sliding父级Navbar | |
Navbar 方法
| <Navbar> 方法 | |
|---|---|
| .hide(animate) | 隐藏导航栏 |
| .show(animate) | 显示导航栏 |
| .size() | 调整导航栏大小 |
Navbar 事件
| 事件 | 描述 |
|---|---|
| <Navbar> 事件 | |
| backClick clickBack | 点击导航栏返回链接后触发的事件 |
| navbarHide | 导航栏隐藏时触发的事件 |
| navbarShow | 导航栏可见时触发的事件 |
| navbarCollapse | 带大标题的导航栏折叠时触发的事件（从大导航栏到普通导航栏） |
| navbarExpand | 带大标题的导航栏展开时触发的事件（从普通导航栏到大导航栏） |
| <NavLeft> 事件 | |
| backClick clickBack | 点击导航栏返回链接后触发的事件 |
Navbar 插槽
Navbar 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>