@ui5/webcomponents-react/wrappers/components/FlexBox/index.d.ts

React Wrapper for UI5 Web Components and additional components

import type { ReactNode } from 'react';
import { FlexBoxAlignItems, FlexBoxDirection, FlexBoxJustifyContent, FlexBoxWrap } from '../../enums/index.js';
import type { CommonProps } from '../../types/index.js';
export interface FlexBoxPropTypes extends CommonProps {
    /**
     * Controls the alignment of items on the Cross Axis.<br />
     * <b>Note:</b> Corresponds to `align-items`.
     */
    alignItems?: FlexBoxAlignItems | keyof typeof FlexBoxAlignItems;
    /**
     * Controls how the items are placed in the `FlexBox`.<br />
     * <b>Note:</b> Corresponds to `flex-direction`.
     */
    direction?: FlexBoxDirection | keyof typeof FlexBoxDirection;
    /**
     * Determines whether the `FlexBox` is in `flex` or `inline-flex` mode.
     */
    displayInline?: boolean;
    /**
     * Determines whether the `FlexBox` will be sized to completely fill its container.
     *
     * __Note:__ `fitContainer` only works if the height of the containing block is specified (i.e. it doesn't depend on content height)
     */
    fitContainer?: boolean;
    /**
     * Defines how the browser distributes space between and around items along the main-axis.<br />
     * <b>Note:</b> Corresponds to `justify-content`.
     */
    justifyContent?: FlexBoxJustifyContent | keyof typeof FlexBoxJustifyContent;
    /**
     * Determines whether the `FlexBox` should wrap, when there is not enough space to display all items in one line.<br />
     * <b>Note:</b> Corresponds to `flex-wrap`.
     */
    wrap?: FlexBoxWrap | keyof typeof FlexBoxWrap;
    /**
     * Content of the `FlexBox`.
     */
    children?: ReactNode | ReactNode[];
    /**
     * Sets the components outer HTML tag.
     *
     * __Note:__ For TypeScript the types of `ref` are bound to the default tag name, if you change it you are responsible to set the respective types yourself.
     */
    as?: keyof HTMLElementTagNameMap;
}
/**
 * The `FlexBox` builds the container for a flexible box layout by leveraging the CSS flexbox layout.
 */
declare const FlexBox: import("react").ForwardRefExoticComponent<FlexBoxPropTypes & import("react").RefAttributes<HTMLDivElement>>;
export { FlexBox };