@cimpress/react-components
Version:
React components to support the MCP styleguide
41 lines • 1.6 kB
TypeScript
import * as React from 'react';
type GapSize = 0 | 8 | 16 | 24 | 32 | 40 | 48 | 56 | 64 | 80 | 96;
type ColumnCount = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12;
export interface GridLayoutProps {
children?: React.ReactNode;
className?: string;
style?: React.CSSProperties;
gap?: GapSize;
}
export declare function GridLayout({ children, className, style, gap, ...props }: GridLayoutProps): React.JSX.Element;
export declare namespace GridLayout {
var Item: typeof GridLayoutItem;
}
interface GridItemProps {
children?: React.ReactNode;
className?: string;
style?: React.CSSProperties;
/** Number of columns to span */
span?: ColumnCount;
/** Number of columns to span at `>640px` */
smSpan?: ColumnCount;
/** Number of columns to span at `>768px` */
mdSpan?: ColumnCount;
/** Number of columns to span at `>1024px` */
lgSpan?: ColumnCount;
/** Number of columns to span at `>1280px` */
xlSpan?: ColumnCount;
/** Starting point of column */
start?: ColumnCount;
/** Starting point of column at `>640px` */
smStart?: ColumnCount;
/** Starting point of column at `>768px` */
mdStart?: ColumnCount;
/** Starting point of column at `>1024px` */
lgStart?: ColumnCount;
/** Starting point of column at `>1280px` */
xlStart?: ColumnCount;
}
export declare function GridLayoutItem({ children, className, style, span, smSpan, mdSpan, lgSpan, xlSpan, start, smStart, mdStart, lgStart, xlStart, ...props }: GridItemProps): React.JSX.Element;
export {};
//# sourceMappingURL=GridLayout.d.ts.map