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

React Wrapper for UI5 Web Components and additional components

import type { CSSProperties, ReactNode } from 'react';
import { FlexBoxAlignItems } from '../../enums/FlexBoxAlignItems.js';
import { FlexBoxDirection } from '../../enums/FlexBoxDirection.js';
import { FlexBoxJustifyContent } from '../../enums/FlexBoxJustifyContent.js';
import { FlexBoxWrap } from '../../enums/FlexBoxWrap.js';
import type { CommonProps } from '../../types/index.js';
export interface FlexBoxPropTypes extends CommonProps {
    /**
     * Controls the alignment of items on the Cross Axis.
     *
     * __Note:__ Corresponds to `align-items`.
     */
    alignItems?: FlexBoxAlignItems | keyof typeof FlexBoxAlignItems;
    /**
     * Controls how the items are placed in the `FlexBox`.
     *
     * __Note:__ 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.
     *
     * __Note:__ 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.
     *
     * __Note:__ Corresponds to `flex-wrap`.
     */
    wrap?: FlexBoxWrap | keyof typeof FlexBoxWrap;
    /**
     * Define the gap (gutters) between flex items and flex lines.
     *
     * __Note:__ Corresponds to the `gap` CSS Property.
     */
    gap?: CSSProperties['gap'];
    /**
     * 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.
 *
 * __Note:__ Since `FlexBox` is purely a layout component, it does not have any associated global design specifications.
 */
declare const FlexBox: import("react").ForwardRefExoticComponent<FlexBoxPropTypes & import("react").RefAttributes<HTMLDivElement>>;
export { FlexBox };