Web Components Navigation Drawer (ナビゲーション ドロワー) の概要

    Web Components Navigation Drawer は、コンテンツ内で展開または縮小されることができるサイド ナビゲーションを提供します。ミニ バージョンが閉じている場合もナビゲーションへのクイック アクセスを提供します。そのコンテンツは完全にカスタマイズ可能であると同時に、デフォルトのメニュー項目のスタイルも提供します。

    Web Components Navigation Drawer の例

    使用方法

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

    npm install igniteui-webcomponents
    
    import { defineComponents, IgcNavDrawerComponent, IgcNavDrawerHeaderItemComponent, IgcNavDrawerItemComponent } from 'igniteui-webcomponents';
    
    defineComponents(IgcNavDrawerComponent, IgcNavDrawerHeaderItemComponent, IgcNavDrawerItemComponent);
    

    IgcNavDrawerComponent の使用を開始する最も簡単な方法は次のとおりです:

    <igc-nav-drawer open="true">
        <igc-nav-drawer-header-item>
            Sample Drawer
        </igc-nav-drawer-header-item>
        <igc-nav-drawer-item>
            <igc-icon slot="icon" name="home"></igc-icon>
            <span slot="content">Home</span>
        </igc-nav-drawer-item>
        <igc-nav-drawer-item>
            <igc-icon slot="icon" name="search"></igc-icon>
            <span slot="content">Search</span>
        </igc-nav-drawer-item>
    </igc-nav-drawer>    
    

    以下は結果です:

    ドロワーには任意のコンテンツを提供できますが、IgcNavDrawerItemComponent が定義済みのスタイル設定を項目に適用します。

    コンポーネントを少し強化するために、IgcNavbarComponent と組み合わせて使用できます。このようにして、より完成された外観を実現し、ドロワーの方法を使用できます。次の例でこれを見てみましょう:

    <igc-navbar>
      <igc-icon slot="start" name="menu" id="menu"></igc-icon>
      <h2>Home</h2>
    </igc-navbar>
    
    <igc-nav-drawer id="navDrawer">
        <igc-nav-drawer-header-item>
            Sample Drawer
        </igc-nav-drawer-header-item>
        <igc-nav-drawer-item>
            <igc-icon slot="icon" name="home"></igc-icon>
            <span slot="content">Home</span>
        </igc-nav-drawer-item>
        <igc-nav-drawer-item>
            <igc-icon slot="icon" name="search"></igc-icon>
            <span slot="content">Search</span>
        </igc-nav-drawer-item>
    </igc-nav-drawer>    
    

    また、すべての position の値を表示するためにいくつかのラジオ ボタンを追加しましょう。このように、1 つが選択されるたびに、ドロワーの位置を変更します。

    // ...
    import { defineComponents, IgcNavDrawerComponent, IgcNavDrawerHeaderItemComponent, IgcNavDrawerItemComponent,
      IgcRadioComponent, IgcRadioGroupComponent } from 'igniteui-webcomponents';
    
    defineComponents(IgcNavDrawerComponent, IgcNavDrawerHeaderItemComponent, IgcNavDrawerItemComponent,
        IgcRadioComponent, IgcRadioGroupComponent);
    this.navDrawer = document.getElementById('navDrawer') as IgcNavDrawerComponent;
    this.radioGroup = document.getElementById('radio-group') as IgcRadioGroupComponent;
    this.radioGroup.addEventListener('click', (radio: any) => {
        this.navDrawer.position = radio.target.value;
    });
    
    <igc-radio-group id="radio-group" alignment="horizontal">
        <igc-radio name="position" value="start" label-position="after" checked>Start</igc-radio>
        <igc-radio name="position" value="end" label-position="after">End</igc-radio>
        <igc-radio name="position" value="top" label-position="after">Top</igc-radio>
        <igc-radio name="position" value="bottom" label-position="after">Bottom</igc-radio>
    </igc-radio-group>
    

    そして最後に、Navigation Drawer を開閉する方法が必要です。これを実現するにはいくつかの方法がありますが、この例のために、次のことを行います:

    // ...
    const menu = document.getElementById('menu');
    const navDrawer = document.querySelector('igc-nav-drawer') as IgcNavDrawerComponent;
    
    menu!.addEventListener('click', () => {
        navDrawer.show();
    })
    
    document.getElementById('root')!.onclick = (e) => {
        if(e.target != document.getElementById('navDrawer')) {
            navDrawer.hide();
        }
    }
    

    すべてがうまくいけば、コンポーネントは次のようになります:

    ミニ バリアント

    ミニ バリアントを使用する場合、Navigation Drawer を閉じる代わりに幅を変更します。アイコンだけを残して、いつでも利用できるクイック ナビゲーションを維持するために使用されます。これを実現するには、ドロワーの mini スロットを設定するだけです。

    <igc-nav-drawer position="start">
        <igc-nav-drawer-header-item>Sample Drawer</igc-nav-drawer-header-item>
        <igc-nav-drawer-item>
            <igc-icon slot="icon" name="home"></igc-icon>
            <span slot="content">Home</span>
        </igc-nav-drawer-item>
        <igc-nav-drawer-item>
            <igc-icon slot="icon" name="search"></igc-icon>
            <span slot="content">Search</span>
        </igc-nav-drawer-item>
        <div slot="mini">
            <igc-nav-drawer-item>
                <igc-icon slot="icon" name="home"></igc-icon>
            </igc-nav-drawer-item>
            <igc-nav-drawer-item>
                <igc-icon slot="icon" name="search"></igc-icon>
            </igc-nav-drawer-item>
        </div>
    </igc-nav-drawer>    
    

    以下は結果です:

    Navigation Drawer コンポーネントは、basemainmini など、いくつかの CSS パーツを公開します。Navigation Drawer Item コンポーネントは、ベース、アイコン、コンテンツの 3 つの CSS パーツも公開し、スタイルを完全に制御できるようにします。

    igc-nav-drawer::part(base) {
        background: #2d313a;
    }
    
    igc-nav-drawer-item::part(base) {
        color: #fff;
    }
    
    igc-nav-drawer-item::part(base):hover {
        background-color: #3D4149;
    }
    
    igc-nav-drawer-item[active]::part(base) {
        background: #f3c03e;
        color: #2c2c2c
    }
    
    igc-nav-drawer-header-item {
        color: #f3c03e
    }
    

    API リファレンス

    使用したその他の Web Components:

    その他のリソース