Positioning
The FloatingToolBar provides two positioning modes: anchored and free. In both modes, it keeps its position in sync with the anchor or container while the page scrolls or resizes.
The following sections describe how to position the FloatingToolBar and control its behavior:
Anchored Mode
To position the FloatingToolBar relative to a target element, set the anchor property to a reference of that element. Use the position property to specify the preferred side of the anchor on which the component renders.
The available position values are:
top(default)bottomleftright
If the preferred side does not have enough space, collision handling flips the component automatically. The FloatingToolBar also follows the anchor while the page scrolls or the viewport resizes.
The following example demonstrates a rich-text editor toolbar anchored to a highlighted phrase in a sample document. Use the configurator to change the position value.
Free-Position Mode
When no anchor is set, the FloatingToolBar renders in free-position mode and is placed within its containing element according to the containerAlign property.
The containerAlign property accepts horizontal and vertical keys. Its default value is { horizontal: 'center', vertical: 'top' }.
The available horizontal values are:
leftcenter(default)right
The available vertical values are:
top(default)centerbottom
The following example demonstrates how containerAlign positions the FloatingToolBar within its containing element. Use the configurator to change the horizontal and vertical values.
Controlling Visibility
To show and hide the component, render the FloatingToolBar conditionally, for example, only while a text selection exists. When you render the component, set the anchor property to an element that matches the current selection.
The following example displays the FloatingToolBar above a text selection. Select a portion of the text to show the component. Clear the selection to hide it.
Setting the Margin
Use the margin property to control the spacing of the FloatingToolBar. In anchored mode, margin sets the gap between the FloatingToolBar and the anchor. In free-position mode, margin sets the inset from the containing element.
The following example demonstrates how increasing the margin value insets a bottom-aligned FloatingToolBar from the edge of its containing element.