Responsive ToolBar
The ToolBar enables you to hide the tools that do not fit its width and allows you to programmatically determine their rendering.
By default, the ToolBar allows you to choose from three different overflow modes for smaller screen sizes:
Scroll Mode
Setting the overflow property of the ToolBar to scroll allows you to display all tools regardless of the component's width. In this mode, the ToolBar tools become scrollable and the component displays two scroll buttons for easier navigation.
The following example demonstrates how to make the ToolBar tools scrollable.
Controlling Scroll Buttons Visibility
When the ToolBar is in scroll mode, you can control the visibility of the scroll buttons. To determine whether the buttons should always be visible, automatically displayed, or hidden based on your requirements, use the built-in scrollButtons property which accepts the following values:
auto(default)—The scroll buttons will be rendered only when the tools list overflows its container.visible—The scroll buttons will be always visible.hidden—No scroll buttons will be rendered.
The following example demonstrates how to dynamically update the value of the scrollButtons property.
Adjusting Scroll Buttons Position
The scroll mode allows you to adjust the position of the scroll buttons in the ToolBar component. To render the buttons either at the beginning of the component, the end of the component, or at each side of the tools list, use the scrollButtonsPosition property and set its value to either of the following possible options:
split(default)—The scroll buttons will be rendered at each side of the tools list.start—The scroll buttons will be rendered at the start before all tools.end—The scroll buttons will be rendered at the end after all tools.
The following example demonstrates how to use the scrollButtonsPosition property to adjust the scroll buttons' position.
Customizing Scroll Buttons Icons
You can modify the icons used for the scroll buttons in the ToolBar. To replace the default icons with the ones that better fit your application's requirement, utilize the prevSVGButtonIcon and nextSVGButtonIcon properties.
In case you have configured the application to use font icons, use the
prevButtonIconandnextButtonIconproperties.
The following example demonstrates how to change the default scroll buttons icons.
Section Mode
The section mode allows you to display overflowing ToolBar tools in a popup element while also maintaining the components used for their rendering and their initial layout. To enable this behavior, set the value of the overflow property to section.
The following example demonstrates how to render overflowing ToolBar tools in a popup using their initial components and layout.
Menu Mode
The menu mode of the ToolBar displays tools that don't fit within the component's width in a popup, which opens when a designated button is clicked. To enable this behavior, set the value of the overflow property to menu or true.
The following example demonstrates how to display overflowing ToolBar tools in a menu popup element.
Customizing Tools Rendering
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 properties.
Customizing the Popup
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—Controls the popup animation. By default, the open and close animations are enabled.popupClass—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.