スポンサースポンサーになる

Navbar Svelteコンポーネント

Navbarは、画面上部の固定された（固定レイアウトとスルーレイアウトタイプを使用）領域で、ページタイトルとナビゲーション要素が含まれています。

Navbar Svelteコンポーネントは、Navbarコンポーネントを表します。

以下のコンポーネントが含まれています。

プロパティタイプデフォルト説明
<Navbar> プロパティ
title文字列Navbarタイトル
subtitle文字列Navbarサブタイトル
backLinkブール値
文字列		(string値が指定されている場合)テキスト付きのバックリンクを追加します。
backLinkUrl文字列カスタムバックリンクURL
backLinkForceブール値falseページを強制的に読み込み、履歴内の前のページを無視します。
backLinkShowTextブール値デフォルトでは、MDテーマではバックリンクテキストは無効です。
slidingブール値trueナビゲーション要素の「スライド」効果を有効にします。
outlineブール値trueiOSテーマにNavbar下部の薄いボーダー（ヘアライン）を追加します。
hiddenブール値falseNavbarを非表示にします。
innerClass文字列navbar-inner要素に追加のクラスを追加します。
innerClassName文字列innerClassプロパティのエイリアス
largeブール値大きなタイトル付きのNavbarを有効にします。
transparentブール値Navbarを透明にします。大きなNavbarを透明にするためにlargeプロパティと組み合わせて使用できます。
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> メソッド
.hide(animate)Navbarを非表示にします。
.show(animate)Navbarを表示します。
.size()Navbarのサイズを変更します。
イベント説明
<Navbar> イベント
backClick
clickBack		Navbarのバックリンクをクリックした後にトリガーされるイベントです。
navbarHideNavbarが非表示になったときにトリガーされるイベントです。
navbarShowNavbarが表示されたときにトリガーされるイベントです。
navbarCollapse大きなタイトル付きのNavbarが折り畳まれたときにトリガーされるイベントです（大きなNavbarから通常のNavbarへ）。
navbarExpand大きなタイトル付きのNavbarが展開されたときにトリガーされるイベントです（通常のNavbarから大きなNavbarへ）。
<NavLeft> イベント
backClick
clickBack		Navbarのバックリンクをクリックした後にトリガーされるイベントです。

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>

3つの部分すべて

<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>
このドキュメントを改善する
このページで