@ui5/webcomponents-react/dist/webComponents/Toolbar/index.d.ts

React Wrapper for UI5 Web Components and additional components

import '@ui5/webcomponents/dist/Toolbar.js';
import type ToolbarAlign from '@ui5/webcomponents/dist/types/ToolbarAlign.js';
import type ToolbarDesign from '@ui5/webcomponents/dist/types/ToolbarDesign.js';
import type { CommonProps, Ui5DomRef } from '@ui5/webcomponents-react-base';
import type { ReactNode } from 'react';
interface ToolbarAttributes {
    /**
     * Defines the accessible ARIA name of the component.
     *
     * **Note:** It is strongly recommended to always set this property or `accessibleNameRef`
     * when the toolbar has `role="toolbar"` (i.e. when it contains more than one interactive item).
     * Without an accessible name, screen readers will announce the toolbar without any context,
     * making it harder for keyboard-only and AT users to understand its purpose.
     * @default undefined
     */
    accessibleName?: string | undefined;
    /**
     * Receives id(or many ids) of the elements that label the input.
     *
     * **Note:** When the toolbar has `role="toolbar"`, at least one of `accessibleName` or
     * `accessibleNameRef` should be provided to satisfy WCAG 2.1 success criterion 4.1.2.
     * @default undefined
     */
    accessibleNameRef?: string | undefined;
    /**
     * Indicated the direction in which the Toolbar items will be aligned.
     * @default "End"
     */
    alignContent?: ToolbarAlign | keyof typeof ToolbarAlign;
    /**
     * Defines the toolbar design.
     *
     * **Note:** Available since [v2.0.0](https://github.com/UI5/webcomponents/releases/tag/v2.0.0) of **@ui5/webcomponents**.
     * @default "Solid"
     */
    design?: ToolbarDesign | keyof typeof ToolbarDesign;
    /**
     * Defines the accessible ARIA name of the overflow button of the component.
     *
     * **Note:** When not set, the built-in translation for "Additional Options" is used.
     *
     * **Note:** Available since [v2.22.0](https://github.com/UI5/webcomponents/releases/tag/v2.22.0) of **@ui5/webcomponents**.
     * @default undefined
     */
    overflowButtonAccessibleName?: string | undefined;
}
interface ToolbarDomRef extends Required<ToolbarAttributes>, Ui5DomRef {
    /**
     * Returns if the overflow popup is open.
     * @returns {boolean}
     */
    isOverflowOpen: () => boolean;
}
interface ToolbarPropTypes extends ToolbarAttributes, Omit<CommonProps, keyof ToolbarAttributes | 'children'> {
    /**
     * Defines the items of the component.
     *
     * **Note:** Currently only `ToolbarButton`, `ToolbarSelect`, `ToolbarSeparator` and `ToolbarSpacer` are allowed here.
     *
     * __Supported Node Type/s:__ `Array<ToolbarItemBase>`
     */
    children?: ReactNode | ReactNode[];
}
/**
 * The `Toolbar` component is used to create a horizontal layout with items.
 * The items can be overflowing in a popover, when the space is not enough to show all of them.
 *
 * ### Keyboard Handling
 * The `Toolbar` provides advanced keyboard handling.
 *
 * - [Left]/[Right] - navigate among toolbar items
 * - [Home]/[End] - move to first/last toolbar item
 * - [Tab] / [Shift]+[Tab] - exit the toolbar
 *
 *
 *
 * __Note:__ This is a UI5 Web Component! [Toolbar UI5 Web Component Documentation](https://ui5.github.io/webcomponents/components/Toolbar) | [Repository](https://github.com/UI5/webcomponents)
 *
 * @since [1.17.0](https://github.com/UI5/webcomponents/releases/tag/v1.17.0) of __@ui5/webcomponents__.
 */
declare const Toolbar: import("react").ForwardRefExoticComponent<ToolbarPropTypes & import("@ui5/webcomponents-react-base").WithWebComponentPropTypes & import("react").RefAttributes<ToolbarDomRef>>;
export { Toolbar };
export type { ToolbarDomRef, ToolbarPropTypes };