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- 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
devicesnavigation 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.