@fluentui/react-northstar
Version:
A themable React component library.
52 lines (51 loc) • 2.55 kB
TypeScript
import * as PropTypes from 'prop-types';
import * as React from 'react';
import { UIComponentProps, ChildrenComponentProps } from '../../utils';
import { FlexItem } from './FlexItem';
export interface FlexProps extends UIComponentProps, ChildrenComponentProps {
/** Defines if container should be inline element. */
inline?: boolean;
/** Sets vertical flow direction. */
column?: boolean;
/** Allows overflow items to wrap on the next container's line. */
wrap?: boolean;
/** Controls items alignment in horizontal direction. */
hAlign?: 'start' | 'center' | 'end' | 'stretch';
/** Controls items alignment in vertical direction. */
vAlign?: 'start' | 'center' | 'end' | 'stretch';
/** Defines strategy for distributing remaining space between items. */
space?: 'around' | 'between' | 'evenly';
/** Defines gap between each two adjacent child items. */
gap?: 'gap.smaller' | 'gap.small' | 'gap.medium' | 'gap.large';
/** Defines container's padding. */
padding?: 'padding.medium';
/** Enables debug mode. */
debug?: boolean;
/** Orders container to fill all parent's space available. */
fill?: boolean;
}
export declare type FlexStylesProps = Pick<FlexProps, 'column' | 'debug' | 'fill' | 'gap' | 'hAlign' | 'inline' | 'padding' | 'space' | 'vAlign' | 'wrap'>;
export declare const flexClassName = "ui-flex";
/**
* A Flex is a layout component that arranges group of items aligned towards common direction (either row or column).
*/
export declare const Flex: (<TExtendedElementType extends React.ElementType<any> = "div">(props: React.RefAttributes<HTMLDivElement> & Omit<import("@fluentui/react-bindings").PropsOfElement<TExtendedElementType>, "as" | keyof FlexProps> & {
as?: TExtendedElementType;
} & FlexProps) => JSX.Element) & {
propTypes?: React.WeakValidationMap<FlexProps> & {
as: React.Requireable<string | ((props: any, context?: any) => any) | (new (props: any, context?: any) => any)>;
};
contextTypes?: PropTypes.ValidationMap<any>;
defaultProps?: Partial<FlexProps & {
as: "div";
}>;
displayName?: string;
readonly __PRIVATE_PROPS?: React.RefAttributes<HTMLDivElement> & Omit<Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof React.HTMLAttributes<HTMLDivElement>> & {
ref?: React.Ref<HTMLDivElement>;
}, "as" | keyof FlexProps> & {
as?: "div";
} & FlexProps;
} & {
handledProps: (keyof FlexProps)[];
Item: typeof FlexItem;
};