Navbar Svelte 组件

Navbar 是屏幕顶部的一个固定区域（具有 Fixed 和 Through 布局类型），包含页面标题和导航元素。

Navbar Svelte 组件表示导航栏组件。

包含以下组件：

属性类型默认描述
<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> 方法
.hide(animate)隐藏导航栏
.show(animate)显示导航栏
.size()调整导航栏大小
事件描述
<Navbar> 事件
backClick
clickBack		点击导航栏返回链接后触发的事件
navbarHide导航栏隐藏时触发的事件
navbarShow导航栏可见时触发的事件
navbarCollapse带大标题的导航栏折叠时触发的事件（从大导航栏到普通导航栏）
navbarExpand带大标题的导航栏展开时触发的事件（从普通导航栏到大导航栏）
<NavLeft> 事件
backClick
clickBack		点击导航栏返回链接后触发的事件

Navbar Svelte 组件（<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>

带大标题

<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>
改进此文档
在本页上