This sample demonstrates the default functionalities of the Toolbar. Select any command or click the left/right navigation icon or touch swipe to see the hidden commands of the Toolbar
Toolbar is a graphical control on which commands / buttons will be displayed in horizontal order. By default scrolling display mode enabled when content exceeds the available viewing area.
You can use left / right navigation icon or touch swipe to see the hidden commands of the toolbar.
Initially toolbar rendered with the left and right navigation icon and you can see hidden commands by moving in right or left direction.
When you reach right / left end of toolbar, corresponding navigation direction will be disabled.
In this demo, available responsive mode of React Toolbar has been showcased. The modes can be set through overflowMode property and the possible modes are Scrollable, PopupPopup, Extended and MultiRow.
Scrollable - The scrollable mode is the default mode. When you have excess toolbar items, it
can be viewed by scrolling through left and right arrows.You can continuously scroll the toolbar content by holding on the navigation icon. In devices navigation icons are not available. you can touch swipe to see the hidden commands of the toolbar.
Popup - The overflowing toolbar items which do not fit in viewing area moves to the popup
container.
Extended - The overflowing toolbar items which do not fit in the available space can be viewed
in the next row of the toolbar on clicking the expand icon.
MultiRow - The overflowing toolbar items which do not fit in viewing area will be displayed as
an in-line of the toolbar.