@dnb/eufemia
Version:
DNB Eufemia Design System UI Library
45 lines (44 loc) • 2.48 kB
TypeScript
import type { HTMLAttributes } from 'react';
import type { SpaceProps } from '../space/Space';
import type { MediaQueryBreakpoints } from '../../shared/MediaQueryUtils';
import type { UseMediaQueries } from '../../shared/useMedia';
type Gap = false | 'xx-small' | 'x-small' | 'small' | 'medium' | 'large' | 'x-large' | 'xx-large';
export type FlexContainerProps = {
direction?: 'horizontal' | 'vertical';
wrap?: boolean;
/**
* Define if intrinsic DOM child elements such as `li` should be wrapped in `Space` to receive spacing. Set to `false` to keep them as direct descendants.
* Default: `true`
*/
wrapChildrenInSpace?: boolean;
rowGap?: Gap;
sizeCount?: number;
/**
* Distribute sub components along the main axis (CSS `justify-content`). In horizontal direction, this controls left-to-right placement. In vertical direction, this controls top-to-bottom placement.
* Default: `'flex-start'`
*/
justify?: 'flex-start' | 'flex-end' | 'center' | 'space-between' | 'space-around' | 'space-evenly';
/**
* Align sub components along the cross axis (CSS `align-items`). In horizontal direction, this controls vertical alignment. In vertical direction, this controls horizontal alignment.
* Default: `'flex-start'`
*/
align?: 'flex-start' | 'flex-end' | 'center' | 'stretch' | 'baseline';
/** For when used as a flex item in an outer container in addition to being a container: */
alignSelf?: 'flex-start' | 'flex-end' | 'center' | 'baseline' | 'stretch';
/**
* How to separate sub components.
* Default: `'space'`
*/
divider?: 'space' | 'line' | 'line-framed';
/**
* How much space between child items. Use `false` for no spacing. If in vertical layout: if both `rowGap` and `gap` is set, `rowGap` will be used.
* Default: `'small'`
*/
gap?: Gap;
breakpoints?: MediaQueryBreakpoints;
queries?: UseMediaQueries;
};
export type FlexContainerAllProps = FlexContainerProps & SpaceProps & Omit<HTMLAttributes<HTMLDivElement>, 'ref' | 'wrap' | 'value' | 'label' | 'title' | 'placeholder'>;
export declare function pickFlexContainerProps<T extends FlexContainerAllProps>(props: T, defaults?: Partial<FlexContainerAllProps>, skip?: Array<keyof FlexContainerAllProps>): Omit<FlexContainerAllProps, 'children'>;
declare function FlexContainer(props: FlexContainerAllProps): import("react/jsx-runtime").JSX.Element;
export default FlexContainer;