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

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

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

    コンテンツ

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

    スタイル設定

    Navigation Bar コンポーネントは、いくつかの CSS パーツ (basestartmiddle および 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 リファレンス

    Navbar の API の詳細については、次のリンクを参照してください:

    使用したその他のコンポーネントとディレクティブ:

    その他のリソース

    コミュニティに参加して新しいアイデアをご提案ください。

    API メンバー