@fluentui/react-northstar
Version:
A themable React component library.
63 lines (62 loc) • 2.41 kB
TypeScript
import { ICSSInJSStyle } from '@fluentui/styles';
import * as React from 'react';
import { UIComponentProps } from '../../utils';
import { FluentComponentStaticProps } from '../../types';
import { ComponentWithAs } from '@fluentui/react-bindings';
export interface LayoutSlotClassNames {
start: string;
main: string;
end: string;
gap: string;
reducedStart: string;
reducedMain: string;
reducedEnd: string;
}
export interface LayoutProps extends UIComponentProps {
debug?: boolean;
renderStartArea?: (params: LayoutProps & {
classes: Record<string, string>;
}) => React.ReactNode;
renderMainArea?: (params: LayoutProps & {
classes: Record<string, string>;
}) => React.ReactNode;
renderEndArea?: (params: LayoutProps & {
classes: Record<string, string>;
}) => React.ReactNode;
renderGap?: (params: LayoutProps & {
classes: Record<string, string>;
}) => React.ReactNode;
/** Styled applied to the root element of the rendered component. */
rootCSS?: ICSSInJSStyle;
start?: any;
startCSS?: ICSSInJSStyle;
startSize?: string;
main?: any;
mainCSS?: ICSSInJSStyle;
mainSize?: string;
end?: any;
endCSS?: ICSSInJSStyle;
endSize?: string;
/** How to align items on-axis within the layout (i.e. vertical or not). */
justifyItems?: React.CSSProperties['justifyItems'];
/** How to align cross-axis items within the layout (i.e. vertical or not). */
alignItems?: React.CSSProperties['alignItems'];
/** A layout can have gaps of whitespace between areas. */
gap?: string;
/** A layout can reduce to the minimum required areas. */
reducing?: boolean;
/** A layout can render its content directly if only one piece of content exists. */
disappearing?: boolean;
vertical?: boolean;
}
export declare const layoutClassName = "ui-layout";
export declare const layoutSlotClassNames: LayoutSlotClassNames;
export declare type LayoutStylesProps = Required<Pick<LayoutProps, 'alignItems' | 'debug' | 'gap' | 'justifyItems' | 'mainSize' | 'endSize' | 'startSize' | 'vertical'>> & {
hasStart: boolean;
hasMain: boolean;
hasEnd: boolean;
};
/**
* (DEPRECATED) A layout is a utility for arranging the content of a component.
*/
export declare const Layout: ComponentWithAs<'div', LayoutProps> & FluentComponentStaticProps<LayoutProps>;