@wordpress/components
Version:
UI components for WordPress.
68 lines • 2.16 kB
TypeScript
/**
* External dependencies
*/
import type { CSSProperties } from 'react';
/**
* Internal dependencies
*/
import type { ResponsiveCSSValue } from '../ui/utils/types';
export declare type FlexDirection = ResponsiveCSSValue<CSSProperties['flexDirection']>;
export declare type FlexProps = {
/**
* Aligns children using CSS Flexbox `align-items`. Vertically aligns content if the `direction` is `row`, or horizontally aligns content if the `direction` is `column`.
*
* In the example below, `flex-start` will align the children content to the top.
*
* @default 'center'
*/
align?: CSSProperties['alignItems'];
/**
* The direction flow of the children content can be adjusted with `direction`. `column` will align children vertically and `row` will align children horizontally.
*
* @default 'row'
*/
direction?: FlexDirection;
/**
* Expands to the maximum available width (if horizontal) or height (if vertical).
*
* @default true
*/
expanded?: boolean;
/**
* Spacing in between each child can be adjusted by using `gap`. The value of `gap` works as a multiplier to the library's grid system (base of `4px`).
*
* @default 2
*/
gap?: import('react').ReactText;
/**
* Horizontally aligns content if the `direction` is `row`, or vertically aligns content if the `direction` is `column`.
* In the example below, `flex-start` will align the children content to the left.
*
* @default 'space-between'
*/
justify?: CSSProperties['justifyContent'];
/**
* Determines if children should wrap.
*
* @default false
*/
wrap?: boolean;
/**
* @deprecated
*/
isReversed?: boolean;
};
export declare type FlexItemProps = {
/**
* The (CSS) display of the `FlexItem`.
*/
display?: CSSProperties['display'];
/**
* Determines if `FlexItem` should render as an adaptive full-width block.
*
* @default true
*/
isBlock?: boolean;
};
export declare type FlexBlockProps = Omit<FlexItemProps, 'isBlock'>;
//# sourceMappingURL=types.d.ts.map