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 のテンプレートに次のコードを追加して、タイトルのみの基本的な IgrNavbar を表示できます。

<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 パーツを公開し、スタイルを完全に制御できるようにします。

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 リファレンス

その他のリソース

• Ignite UI for React フォーラム (英語)
• Ignite UI for React GitHub (英語)