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

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

React Navigation Drawer の例

このサンプルは、IgrNavDrawer コンポーネントを作成する方法を示しています。

EXAMPLE

TSX

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import { IgrNavDrawer, IgrNavDrawerHeaderItem, IgrNavDrawerItem, IgrIcon, IgrNavDrawerModule, IgrIconModule,
         IgrIconButton, IgrIconButtonModule } from "@infragistics/igniteui-react";
import 'igniteui-webcomponents/themes/light/bootstrap.css';

IgrNavDrawerModule.register();
IgrIconModule.register();
IgrIconButtonModule.register();

export default class NavDrawerAddDrawerItems extends React.Component<any, any> {
    private navDrawer: IgrNavDrawer;

    constructor(props: any) {
        super(props);        
        this.iconRef = this.iconRef.bind(this);
        this.onNavDrawerClick = this.onNavDrawerClick.bind(this);
        this.toggleDrawer = this.toggleDrawer.bind(this);
        this.navDrawerRef = this.navDrawerRef.bind(this);
    }

    public render(): JSX.Element {
        return (
            <div className="container sample">
                  <IgrIconButton style={{margin: "10px"}} ref={this.iconButtonRef} 
                        clicked={this.toggleDrawer}
                        name="menu" 
                        collection="material"
                        variant="flat">
                    </IgrIconButton>
                <div onClick={this.onNavDrawerClick}>
                    <IgrNavDrawer open={true} ref={this.navDrawerRef}>
                        <IgrNavDrawerHeaderItem key="header">
                            <span key="sHeader">Sample Drawer</span>
                        </IgrNavDrawerHeaderItem>

                        <IgrNavDrawerItem key="home">
                            <div slot="icon" key="iHome">
                                <IgrIcon ref={this.iconRef} name="home" collection="material" />
                            </div>
                            <span slot="content" key="sHome">Home</span>
                        </IgrNavDrawerItem>

                        <IgrNavDrawerItem key="search">
                            <div slot="icon" key="iSearch">
                                <IgrIcon name="search" collection="material" />
                            </div>
                            <span slot="content" key="sSearch">Search</span>
                        </IgrNavDrawerItem>
                    </IgrNavDrawer>
                </div>
            </div>
        );
    }

    public iconRef(icon: IgrIcon){
        if (!icon) { return; }

        const searchIcon = '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"/></svg>';
        const homeIcon = '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z"/></svg>';

        icon.registerIconFromText("home", homeIcon, "material");
        icon.registerIconFromText("search", searchIcon, "material");        
    }

    public iconButtonRef(iconButton: IgrIconButton){
        if (!iconButton) { return; }
        const menuIcon = '<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24"><path d="M120-240v-80h720v80H120Zm0-200v-80h720v80H120Zm0-200v-80h720v80H120Z"/></svg>';
        iconButton.registerIconFromText("menu", menuIcon, "material");     
    }

    public navDrawerRef(navDrawer: IgrNavDrawer){
        if (!navDrawer) { return; }
        this.navDrawer = navDrawer;
    }

    public toggleDrawer() {
        if (this.navDrawer) {
            this.navDrawer.toggle();
        }
    }

    public onNavDrawerClick(e: any) {
        const drawerItem: any = e.target.closest('igc-nav-drawer-item') ??
                                (e.target.parentElement?.closest('igc-nav-drawer-item') ?? 
                                null)

        if (!drawerItem) { return; }

        drawerItem.active = true;
        const navDrawer = drawerItem.parentElement;
        Array.from(navDrawer.querySelectorAll('igc-nav-drawer-item'))
             .filter((item: any) => item !== drawerItem)
             .forEach((child: any) => child.active = false);
    }

}

// rendering above class to the React DOM
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<NavDrawerAddDrawerItems/>);
tsxコピー

Edit in: Codesandbox

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

使用方法

まず、次のコマンドを実行して、対応する Ignite UI for React npm パッケージをインストールする必要があります:

npm install igniteui-react
cmd

次に、以下のように、IgrNavDrawer とそれに必要な CSS をインポートし、そのモジュールを登録する必要があります:

import { IgrNavDrawerModule, IgrNavDrawer, IgrNavDrawerHeaderItem, IgrNavDrawerItem } from 'igniteui-react';
import 'igniteui-webcomponents/themes/light/bootstrap.css';

IgrNavDrawerModule.register();
tsx

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

Navigation Drawer 項目の追加

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

<IgrNavDrawer open={true}>
    <IgrNavDrawerHeaderItem>
        <span>Sample Drawer</span>
    </IgrNavDrawerHeaderItem>
    <IgrNavDrawerItem>
        <div slot="icon">
            <IgrIcon name="home" collection="material" />
        </div>
        <span slot="content">Home</span>
    </IgrNavDrawerItem>
    <IgrNavDrawerItem>
        <div slot="icon">
            <IgrIcon name="search" collection="material" />
        </div>
        <span slot="content">Search</span>
    </IgrNavDrawerItem>
</IgrNavDrawer>
tsx

以下は結果です:

EXAMPLE

TSX

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import { IgrNavDrawer, IgrNavDrawerHeaderItem, IgrNavDrawerItem, IgrIcon, IgrNavDrawerModule, IgrIconModule,
         IgrIconButton, IgrIconButtonModule } from "@infragistics/igniteui-react";
import 'igniteui-webcomponents/themes/light/bootstrap.css';

IgrNavDrawerModule.register();
IgrIconModule.register();
IgrIconButtonModule.register();

export default class NavDrawerAddDrawerItems extends React.Component<any, any> {
    private navDrawer: IgrNavDrawer;

    constructor(props: any) {
        super(props);        
        this.iconRef = this.iconRef.bind(this);
        this.onNavDrawerClick = this.onNavDrawerClick.bind(this);
        this.toggleDrawer = this.toggleDrawer.bind(this);
        this.navDrawerRef = this.navDrawerRef.bind(this);
    }

    public render(): JSX.Element {
        return (
            <div className="container sample">
                  <IgrIconButton style={{margin: "10px"}} ref={this.iconButtonRef} 
                        clicked={this.toggleDrawer}
                        name="menu" 
                        collection="material"
                        variant="flat">
                    </IgrIconButton>
                <div onClick={this.onNavDrawerClick}>
                    <IgrNavDrawer open={true} ref={this.navDrawerRef}>
                        <IgrNavDrawerHeaderItem key="header">
                            <span key="sHeader">Sample Drawer</span>
                        </IgrNavDrawerHeaderItem>

                        <IgrNavDrawerItem key="home">
                            <div slot="icon" key="iHome">
                                <IgrIcon ref={this.iconRef} name="home" collection="material" />
                            </div>
                            <span slot="content" key="sHome">Home</span>
                        </IgrNavDrawerItem>

                        <IgrNavDrawerItem key="search">
                            <div slot="icon" key="iSearch">
                                <IgrIcon name="search" collection="material" />
                            </div>
                            <span slot="content" key="sSearch">Search</span>
                        </IgrNavDrawerItem>
                    </IgrNavDrawer>
                </div>
            </div>
        );
    }

    public iconRef(icon: IgrIcon){
        if (!icon) { return; }

        const searchIcon = '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"/></svg>';
        const homeIcon = '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z"/></svg>';

        icon.registerIconFromText("home", homeIcon, "material");
        icon.registerIconFromText("search", searchIcon, "material");        
    }

    public iconButtonRef(iconButton: IgrIconButton){
        if (!iconButton) { return; }
        const menuIcon = '<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24"><path d="M120-240v-80h720v80H120Zm0-200v-80h720v80H120Zm0-200v-80h720v80H120Z"/></svg>';
        iconButton.registerIconFromText("menu", menuIcon, "material");     
    }

    public navDrawerRef(navDrawer: IgrNavDrawer){
        if (!navDrawer) { return; }
        this.navDrawer = navDrawer;
    }

    public toggleDrawer() {
        if (this.navDrawer) {
            this.navDrawer.toggle();
        }
    }

    public onNavDrawerClick(e: any) {
        const drawerItem: any = e.target.closest('igc-nav-drawer-item') ??
                                (e.target.parentElement?.closest('igc-nav-drawer-item') ?? 
                                null)

        if (!drawerItem) { return; }

        drawerItem.active = true;
        const navDrawer = drawerItem.parentElement;
        Array.from(navDrawer.querySelectorAll('igc-nav-drawer-item'))
             .filter((item: any) => item !== drawerItem)
             .forEach((child: any) => child.active = false);
    }

}

// rendering above class to the React DOM
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<NavDrawerAddDrawerItems/>);
tsxコピー

Edit in: Codesandbox

Navbar の統合

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

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

<IgrNavbar>
    <div slot="start">
        <IgrIcon name="menu" collection="material"/>
    </div>
    <h2>Home</h2>
</IgrNavbar>

<IgrNavDrawer>
    <IgrNavDrawerHeaderItem>
        <span>Sample Drawer</span>
    </IgrNavDrawerHeaderItem>
    <IgrNavDrawerItem>
        <div slot="icon">
            <IgrIcon name="home" collection="material" />
        </div>
        <span slot="content">Home</span>
    </IgrNavDrawerItem>
    <IgrNavDrawerItem>
        <div slot="icon">
            <IgrIcon name="search" collection="material" />
        </div>
        <span slot="content">Search</span>
    </IgrNavDrawerItem>
</IgrNavDrawer>
tsx

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

<IgrRadioGroup alignment="horizontal">
    <IgrRadio value="start" labelPosition="after" checked={true} change={this.onRadioChange}>
        <span>Start</span>
    </IgrRadio>
    <IgrRadio value="end" labelPosition="after" change={this.onRadioChange}>
        <span>End</span>
    </IgrRadio>
    <IgrRadio value="top" labelPosition="after" change={this.onRadioChange}>
        <span>Top</span>
    </IgrRadio>
    <IgrRadio value="bottom" labelPosition="after" change={this.onRadioChange}>
        <span>Bottom</span>
    </IgrRadio>
</IgrRadioGroup>

<IgrNavDrawer position={this.state.drawerPosition} />

public onRadioChange(e: any) {
    if (e.checked == true) {
        this.setState({ drawerPosition: e.value });
    }
}
tsx

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

public onMenuIconClick() {
    if (this.navDrawerRef) {
        this.navDrawerRef.show();
    }
}
tsx

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

EXAMPLE

TSX

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import { IgrNavbar, IgrNavDrawer, IgrNavDrawerHeaderItem, IgrNavDrawerItem, IgrIcon, IgrRadioGroup, IgrRadio, IgrNavDrawerModule, IgrNavbarModule, IgrRadioGroupModule, IgrRadioModule, IgrIconModule } from "@infragistics/igniteui-react";
import 'igniteui-webcomponents/themes/light/bootstrap.css';

IgrNavDrawerModule.register();
IgrNavbarModule.register();
IgrIconModule.register();
IgrRadioGroupModule.register();
IgrRadioModule.register();

export default class NavDrawerAddPositionsNavbar extends React.Component<any, any> {

    public navDrawer: IgrNavDrawer;

    constructor(props: any) {
        super(props);

        this.state = { drawerPosition: "start", title: "Home" };

        this.iconRef = this.iconRef.bind(this);
        this.navDrawerRef = this.navDrawerRef.bind(this);
        this.onMenuIconClick = this.onMenuIconClick.bind(this);
        this.onNavDrawerClick = this.onNavDrawerClick.bind(this);
        this.onRadioChange = this.onRadioChange.bind(this);
    }

    public render(): JSX.Element {
        return (
            <div className="container sample">
                <div onClick={this.onNavDrawerClick}>
                    <IgrNavDrawer ref={this.navDrawerRef} position={this.state.drawerPosition}>
                        <IgrNavDrawerHeaderItem key="header">
                            <span key="sHeader">Sample Drawer</span>
                        </IgrNavDrawerHeaderItem>

                        <IgrNavDrawerItem key="home" active>
                            <div slot="icon" key="iHome">
                                <IgrIcon ref={this.iconRef} name="home" collection="material" />
                            </div>
                            <span slot="content" key="sHome">Home</span>
                        </IgrNavDrawerItem>

                        <IgrNavDrawerItem key="search">
                            <div slot="icon" key="iSearch">
                                <IgrIcon name="search" collection="material" />
                            </div>
                            <span slot="content" key="sSearch">Search</span>
                        </IgrNavDrawerItem>
                    </IgrNavDrawer>
                </div>
                <div>
                    <IgrRadioGroup alignment="horizontal" style={{ marginBottom: '10px' }}>
                        <IgrRadio name="position" value="start" labelPosition="after" checked={true} change={this.onRadioChange} key="start">
                            <span key="sStart">Start</span>
                        </IgrRadio>
                        <IgrRadio name="position" value="end" labelPosition="after" change={this.onRadioChange} key="end">
                            <span key="sEnd">End</span>
                        </IgrRadio>
                        <IgrRadio name="position" value="top" labelPosition="after" change={this.onRadioChange} key="top">
                            <span key="sTop">Top</span>
                        </IgrRadio>
                        <IgrRadio name="position" value="bottom" labelPosition="after" change={this.onRadioChange} key="bottom">
                            <span key="sBottom">Bottom</span>
                        </IgrRadio>
                    </IgrRadioGroup>
                    <IgrNavbar>
                        <div slot="start" onClick={this.onMenuIconClick} key="start">
                            <IgrIcon name="menu" collection="material" />
                        </div>
                        <h2 key="navHome">{this.state.title}</h2>
                    </IgrNavbar>
                </div>
            </div>
        );
    }

    public iconRef(icon: IgrIcon) {
        if (!icon) { return; }

        const searchIcon = '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"/></svg>';
        const homeIcon = '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z"/></svg>';
        const menuIcon = '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z"/></svg>';

        icon.registerIconFromText("home", homeIcon, "material");
        icon.registerIconFromText("search", searchIcon, "material");
        icon.registerIconFromText("menu", menuIcon, "material");
    }

    public onMenuIconClick() {
        if (this.navDrawer) {
            this.navDrawer.show();
        }
    }

    public onNavDrawerClick(e: any) {
        const drawerItem: any = e.target.closest('igc-nav-drawer-item') ??
                                (e.target.parentElement?.closest('igc-nav-drawer-item') ??
                                null)

        if (!drawerItem) { return; }

        drawerItem.active = true;
        const navDrawer = drawerItem.parentElement;
        Array.from(navDrawer.querySelectorAll('igc-nav-drawer-item'))
             .filter((item: any) => item !== drawerItem)
             .forEach((child: any) => child.active = false);

        this.setState({ title: drawerItem.textContent });
    }

    public navDrawerRef(navDrawer: IgrNavDrawer) {
        if (!navDrawer) { return; }
        this.navDrawer = navDrawer;
    }

    public onRadioChange(e: any) {
        if (e.checked == true) {
            this.setState({ drawerPosition: e.value });
        }
    }
}

// rendering above class to the React DOM
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<NavDrawerAddPositionsNavbar />);
tsxコピー

Edit in: Codesandbox

ミニ バリアント

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

<IgrNavDrawer>
    <IgrNavDrawerItem>
        <div slot="icon">
            <IgrIcon name="home" collection="material" />
        </div>
        <span slot="content">Home</span>
    </IgrNavDrawerItem>
    <IgrNavDrawerItem>
        <div slot="icon">
            <IgrIcon name="search" collection="material"/>
        </div>
        <span slot="content">Search</span>
    </IgrNavDrawerItem>
    <div slot="mini">
        <IgrNavDrawerItem>
            <div slot="icon">
                <IgrIcon name="home" collection="material"/>
            </div>
        </IgrNavDrawerItem>
        <IgrNavDrawerItem>
            <div slot="icon">
                <IgrIcon name="search" collection="material" />
            </div>
        </IgrNavDrawerItem>
    </div>
</IgrNavDrawer>

<IgrButton clicked={this.onButtonClick}>
    <span>Toggle</span>
</IgrButton>
tsx

以下は結果です:

EXAMPLE

TSX

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import { IgrNavDrawer, IgrNavDrawerItem, IgrIcon, IgrButton, IgrNavDrawerModule, IgrIconModule, IgrButtonModule } from "@infragistics/igniteui-react";
import 'igniteui-webcomponents/themes/light/bootstrap.css';

IgrNavDrawerModule.register();
IgrIconModule.register();
IgrButtonModule.register();

export default class NavDrawerAddMini extends React.Component<any, any> {
    public navDrawer: IgrNavDrawer;

    constructor(props: any) {
        super(props);
        this.iconRef = this.iconRef.bind(this);
        this.onNavDrawerClick = this.onNavDrawerClick.bind(this);
        this.navDrawerRef = this.navDrawerRef.bind(this);
        this.onButtonClick = this.onButtonClick.bind(this);
    }

    public render(): JSX.Element {
        return (
            <div className="container sample">
                <div style={{ width: '100%' }}>
                    <IgrButton clicked={this.onButtonClick} style={{ marginLeft: '70px' }}>
                        <span key="sButton">Toggle</span>
                    </IgrButton>
                </div>
                <div onClick={this.onNavDrawerClick}>
                    <IgrNavDrawer ref={this.navDrawerRef}>
                        <IgrNavDrawerItem key="home">
                            <div slot="icon" key="iHome">
                                <IgrIcon ref={this.iconRef} name="home" collection="material" />
                            </div>
                            <span slot="content" key="sHome">Home</span>
                        </IgrNavDrawerItem>

                        <IgrNavDrawerItem key="search">
                            <div slot="icon" key="iSearch">
                                <IgrIcon name="search" collection="material" />
                            </div>
                            <span slot="content" key="sSearch">Search</span>
                        </IgrNavDrawerItem>

                        <div slot="mini" key="miniSlot">
                            <IgrNavDrawerItem key="miniHome">
                                <div slot="icon" key="iMiniHome">
                                    <IgrIcon name="home" collection="material" />
                                </div>
                            </IgrNavDrawerItem>

                            <IgrNavDrawerItem key="miniSearch">
                                <div slot="icon" key="iMiniSearch">
                                    <IgrIcon name="search" collection="material" />
                                </div>
                            </IgrNavDrawerItem>
                        </div>
                    </IgrNavDrawer>
                </div>
            </div>
        );
    }

    public iconRef(icon: IgrIcon) {
        if (!icon) { return; }

        const searchIcon = '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"/></svg>';
        const homeIcon = '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z"/></svg>';

        icon.registerIconFromText("home", homeIcon, "material");
        icon.registerIconFromText("search", searchIcon, "material");
    }

    public navDrawerRef(navDrawer: IgrNavDrawer) {
        if (!navDrawer) { return; }
        this.navDrawer = navDrawer;
    }

    public onNavDrawerClick(e: any) {
        const drawerItem: any = e.target.closest('igc-nav-drawer-item') ??
                                (e.target.parentElement?.closest('igc-nav-drawer-item') ?? 
                                null)

        if (!drawerItem) { return; }

        drawerItem.active = true;
        const navDrawer = drawerItem.parentElement;
        Array.from(navDrawer.querySelectorAll('igc-nav-drawer-item'))
             .filter((item: any) => item !== drawerItem)
             .forEach((child: any) => child.active = false);

        const iconName = drawerItem.querySelector('igc-icon')!.name;
        const icons = document.querySelectorAll(`igc-icon`);

        icons.forEach((icon: any) => {
            const parentItem = icon.parentElement!.closest('igc-nav-drawer-item') as IgrNavDrawerItem;
            if (!parentItem) { return; }

            if (icon.name === iconName) {
                parentItem.active = true;
            } else {
                parentItem.active = false;
            }
        });
    }

    public onButtonClick() {
        if (this.navDrawer) {
            this.navDrawer.toggle();
        }
    }
}

// rendering above class to the React DOM
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<NavDrawerAddMini />);
tsxコピー

Edit in: Codesandbox

スタイル設定

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

igc-nav-drawer::part(base) {
  background: var(--ig-secondary-500);
}

igc-nav-drawer-item::part(base) {
  color: var(--ig-secondary-500-contrast);
}

igc-nav-drawer-item::part(base):hover {
  background-color: var(--ig-gray-800);
}

igc-nav-drawer-item[active]::part(base) {
  background: var(--ig-warn-500);
  color: var(--ig-warn-500-contrast);
}

igc-nav-drawer-header-item {
  color: var(--ig-warn-500);
}
scss

EXAMPLE

TSX

CSS

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import './NavDrawerStyling.css';
import {
    IgrNavDrawer, IgrNavDrawerHeaderItem, IgrNavDrawerItem, IgrIcon, IgrNavDrawerModule, IgrIconModule,
    IgrIconButton, IgrIconButtonModule
} from "@infragistics/igniteui-react";
import 'igniteui-webcomponents/themes/light/bootstrap.css';

IgrNavDrawerModule.register();
IgrIconModule.register();
IgrIconButtonModule.register();

export default class NavDrawerStyling extends React.Component<any, any> {
    private navDrawer: IgrNavDrawer;

    constructor(props: any) {
        super(props);
        this.iconRef = this.iconRef.bind(this);
        this.iconButtonRef = this.iconButtonRef.bind(this);
        this.onNavDrawerClick = this.onNavDrawerClick.bind(this);
        this.navDrawerRef = this.navDrawerRef.bind(this);
        this.toggleDrawer = this.toggleDrawer.bind(this);
    }

    public render(): JSX.Element {
        return (
            <div className="container sample">
                <IgrIconButton style={{ margin: "10px" }} ref={this.iconButtonRef}
                    clicked={this.toggleDrawer}
                    name="menu"
                    collection="material"
                    variant="flat">
                </IgrIconButton>
                <div onClick={this.onNavDrawerClick}>
                    <IgrNavDrawer open={true} ref={this.navDrawerRef}>
                        <IgrNavDrawerHeaderItem key="header">
                            <span key="sHeader">Sample Drawer</span>
                        </IgrNavDrawerHeaderItem>

                        <IgrNavDrawerItem key="home">
                            <div slot="icon" key="iHome">
                                <IgrIcon ref={this.iconRef} name="home" collection="material" />
                            </div>
                            <span slot="content" key="sHome">Home</span>
                        </IgrNavDrawerItem>

                        <IgrNavDrawerItem key="search">
                            <div slot="icon" key="iSearch">
                                <IgrIcon name="search" collection="material" />
                            </div>
                            <span slot="content" key="sSearch">Search</span>
                        </IgrNavDrawerItem>
                    </IgrNavDrawer>
                </div>
            </div>
        );
    }

    public iconRef(icon: IgrIcon) {
        if (!icon) { return; }

        const searchIcon = '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"/></svg>';
        const homeIcon = '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z"/></svg>';

        icon.registerIconFromText("home", homeIcon, "material");
        icon.registerIconFromText("search", searchIcon, "material");
    }

    public iconButtonRef(iconButton: IgrIconButton) {
        if (!iconButton) { return; }
        const menuIcon = '<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24"><path d="M120-240v-80h720v80H120Zm0-200v-80h720v80H120Zm0-200v-80h720v80H120Z"/></svg>';
        iconButton.registerIconFromText("menu", menuIcon, "material");
    }

    public toggleDrawer() {
        if (this.navDrawer) {
            this.navDrawer.toggle();
        }
    }

    public onNavDrawerClick(e: any) {
        const drawerItem: any = e.target.closest('igc-nav-drawer-item') ??
                                (e.target.parentElement?.closest('igc-nav-drawer-item') ??
                                null)

        if (!drawerItem) { return; }

        drawerItem.active = true;
        const navDrawer = drawerItem.parentElement;
        Array.from(navDrawer.querySelectorAll('igc-nav-drawer-item'))
             .filter((item: any) => item !== drawerItem)
             .forEach((child: any) => child.active = false);
    }

    public navDrawerRef(navDrawer: IgrNavDrawer) {
        if (!navDrawer) { return; }
        this.navDrawer = navDrawer;
    }
}

// rendering above class to the React DOM
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<NavDrawerStyling />);
tsxコピー

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
}

igc-icon-button::part(base) {
    background: #2d313a;
}

igc-icon-button::part(icon) {
    color: #f3c03e
}
cssコピー

Edit in: Codesandbox

API リファレンス

• IgrButton
• IgrIcon
• IgrNavDrawerHeaderItem
• IgrNavDrawerItem
• IgrNavDrawer
• IgrNavbar
• IgrRadioGroup
• IgrRadio
• スタイル設定 & テーマ

その他のリソース

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