Web Components Navbar の概要

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

    Web Components Navbar の例

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

    EXAMPLE
    TS
    HTML
    CSS
    Edit in:

    このサンプルが気に入りましたか? 完全な Ignite UI for Web Componentsツールキットにアクセスして、すばやく独自のアプリの作成を開始します。無料でダウンロードできます。

    使用方法

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

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

defineComponents(IgcNavbarComponent);
ts

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

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

    <igc-navbar>Navigation Title</igc-navbar>
html
    Ignite UI for Web Components | CTA Banner

    コンテンツ

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

    EXAMPLE
    Edit in:

    スタイル設定

    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);;
}
css

    以下は結果です:

    EXAMPLE
    TS
    HTML
    index.css
    NavbarStyling.css
    Edit in:

    API リファレンス

    その他のリソース