FloatingToolBarComponent
Represents the Kendo UI FloatingToolBar component for Angular. Hosts the ToolBarComponent inside a floating PopupComponent container.
Definition
Package:@progress/kendo-angular-toolbar
Selector:kendo-floatingtoolbar
Export Name:Accessible in templates as #kendoFloatingToolBarInstance="kendoFloatingToolBar"
Syntax:
<kendo-floatingtoolbar>
<kendo-toolbar-button text="Button"></kendo-toolbar-button>
</kendo-floatingtoolbar>Inputs
anchor
HTMLElement | ElementRef<any>
Sets the element the FloatingToolBar is positioned against. When not set, the component
is positioned within its containing element based on the containerAlign option.
ariaLabel
string
Sets the accessible name of the FloatingToolBar.
Sets the position of the FloatingToolBar within its containing element.
Applies when anchor is not set.
{ horizontal: 'center', vertical: 'top' }
draggable
boolean
Controls whether the user can reposition the FloatingToolBar with the pointer or the keyboard. When enabled, the component renders a drag handle before the hosted Toolbar.
Press M while a Toolbar tool or the drag handle has focus to enter move mode. Focus moves
to the drag handle, where you can use the arrow keys to move the FloatingToolBar by 10 pixels at a time.
Press Enter or Space, or move focus away from the drag handle, to finish, or press Escape to restore the starting position.
false
Sets the background and border styles of the FloatingToolBar. The default value is set by the Kendo theme.
Sets the horizontal and vertical spacing in pixels between the FloatingToolBar and the element it is positioned against. When no anchor is provided, the spacing is applied relative to the containing element.
{ horizontal: 0, vertical: 0 }
maxWidth
string | number
Sets the maximum width of the FloatingToolBar. Numeric values are treated as pixels.
Sets how the FloatingToolBar renders tools when their total size is greater than the available width.
'none'
Sets the preferred side of the anchor the FloatingToolBar is rendered on.
Collision handling can render the component on the opposite side when the preferred side does not fit.
Applies when anchor is set.
'top'
Sets the size of the FloatingToolBar and the tools it hosts. The default value is set by the Kendo theme.
width
string | number
Sets the width of the FloatingToolBar. Numeric values are treated as pixels.
Events
dragEnd
EventEmitter<FloatingToolBarDragEndEvent>
Fires when a pointer drag ends or the keyboard move mode is committed or canceled.
dragStart
EventEmitter<FloatingToolBarDragStartEvent>
Fires when a pointer drag or the keyboard move mode starts. Cancelable — calling preventDefault() keeps the
FloatingToolBar in place.
move
EventEmitter<FloatingToolBarMoveEvent>
Fires when the user moves the FloatingToolBar with the pointer or the keyboard.
Methods
Moves the focus into the FloatingToolBar at its current roving tabindex position.
Sets the FloatingToolBar position using the provided top and left coordinates.
The position is clamped to the viewport.