@wix/design-system
Version:
@wix/design-system
54 lines • 1.81 kB
TypeScript
import * as React from 'react';
export interface LayoutProps {
/** Applies a data-hook HTML attribute that can be used in the tests. */
dataHook?: string;
/** Accept single or multiple compound <Cell/> elements which store content items. Other nodes are accepted but not recommended. */
children?: React.ReactNode;
/**
* Specifies a CSS class name to be appended to the component's root element.
* @internal
*/
className?: string;
/**
* Control both vertical and horizontal distance between layout cells.
* @default 24px
*/
gap?: React.CSSProperties['gap'];
/** Set a number of grid columns to be rendered. */
cols?: number;
/** Align grid items on the X axis */
justifyItems?: React.CSSProperties['justifyItems'];
/** Aligns grid items on the Y axis */
alignItems?: React.CSSProperties['alignItems'];
/**
* Set all rows to have the same height in pixels or percentage.
* @default auto
*/
rowHeight?: React.CSSProperties['gridAutoRows'];
/** Set the height of the layout */
height?: React.CSSProperties['height'];
}
export interface CellProps {
/** hook for testing purposes */
dataHook?: string;
/** any node to be rendered inside */
children?: React.ReactNode;
/**
* how many columns should this cell occupy. Can be any number from 1 to 12 inclusive.
* @default 12
*/
span?: number;
/** whether to align children vertically to the middle */
vertical?: boolean;
/**
* how many rows should this cell occupy.
* @default 1
*/
rows?: number;
/**
* Specifies a CSS class name to be appended to the component's root element.
* @internal
*/
className?: string;
}
//# sourceMappingURL=Layout.types.d.ts.map