Web Components Navbar の概要

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

    Web Components Navbar の例

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

    使用方法

    まず、次のコマンドを実行して Ignite UI for Web Components をインストールする必要があります。

    npm install igniteui-webcomponents

    import { defineComponents, IgcNavbarComponent } from 'igniteui-webcomponents';

defineComponents(IgcNavbarComponent);

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

    次に、IgcNavbarComponent のテンプレートに次のコードを追加して、タイトルのみの基本的な IgcNavbarComponent を表示できます。

    <igc-navbar>Navigation Title</igc-navbar>

    コンテンツ

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

    <igc-navbar>
    <igc-icon name="home" slot="start"></igc-icon>
    <h2>Sample App</h2>
    <igc-icon name="search" slot="end"></igc-icon>
    ...
</igc-navbar>

    スタイル設定

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

    その他のリソース