Responsive ToolBar

The ToolBar enables you to hide the tools that do not fit its width in an overflow popup.

Basic Setup

To make the toolbar responsive, set the overflow input to true.

@Component({
    selector: 'my-app',
    template: `
        <p>Set toolbar width</p>
        <input
            #range
            style="width: 100%; display: block;"
            type="range"
            value="100"
            min="0"
            max="100"
            step="1"
            (input)="toolbarWidth = range.value"
        />

        <kendo-toolbar [overflow]="true" [style.width.%]="toolbarWidth">
            <kendo-toolbar-buttongroup>
                <kendo-toolbar-button
                    [icon]="'undo'"
                    (click)="onItemClick('Undo button clicked')"
                >
                </kendo-toolbar-button>
                <kendo-toolbar-button
                    [icon]="'redo'"
                    (click)="onItemClick('Redo button clicked')"
                >
                </kendo-toolbar-button>
            </kendo-toolbar-buttongroup>
            <kendo-toolbar-separator></kendo-toolbar-separator>
            <kendo-toolbar-buttongroup>
                <kendo-toolbar-button
                    [toggleable]="'true'"
                    [icon]="'bold'"
                    (click)="onItemClick('Bold button clicked')"
                >
                </kendo-toolbar-button>
                <kendo-toolbar-button
                    [toggleable]="'true'"
                    [icon]="'italic'"
                    (click)="onItemClick('Italic button clicked')"
                >
                </kendo-toolbar-button>
                <kendo-toolbar-button
                    [toggleable]="'true'"
                    [icon]="'underline'"
                    (click)="onItemClick('Underline button clicked')"
                >
                </kendo-toolbar-button>
            </kendo-toolbar-buttongroup>
            <kendo-toolbar-separator></kendo-toolbar-separator>
            <kendo-toolbar-buttongroup [selection]="'single'">
                <kendo-toolbar-button
                    [toggleable]="true"
                    [icon]="'align-left'"
                    [text]="'Left'"
                    (click)="onItemClick('Align left button clicked')"
                >
                </kendo-toolbar-button>
                <kendo-toolbar-button
                    [toggleable]="true"
                    [icon]="'align-center'"
                    [text]="'Center'"
                    (click)="onItemClick('Align centere button clicked')"
                >
                </kendo-toolbar-button>
                <kendo-toolbar-button
                    [toggleable]="true"
                    [icon]="'align-right'"
                    [text]="'Right'"
                    (click)="onItemClick('Align right button clicked')"
                >
                </kendo-toolbar-button>
                <kendo-toolbar-button
                    [toggleable]="true"
                    [icon]="'align-justify'"
                    [text]="'Justify'"
                    (click)="onItemClick('Align justify button clicked')"
                >
                </kendo-toolbar-button>
            </kendo-toolbar-buttongroup>
            <kendo-toolbar-separator></kendo-toolbar-separator>
            <kendo-toolbar-splitbutton
                [icon]="'paste'"
                [text]="'Paste'"
                [data]="splitButtonData"
                (buttonClick)="onItemClick('Paste splitbutton clicked')"
            >
            </kendo-toolbar-splitbutton>
            <kendo-toolbar-dropdownbutton
                [icon]="'cog'"
                [text]="'Set default paste'"
                [data]="dropdownButtonData"
            >
            </kendo-toolbar-dropdownbutton>
        </kendo-toolbar>

        <p>{{ clickMessage }}</p>
    `
})
class AppComponent {
    public clickMessage: string;

    public onItemClick(message: string): void {
        console.log(message);
        this.clickMessage = message;
    }

    public splitButtonData: Array<any> = [
        {
            text: 'Keep Text Only',
            icon: 'paste-plain-text',
            click: () => this.onItemClick('Keep Text Only splitbutton button clicked')
        },
        {
            text: 'Paste as HTML',
            icon: 'paste-as-html',
            click: () => this.onItemClick('Paste as HTML splitbutton button clicked')
        },
        {
            text: 'Paste Markdown',
            icon: 'paste-markdown',
            click: () => this.onItemClick('Paste Markdown splitbutton button clicked')
        }
    ];

    public dropdownButtonData: Array<any> = [
        {
            text: 'Keep Text Only',
            icon: 'paste-plain-text',
            click: () => this.onItemClick('Keep Text Only dropdownbutton button clicked')
        },
        {
            text: 'Paste as HTML',
            icon: 'paste-as-html',
            click: () => this.onItemClick('Paste as HTML dropdownbutton button clicked')
        },
        {
            text: 'Paste Markdown',
            icon: 'paste-markdown',
            click: () => this.onItemClick('Paste Markdown dropdownbutton button clicked')
        }
    ];
}

Advanced Configuration

You can set the ToolBar tools to display their text or icon either in the ToolBar or in its overflow popup by using the showText or showIcon inputs.

@Component({
    selector: 'my-app',
    template: `
        <p>Set toolbar width</p>
        <input
            #range
            style="width: 100%; display: block;"
            type="range"
            value="100"
            min="0"
            max="100"
            step="1"
            (input)="toolbarWidth = range.value"
        />
        <kendo-toolbar [overflow]="true" [style.width.%]="toolbarWidth">
            <kendo-toolbar-buttongroup>
                <kendo-toolbar-button
                    [text]="'Undo'"
                    [showText]="'overflow'"
                    [icon]="'undo'"
                    (click)="onItemClick('Undo button clicked')"
                >
                </kendo-toolbar-button>
                <kendo-toolbar-button
                    [text]="'Redo'"
                    [showText]="'overflow'"
                    [icon]="'redo'"
                    (click)="onItemClick('Redo button clicked')"
                >
                </kendo-toolbar-button>
            </kendo-toolbar-buttongroup>
            <kendo-toolbar-separator></kendo-toolbar-separator>
            <kendo-toolbar-buttongroup>
                <kendo-toolbar-button
                    [toggleable]="'true'"
                    [text]="'Bold'"
                    [showText]="'overflow'"
                    [icon]="'bold'"
                    (click)="onItemClick('Bold button clicked')"
                >
                </kendo-toolbar-button>
                <kendo-toolbar-button
                    [toggleable]="'true'"
                    [text]="'Italic'"
                    [showText]="'overflow'"
                    [icon]="'italic'"
                    (click)="onItemClick('Italic button clicked')"
                >
                </kendo-toolbar-button>
                <kendo-toolbar-button
                    [toggleable]="'true'"
                    [text]="'Underline'"
                    [showText]="'overflow'"
                    [icon]="'underline'"
                    (click)="onItemClick('Underline button clicked')"
                >
                </kendo-toolbar-button>
            </kendo-toolbar-buttongroup>
            <kendo-toolbar-separator></kendo-toolbar-separator>
            <kendo-toolbar-buttongroup [selection]="'single'">
                <kendo-toolbar-button
                    [toggleable]="true"
                    [icon]="'align-left'"
                    [text]="'Left'"
                    [showText]="'overflow'"
                    (click)="onItemClick('Align left button clicked')"
                >
                </kendo-toolbar-button>
                <kendo-toolbar-button
                    [toggleable]="true"
                    [icon]="'align-center'"
                    [text]="'Center'"
                    [showText]="'overflow'"
                    (click)="onItemClick('Align centere button clicked')"
                >
                </kendo-toolbar-button>
                <kendo-toolbar-button
                    [toggleable]="true"
                    [icon]="'align-right'"
                    [text]="'Right'"
                    [showText]="'overflow'"
                    (click)="onItemClick('Align right button clicked')"
                >
                </kendo-toolbar-button>
                <kendo-toolbar-button
                    [toggleable]="true"
                    [icon]="'align-justify'"
                    [text]="'Justify'"
                    [showText]="'overflow'"
                    (click)="onItemClick('Align justify button clicked')"
                >
                </kendo-toolbar-button>
            </kendo-toolbar-buttongroup>
            <kendo-toolbar-separator></kendo-toolbar-separator>
            <kendo-toolbar-splitbutton
                [icon]="'paste'"
                [showText]="'overflow'"
                [showIcon]="'toolbar'"
                [text]="'Paste'"
                [data]="splitButtonData"
                (buttonClick)="onItemClick('Paste splitbutton clicked')"
            >
            </kendo-toolbar-splitbutton>
            <kendo-toolbar-dropdownbutton
                [icon]="'cog'"
                [showIcon]="'toolbar'"
                [text]="'Set default paste'"
                [showText]="'overflow'"
                [data]="dropdownButtonData"
            >
            </kendo-toolbar-dropdownbutton>
        </kendo-toolbar>

        <p>{{ clickMessage }}</p>
    `
})
class AppComponent {
    public clickMessage: string;

    public onItemClick(message: string): void {
        console.log(message);
        this.clickMessage = message;
    }

    public splitButtonData: Array<any> = [
        {
            text: 'Keep Text Only',
            icon: 'paste-plain-text',
            click: () => this.onItemClick('Keep Text Only splitbutton button clicked')
        },
        {
            text: 'Paste as HTML',
            icon: 'paste-as-html',
            click: () => this.onItemClick('Paste as HTML splitbutton button clicked')
        },
        {
            text: 'Paste Markdown',
            icon: 'paste-markdown',
            click: () => this.onItemClick('Paste Markdown splitbutton button clicked')
        }
    ];

    public dropdownButtonData: Array<any> = [
        {
            text: 'Keep Text Only',
            icon: 'paste-plain-text',
            click: () => this.onItemClick('Keep Text Only dropdownbutton button clicked')
        },
        {
            text: 'Paste as HTML',
            icon: 'paste-as-html',
            click: () => this.onItemClick('Paste as HTML dropdownbutton button clicked')
        },
        {
            text: 'Paste Markdown',
            icon: 'paste-markdown',
            click: () => this.onItemClick('Paste Markdown dropdownbutton button clicked')
        }
    ];
}

In this article