New to KendoReact? Start a free 30-day trial

FloatingToolbarProps

Interface

Represents the props of the KendoReact FloatingToolbar component.

Definition

Package:@progress/kendo-react-buttons

Properties

anchor?

null | HTMLElement

Specifies the element the FloatingToolbar is anchored to.

When set, the component renders in anchored mode and is positioned relative to the element. When not set, the component renders in free-position mode and uses the containerAlign property.

Example:

jsx

<FloatingToolbar anchor={anchorRef.current} />

ariaLabel?

string

Represents the aria-label HTML attribute of the FloatingToolbar.

Example:

jsx

<FloatingToolbar ariaLabel="Formatting tools" />

buttonScrollSpeed?

number

Sets the Toolbar scroll speed in pixels when scrolling via clicking the previous or next button. Applicable when the overflow property is set to scroll.

Default:

100

children?

ReactNode

The tools rendered inside the FloatingToolbar.

Accepts the same content as the Toolbar component — ToolbarItem, ToolbarSeparator, ToolbarSpacer, and any custom tools.

Example:

jsx

<FloatingToolbar>
    <ToolbarItem>
        <Button icon="bold" togglable={true} />
    </ToolbarItem>
</FloatingToolbar>

className?

string

Sets additional classes to the FloatingToolbar.

Example:

jsx

<FloatingToolbar className="custom-floating-toolbar" />

containerAlign?

Align

Specifies the horizontal and vertical alignment of the FloatingToolbar within its containing element when no anchor is set.

Default:

{ horizontal: 'center', vertical: 'top' }

Example:

jsx

<FloatingToolbar containerAlign={{ horizontal: 'center', vertical: 'bottom' }} />

dir?

string

Represents the dir HTML attribute.

Example:

jsx

<FloatingToolbar dir="rtl" />

draggable?

boolean

If set to true, renders a drag handle and enables repositioning the FloatingToolbar by pointer and by the keyboard Move mode.

The position is bounded by the viewport.

Default:

false

Example:

jsx

<FloatingToolbar draggable={true} />

fillMode?

"solid" | "outline" | "flat"

Configures the fillMode of the FloatingToolbar.

The available options are:

solid - Applies a background color and solid borders.
flat - Sets a transparent background and solid bottom border.
outline - Sets a transparent background and solid borders.

Default:

undefined (theme-controlled)

Example:

jsx

<FloatingToolbar fillMode="outline" />

id?

string

Specifies the id attribute of the FloatingToolbar.

Example:

jsx

<FloatingToolbar id="formatting-bar" />

keyboardNavigation?

boolean

If set to false, turns off the built-in keyboard navigation of the hosted Toolbar.

Default:

true

Example:

jsx

<FloatingToolbar keyboardNavigation={false} />

margin?

Margin

Specifies the horizontal and vertical margin between the FloatingToolbar and its anchor.

In anchored mode, it specifies the gap from the anchor. In free-position mode, it specifies the inset from the containing element.

Example:

jsx

<FloatingToolbar margin={{ horizontal: 0, vertical: 8 }} />

nextButton?

ComponentType<object>

Defines the custom component that will be rendered as a next button. To remove the button, set a function which returns null () => null.

onDragEnd?

(event: FloatingToolbarDragEndEvent) => void

Fires when a pointer drag ends or the keyboard Move mode is committed.

Parameters:eventFloatingToolbarDragEndEvent

Example:

jsx

<FloatingToolbar draggable={true} onDragEnd={(event) => console.log(event.top, event.left)} />

onDragStart?

(event: FloatingToolbarDragStartEvent) => void

Fires when a pointer drag or the keyboard Move mode begins.

Call event.preventDefault() to cancel the operation.

Parameters:eventFloatingToolbarDragStartEvent

Example:

jsx

<FloatingToolbar draggable={true} onDragStart={(event) => console.log(event.top, event.left)} />

onMove?

(event: FloatingToolbarMoveEvent) => void

Fires whenever the position of the FloatingToolbar changes as a result of a pointer drag, the keyboard Move mode, or the setPosition method.

Parameters:eventFloatingToolbarMoveEvent

Example:

jsx

<FloatingToolbar draggable={true} onMove={(event) => setPosition({ top: event.top, left: event.left })} />

onResize?

(event: ToolbarResizeEvent) => void

The resize event of the hosted Toolbar.

Parameters:eventToolbarResizeEvent

Example:

jsx

<FloatingToolbar onResize={(event) => console.log(event.offsetWidth)} />

overflow?

"none" | "scroll"

Configures the overflow behavior of the FloatingToolbar.

The section overflow mode is not supported by FloatingToolbar.

Default:

none

Example:

jsx

<FloatingToolbar overflow="scroll" />

position?

FloatingToolbarPosition

Specifies the preferred side of the anchor on which the FloatingToolbar is rendered.

The available options are:

top - Renders the component above the anchor.
bottom - Renders the component below the anchor.
left - Renders the component to the left of the anchor.
right - Renders the component to the right of the anchor.

The preferred side is subject to collision handling and can be flipped when there is not enough space. Applicable only when anchor is set.

Default:

"top"

Example:

jsx

<FloatingToolbar anchor={anchorRef.current} position="bottom" />

prevButton?

ComponentType<object>

Defines the custom component that will be rendered as a previous button. To remove the button, set a function which returns null () => null.

scrollButtons?

"auto" | "hidden" | "visible"

Determines the Toolbar scroll buttons visibility. Applicable when the overflow property is set to scroll.

Default:

auto

scrollButtonsPosition?

"start" | "end" | "split"

Determines the Toolbar scroll buttons position. Applicable when the overflow property is set to scroll.

Default:

split

size?

"small" | "medium" | "large"

Configures the size of the FloatingToolbar.

The available options are:

small - Sets the padding of the component to 4px 4px.
medium - Sets the padding of the component to 8px 8px.
large - Sets the padding of the component to 10px 10px.

Default:

undefined (theme-controlled)

Example:

jsx

<FloatingToolbar size="large" />

style?

CSSProperties

The styles that are applied to the FloatingToolbar.

Example:

jsx

<FloatingToolbar style={{ zIndex: 10100 }} />

tabIndex?

number

Specifies the tabIndex of the FloatingToolbar.

Default:

Example:

jsx

<FloatingToolbar tabIndex={0} />

width?

string | number

Sets the width of the FloatingToolbar element.

Numeric values are applied in pixels. String values are applied as is, for example, "400px" or "50%".

Default:

undefined (theme-controlled)

Example:

jsx

<FloatingToolbar width={400} />