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.

Change Theme

Theme

Loading ...

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.

Change Theme

Theme

Loading ...

Popup Customization

You can customize the overflow button popup by setting the popupSettings property of the Toolbar.

The popupSettings input allows you to configure the following options:

• animate: boolean—Controls the popup animation. By default, the open and close animations are enabled.
• popupClass: string—Specifies a list of CSS classes that are used to style the popup.

The following example demonstrates how to turn off the default open and close animations and assign a CSS class to the popup to customize its height.

Change Theme

Theme

Loading ...

Suggested Links

• API Reference of the ToolBar