@syncfusion/react-navigations/src/toolbar/toolbar.d.ts

Syncfusion React Navigations with Toolbar and Context Menu for seamless page navigation

import { HTMLAttributes, RefAttributes, ForwardRefExoticComponent } from 'react';
import { Orientation } from '@syncfusion/react-base';
export { Orientation };
/**
 * Specifies the options of Toolbar display mode. Display option is considered when Toolbar content exceeds the available space.
 */
export declare enum OverflowMode {
    /**
     * All the elements are displayed in a single line with horizontal or vertical scrolling enabled.
     */
    Scrollable = "Scrollable",
    /**
     * Overflowing elements are moved to the popup. Shows the overflowing Toolbar items when you click the expand button. If the popup content overflows the height of the page, the rest of the elements will be hidden.
     */
    Popup = "Popup",
    /**
     * Displays the overflowing Toolbar items in multiple rows within the Toolbar, allowing all items to remain visible by wrapping to new lines as needed.
     */
    MultiRow = "MultiRow",
    /**
     * Hides the overflowing Toolbar items in the next row. Shows the overflowing Toolbar items when you click the expand button.
     */
    Extended = "Extended"
}
/**
 * Specifies the props for the Toolbar component.
 */
export interface ToolbarProps {
    /**
     * Specifies whether keyboard interaction is enabled within the Toolbar.
     * When set to `true` (default), keyboard navigation is allowed.
     *
     * @default true
     */
    keyboardNavigation?: boolean;
    /**
     * Specifies whether popups adjust their position to avoid overlapping with other elements.
     * This property is applicable only when in `Popup` and `Extended` modes.
     *
     * @default true
     */
    collision?: boolean;
    /**
     * Specifies the layout direction of how the Toolbar items are arranged.
     *
     * The possible values for this property as follows
     * - Horizontal: Arranges Toolbar items in a row from left to right.
     * - Vertical: Stacks Toolbar items in a column from top to bottom.
     *
     * @default Orientation.Horizontal
     */
    orientation?: Orientation;
    /**
     * Specifies the Toolbar display mode when Toolbar content exceeds the viewing area.
     *
     * The possible values for this property as follows
     * - Scrollable: All elements are displayed in a single line with horizontal or vertical scrolling enabled.
     * - Popup: Overflowing elements are moved to the popup. Shows the overflowing Toolbar items when you click the expand button. if the popup content overflows the height of the page, the rest of the elements will be hidden.
     * - MultiRow: Displays the overflowing Toolbar items in multiple rows within the Toolbar, allowing all items to remain visible by wrapping to new lines as needed.
     * - Extended: Hides the overflowing Toolbar items in the next row. Shows the overflowing Toolbar items when you click the expand button.
     *
     * @default OverflowMode.Scrollable
     */
    overflowMode?: OverflowMode;
    /**
     * Specifies the scrolling distance in pixels when the Toolbar items overflow in Scrollable mode.
     * This property is applicable only when the Toolbar is in `Scrollable` mode.
     *
     * @default undefined
     */
    scrollStep?: number;
}
/**
 * Specifies the interface for the Toolbar component.
 */
export interface IToolbar extends ToolbarProps {
    /**
     * Specifies the Toolbar element.
     *
     * @private
     * @default null
     */
    element?: HTMLDivElement | null;
    /**
     * Refreshes the Toolbar overflow state and recalculates item visibility.
     * This method should be called when Toolbar content or container dimensions change.
     * Note: This method is not applicable when the Toolbar is in MultiRow mode.
     *
     * @public
     * @returns {void}
     */
    refreshOverflow(): void;
}
type IToolbarProps = ToolbarProps & HTMLAttributes<HTMLDivElement>;
/**
 * The Toolbar component helps users to effectively organize and quickly access frequently used actions.
 * It provides multiple overflow handling modes to accommodate different UI requirements and screen sizes.
 *
 * ```typescript
 * import { Toolbar, ToolbarItem, ToolbarSeparator, ToolbarSpacer, OverflowMode } from "@syncfusion/react-navigations";
 *
 * <Toolbar overflowMode={OverflowMode.Popup} style={{ width: '300px' }}>
 *   <ToolbarItem><Button>Cut</Button></ToolbarItem>
 *   <ToolbarItem><Button>Copy</Button></ToolbarItem>
 *   <ToolbarSeparator />
 *   <ToolbarItem><Button>Paste</Button></ToolbarItem>
 *   <ToolbarSpacer />
 *   <ToolbarItem><Button>Help</Button></ToolbarItem>
 * </Toolbar>
 * ```
 */
export declare const Toolbar: ForwardRefExoticComponent<IToolbarProps & RefAttributes<IToolbar>>;
export default Toolbar;