Responsive FloatingToolBar
The FloatingToolBar supports different overflow behaviors when the available width is limited. Set overflow to menu to move tools that do not fit into a popup, or to scroll to keep them on one row. The default value is none, which disables overflow handling.
The following sections describe the available overflow modes:
Menu Mode
Set the overflow property to menu to display the tools that fit in the available width and render the rest in a popup menu that opens from the More tools button.
The FloatingToolBar recalculates overflowing tools when the available width changes, such as when the browser window is resized.
The following example demonstrates a text-formatting toolbar that moves the tools that do not fit into the overflow menu. Use the slider to change the width of the FloatingToolBar.
In none mode, implement a custom compact layout by using a ResizeObserver to monitor the available width and switch between full and compact layouts at runtime.
Scroll Mode
To keep tools on one row and scroll horizontally when they do not fit, set the overflow property to scroll.
To configure the scroll behavior, pass a FloatingToolBarOverflowSettings object to overflow and set its mode to scroll. The object supports the following options:
scrollButtons—Determines the visibility of the scroll buttons. The available values arehidden,visible, andauto(default).scrollButtonsPosition—Specifies the position of the scroll buttons:start,end, orsplit(default).prevButtonIcon,nextButtonIcon,prevSVGButtonIcon, andnextSVGButtonIcon—Specifies custom icons for the scroll buttons.
The FloatingToolBar recalculates overflowing tools when the available width changes, such as when the browser window is resized.
The following example demonstrates a text-formatting toolbar that scrolls horizontally when its tools do not fit. Use the slider to change the width of the FloatingToolBar.