Navbar Reactコンポーネント

    Navbarは、画面上部の固定された(FixedとThroughのレイアウトタイプを持つ)領域で、Page titleとNavigation要素を含みます。

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

    Navbarコンポーネント

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

    • Navbar (ナビバー)
    • NavLeft (ナビレフト)
    • ナビ右
    • ナビタイトル
    • ナビタイトル(大

    ナビゲーションバーのプロパティ

    PropTypeDefaultDescription
    <Navbar> properties
    titlestringナブバーのタイトル
    subtitlestringナブバーのサブタイトル
    backLinkboolean
    string
    テキストによるバックリンクの追加 (string 値が指定された場合)
    backLinkUrlstringカスタムバックリンクURL
    backLinkForcebooleanfalse履歴の前のページを無視してページを強制的にロードする
    backLinkShowTextbooleanMDテーマではデフォルトでバックリンクテキストを無効にする
    slidingbooleantruenav要素の "スライド "効果を有効にする
    noShadowbooleanfalseMaterialテーマのシャドウレンダリングを無効にする
    noHairlinebooleanfalseiOSテーマで、ナビバー下部の細いボーダー(ヘアライン)を無効にする
    hiddenbooleanfalseナビバーを非表示にする
    innerClassstringnavbar-inner` 要素に追加クラスを追加します。
    innerClassNamestringinnerClass` プロップのエイリアス
    largeboolean大きなタイトルのナビバーを有効にする
    transparentbooleanナビバーを透明にします。大きなナビバーを透明にするために large プロップに追加して使用できます。
    titleLargestringナビバーの大きなタイトルテキストです。指定されていない場合は、title プロップと同じになります。
    <NavLeft> properties
    backLinkboolean
    string
    テキストでバックリンクを追加します(文字列値が指定された場合
    backLinkUrlstringカスタムバックリンクURL
    backLinkForcebooleanfalse履歴の前のページを無視してページを強制的にロードします。
    backLinkShowTextbooleanMDテーマのデフォルトでは、バックリンクテキストは無効です。
    slidingbooleanスライド」効果を有効にします。デフォルトでは、親の Navbarsliding プロパティーを継承します。
    <NavTitle> properties
    titlestring要素の内側のタイトルテキストを指定します (子要素がない場合に影響します)
    subtitlestringサブタイトルを指定します。
    slidingbooleanスライディング効果を有効にします。デフォルトでは親の Navbarsliding プロップを継承します。
    <NavRight> properties
    slidingbooleanスライディング効果を有効にします。デフォルトでは、親の Navbarsliding プロップを継承します。

    ナンバーメソッド

    <Navbar> methods
    .hide(animate)ナビバーを隠す
    .show(animate)ナビバーの表示
    .size()ナビバーのサイズ

    ナビバーのイベント

    EventDescription
    <Navbar> events
    backClick
    clickBack
    ナビバーのバックリンクをクリックするとイベントが発生します。
    navbarHideナビバーが非表示になるとイベントが発生する
    navbarShowイベントはナビバーが表示されたときに発生します。
    navbarCollapse大きなタイトルのナビバーが折りたたまれた時にイベントが発生します(大きなナビバーから通常のナビバーへ
    navbarExpand大きなタイトルのナビバーが拡張されたとき(通常のナビバーから大きなナビバーに)にイベントが発生する
    <NavLeft> events
    backClick
    clickBack
    ナビバーのバックリンクをクリックするとイベントが発生します。

    ナビバーのスロット

    NavbarのReactコンポーネント(<Navbar>)には、カスタム要素用の追加スロットがあります。

    • default - 要素は <div class="navbar-inner"> 要素の子として挿入されます。
    • before-inner - 要素は <div class="navbar-inner"> 要素の直前に挿入されます。
    • after-inner - 要素は、
    • left - 要素は、ナビバーの左要素に挿入されます。
    • right - 要素はナビバーの右要素に挿入されます。
    • title - ナビバーのタイトル要素に挿入される要素です。
    • title-large - 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>
    
    {/* or */}
    
    <Navbar title="My App" backLink="Back">
      <Link slot="right" icon="icon-bars" panelOpen="right"></Link>
    </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>