Floating Toolbar Positioning
The Floating Toolbar supports anchored and free-position modes. The AnchorSelector parameter determines the effective mode.
Anchoring to an Element
Set AnchorSelector to a CSS selector for the target element. Set Position to choose the preferred side of the anchor. The component can change the final position when collision handling is required.
An invalid or unmatched AnchorSelector prevents the show operation. Clear the anchor before switching to a free position.
Using Free-Position Mode
Omit AnchorSelector to position the Floating Toolbar inside its containing element. Configure the initial location with the following parameters:
HorizontalAlign- Aligns the component to the left, center, or right edge of its containing element.VerticalAlign- Aligns the component to the top, center, or bottom edge of its containing element.HorizontalOffset- Sets the horizontal distance in pixels from the aligned edge.VerticalOffset- Sets the vertical distance in pixels from the aligned edge.
Use the FloatingToolBarHorizontalAlign values Left, Center, and Right for HorizontalAlign. Use the FloatingToolBarVerticalAlign values Top, Center, and Bottom for VerticalAlign.
Sticky Behavior
Anchor the Floating Toolbar to an element with position: sticky to keep the toolbar visible while the user scrolls its container.
Positioning with Methods
Use a component reference to position the Floating Toolbar programmatically. All methods are asynchronous so the app can observe DOM positioning and JavaScript errors.
Refer to the Floating Toolbar API Reference for all available methods.
Calling ShowAsync() while the component is visible updates its position without changing Visible or raising VisibleChanged.