React Navbar の概要

    React IgrNavbar は、アプリ内の現在の位置をユーザーに通知します。ナビゲーション バーは、検索やお気に入りなどのクイック アクションへのリンクを提供することもでき、ユーザーが無効なルートや状態に移動しようとせずに、アプリケーション内をスムーズにナビゲートできるようにします。ナビゲーション バーは、それが配置されているコンテナの上部にあります。

    React Navbar の例

    次の例は、アイコンとテキスト ヘッダーのある IgrNavbar を表しています:

    使用方法

    IgrNavbar を使用する前に、次のように登録する必要があります:

    Ignite UI for React の完全な概要については、作業の開始トピックを参照してください。

    まず、次のコマンドを実行して、対応する Ignite UI for React npm パッケージをインストールする必要があります:

    npm install igniteui-react

    次に、以下のように、IgrNavbar と必要な CSS をインポートする必要があります:

    import { IgrNavbar } from 'igniteui-react';
import 'igniteui-webcomponents/themes/light/bootstrap.css';

    <IgrNavbar>
    <span>Navigation Title</span>
</IgrNavbar>

    コンテンツ

    IgrNavbar コンポーネントを強化するには、IgrIcon またはその他のコンポーネントを start 位置または end 位置のコンテンツとして追加し、ユーザーがバーから直接主要な位置に移動できるようにします。

     <IgrNavbar>
    <div slot="start">
        <IgrIcon name="home" collection="material" />
    </div>
    <h2>Sample App</h2>
    <div slot="end">
        <IgrIcon name="search" collection="material" />
    </div>
    ...
</IgrNavbar>

    スタイル設定

    NavBar コンポーネントはいくつかの CSS パーツを公開し、スタイルを完全に制御できるようにします。

    名前 説明
    base タナビゲーション バーの基本ラッパー。
    start 左揃えのアイコン コンテナー。
    middle ナビゲーション バーのタイトル コンテナー。
    end 右揃えのアクション アイコン コンテナー。 
    igc-icon {
  color: var(--ig-primary-500);
}

igc-navbar {
  background-color: var(--ig-secondary-200);
}

igc-navbar::part(middle) {
  font-family: Titillium Web, sans-serif;
  color: var(--ig-primary-500);;
}

    以下は結果です:

    API リファレンス

    その他のリソース