@ui5/webcomponents-react/dist/components/ActionSheet/index.d.ts

React Wrapper for UI5 Web Components and additional components

import type { ReactElement } from 'react';
import type { UI5WCSlotsNode } from '../../types/index.js';
import type { ButtonPropTypes } from '../../webComponents/Button/index.js';
import type { ResponsivePopoverDomRef, ResponsivePopoverPropTypes } from '../../webComponents/ResponsivePopover/index.js';
export interface ActionSheetPropTypes extends Omit<ResponsivePopoverPropTypes, 'header' | 'headerText' | 'children'> {
    /**
     * Defines the header text. Will be shown in the header area on phone devices. This prop will be ignored in tablets and desktop browsers.
     *
     * **Note:** If `header` slot is provided, the `headerText` is ignored.
     */
    headerText?: string;
    /**
     * Defines the header HTML Element. Will be shown in the header area on phone devices. This prop will be ignored in tablets and desktop browsers.
     *
     * __Note:__ When passing a custom React component to this prop, you have to make sure your component reads the `slot` prop and appends it to the most outer element of your component.
     * Learn more about it [here](https://ui5.github.io/webcomponents-react/v2/?path=/docs/knowledge-base-handling-slots--page).
     */
    header?: UI5WCSlotsNode;
    /**
     * Defines the actions of the `ActionSheet`.
     *
     * __Note:__ Although this slot accepts all HTML Elements, it is strongly recommended that you only use `Buttons` in order to preserve the intended design.
     */
    children?: ReactElement<ButtonPropTypes> | ReactElement<ButtonPropTypes>[];
    /**
     * Hides the cancel button below the action buttons on mobile devices. No cancel button will be shown on desktop and tablet devices.
     */
    hideCancelButton?: boolean;
    /**
     * Defines internally used accessibility properties/attributes.
     */
    accessibilityAttributes?: {
        actionSheetMobileContent?: {
            role?: string;
        };
    };
}
/**
 * The `ActionSheet` holds a list of buttons from which the user can select to complete an action.
 *
 * The children of the action sheet should be `Button` components. Elements in the `ActionSheet` are start-aligned. Actions should be arranged in order of importance, from top to bottom.
 *
 * ### Guidelines
 * - Always display text or text and icons for the actions. Do not use icons only.
 * - Always provide a Cancel button on mobile phones.
 * - Avoid scrolling on action sheets.
 *
 */
declare const ActionSheet: import("react").ForwardRefExoticComponent<ActionSheetPropTypes & import("react").RefAttributes<ResponsivePopoverDomRef>>;
export { ActionSheet };