design-react-kit/dist/types/Toolbar/ToolbarItem.d.ts

Componenti React per Bootstrap 5

import { ElementType, FC, HTMLAttributes, MouseEvent } from 'react';
import { DropdownProps } from 'reactstrap';
export interface ToolbarItemBadge {
    value?: number;
    label: string;
    srText: string;
}
export interface ToolbarItemProps extends HTMLAttributes<HTMLElement> {
    /** Utilizzarlo in caso di utilizzo di componenti personalizzati. Il valore di default è il tag anchor. */
    tag?: ElementType;
    /** Indica l'elemento attivo nella Toolbar */
    active?: boolean;
    /** Mostra l'elemento come disabilitato nella Toolbar */
    disabled?: boolean;
    /** L'URL a cui far puntare il tag anchor. */
    url?: string;
    /**
     * L'etichetta da mostrare sotto l'icona. In caso di dimensioni più piccole verrà
     * automaticamente sintegrata in uno span per gli screen reader.
     */
    label?: string;
    /** Il nome dell'icona da utilizzare */
    iconName: string;
    testId?: string;
    /**
     * Un testo completo da mostrare per Toolbar di grandezza media e piccola con badge (ad esempio: "ci sono 42 nuovi documenti da esaminare")
     * @deprecated
     */
    srText?: string;
    /**
     * Il badge da mostrare sull'icona del ToolbarItem.
     * Un badge è composto da:
     *
     *   * una label per screen reader da affiancare alla label corrente (ad esempio: "da leggere")
     *   * un testo completo da mostrare per Toolbar di grandezza media e piccola (ad esempio: "ci sono 42 nuovi documenti da esaminare")
     *   * un eventuale valore numerico (omesso in caso di un badge di alert)
     **/
    badge?: number | ToolbarItemBadge;
    /**
     * Indica che il ToolbarItem contiene un menu dropdown.
     * Quando questo attributo è attivo il contenuto del componente ToolbarItem verrà mostrato all'interno del dropdown.
     */
    dropdown?: boolean;
    /**
     * Quando l'opzione dropdown è attiva questo attributo controlla se
     * l'elemento è di tipo "altro" contenente altre icone/opzioni o no.
     */
    showMore?: boolean;
    /**
     * Quando il componente è in modalità dropdown permette di controllarne
     * lo stato di visibilità. Il valore di default è false.
     */
    isDropdownOpen?: boolean;
    /**
     * Da utilizzare quando l'attributo "dropdown" è attivo.
     * Gli attributi qui passati verranno inoltrati al componente Dropdown interno.
     */
    dropdownProps?: Omit<DropdownProps, 'toggle' | 'isOpen'>;
    /**
     * Funzione chiamata al click dell'element ToolbarItem
     */
    onClick?: (event: MouseEvent<HTMLAnchorElement>) => void;
}
export declare const ToolbarItem: FC<ToolbarItemProps>;