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

React Wrapper for UI5 Web Components and additional components

import type { CSSProperties, ReactNode } from 'react';
import { GridPosition } from '../../enums/GridPosition.js';
import type { CommonProps } from '../../types/index.js';
export interface GridPropTypes extends CommonProps {
    /**
     * Vertical spacing between the rows in the Grid. If not specified, then 1rem.
     *
     * @default `"1rem"`
     */
    vSpacing?: CSSProperties['height'];
    /**
     * Horizontal spacing between the content in the Grid. If not specified, then 1rem.
     *
     * @default `"1rem"`
     */
    hSpacing?: CSSProperties['width'];
    /**
     * Position of the Grid in the window or surrounding container. Possible values are "Center", "Left" and "Right".
     */
    position?: GridPosition | keyof typeof GridPosition;
    /**
     * A string type that represents Grid's default span values for very large, large, medium and small screens for the whole Grid.
     * Allowed values are separated by space Letters XL, L, M or S followed by number of columns from 1 to 12 that the container has to take, for example: "L2 M4 S6", "M12", "s10" or "l4 m4".
     * Note that the parameters has to be provided in the order very large, large, medium, small.
     *
     * You can override this default span on each child element by setting the prop `data-layout-span`.
     *
     * @default `"XL3 L3 M6 S12"`
     */
    defaultSpan?: string;
    /**
     * Defines default for the whole Grid numbers of empty columns before the current span begins. It can be defined for very large, large, medium and small screens.
     * Allowed values are separated by space Letters XL, L, M or S followed by number of columns from 0 to 12 that the container has to take, for example: "L2 M4 S6", "M11", "s10" or "l4 m4".
     * Note that the parameters has to be provided in the order very-large, large, medium, small.
     *
     * You can override this default indent on each child element by setting the prop `data-layout-indent`.
     *
     * @default `"XL0 L0 M0 S0"`
     */
    defaultIndent?: string;
    /**
     * Components that are placed into Grid layout.
     */
    children?: ReactNode | ReactNode[];
}
/**
 * A layout container component used for aligning items with various sizes in a simple grid.
 *
 * __Note:__ The `Grid` component is only applying grid styles only on the first level of its children. If you want to define a more complex grid, we recommend implementing a standard [CSS grid layout](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_grid_layout).
 *
 * __Note:__ The `Grid` currently doesn't implement the same wrapping behavior as the `sap.ui.layout.Grid`. To follow UXC guidelines use a different component.
 */
declare const Grid: import("react").ForwardRefExoticComponent<GridPropTypes & import("react").RefAttributes<HTMLDivElement>>;
export { Grid };