React Navbar の概要

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

    React Navbar の例

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

    使用方法

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

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

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

    npm install igniteui-react

    次に、以下のように、IgrNavbar とそれに必要な CSS をインポートし、そのモジュールを登録する必要があります:

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

IgrNavbarModule.register();

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

    コンテンツ

    次のサンプルに示すように、Start スロットと End スロットを使用して IgrNavbar にいくつかの IgrIcon 要素を追加できます。

    スタイル設定

    Navigation Bar コンポーネントは、いくつかの CSS パーツ (base、start、middle および end) を公開して、スタイルを完全に制御できるようにします。

    igc-icon {
    color: currentColor;
}

igc-navbar {
    background-color: #232121
}

igc-navbar::part(start) {
    color: #f23269;
}

igc-navbar::part(middle) {
    font-family: Titillium Web,sans-serif;
    color: #e9e8ea
}

igc-navbar::part(end) {
    color: #e9e8ea
}

    以下は結果です:

    API リファレンス

    その他のリソース