UNPKG

4.03 kBTypeScriptView Raw
1import * as React from 'react';
2export interface FlexItemProps extends React.HTMLProps<HTMLDivElement> {
3 /** content rendered inside the Flex layout */
4 children?: React.ReactNode;
5 /** additional classes added to the Flex layout */
6 className?: string;
7 /** Spacers at various breakpoints */
8 spacer?: {
9 default?: 'spacerNone' | 'spacerXs' | 'spacerSm' | 'spacerMd' | 'spacerLg' | 'spacerXl' | 'spacer2xl' | 'spacer3xl' | 'spacer4xl';
10 sm?: 'spacerNone' | 'spacerXs' | 'spacerSm' | 'spacerMd' | 'spacerLg' | 'spacerXl' | 'spacer2xl' | 'spacer3xl' | 'spacer4xl';
11 md?: 'spacerNone' | 'spacerXs' | 'spacerSm' | 'spacerMd' | 'spacerLg' | 'spacerXl' | 'spacer2xl' | 'spacer3xl' | 'spacer4xl';
12 lg?: 'spacerNone' | 'spacerXs' | 'spacerSm' | 'spacerMd' | 'spacerLg' | 'spacerXl' | 'spacer2xl' | 'spacer3xl' | 'spacer4xl';
13 xl?: 'spacerNone' | 'spacerXs' | 'spacerSm' | 'spacerMd' | 'spacerLg' | 'spacerXl' | 'spacer2xl' | 'spacer3xl' | 'spacer4xl';
14 '2xl'?: 'spacerNone' | 'spacerXs' | 'spacerSm' | 'spacerMd' | 'spacerLg' | 'spacerXl' | 'spacer2xl' | 'spacer3xl' | 'spacer4xl';
15 };
16 /** Whether to add flex: grow at various breakpoints */
17 grow?: {
18 default?: 'grow';
19 sm?: 'grow';
20 md?: 'grow';
21 lg?: 'grow';
22 xl?: 'grow';
23 '2xl'?: 'grow';
24 };
25 /** Whether to add flex: shrink at various breakpoints */
26 shrink?: {
27 default?: 'shrink';
28 sm?: 'shrink';
29 md?: 'shrink';
30 lg?: 'shrink';
31 xl?: 'shrink';
32 '2xl'?: 'shrink';
33 };
34 /** Value to add for flex property at various breakpoints */
35 flex?: {
36 default?: 'flexDefault' | 'flexNone' | 'flex_1' | 'flex_2' | 'flex_3' | 'flex_4';
37 sm?: 'flexDefault' | 'flexNone' | 'flex_1' | 'flex_2' | 'flex_3' | 'flex_4';
38 md?: 'flexDefault' | 'flexNone' | 'flex_1' | 'flex_2' | 'flex_3' | 'flex_4';
39 lg?: 'flexDefault' | 'flexNone' | 'flex_1' | 'flex_2' | 'flex_3' | 'flex_4';
40 xl?: 'flexDefault' | 'flexNone' | 'flex_1' | 'flex_2' | 'flex_3' | 'flex_4';
41 '2xl'?: 'flexDefault' | 'flexNone' | 'flex_1' | 'flex_2' | 'flex_3' | 'flex_4';
42 };
43 /** Value to add for align-self property at various breakpoints */
44 alignSelf?: {
45 default?: 'alignSelfFlexStart' | 'alignSelfFlexEnd' | 'alignSelfCenter' | 'alignSelfStretch' | 'alignSelfBaseline';
46 sm?: 'alignSelfFlexStart' | 'alignSelfFlexEnd' | 'alignSelfCenter' | 'alignSelfStretch' | 'alignSelfBaseline';
47 md?: 'alignSelfFlexStart' | 'alignSelfFlexEnd' | 'alignSelfCenter' | 'alignSelfStretch' | 'alignSelfBaseline';
48 lg?: 'alignSelfFlexStart' | 'alignSelfFlexEnd' | 'alignSelfCenter' | 'alignSelfStretch' | 'alignSelfBaseline';
49 xl?: 'alignSelfFlexStart' | 'alignSelfFlexEnd' | 'alignSelfCenter' | 'alignSelfStretch' | 'alignSelfBaseline';
50 '2xl'?: 'alignSelfFlexStart' | 'alignSelfFlexEnd' | 'alignSelfCenter' | 'alignSelfStretch' | 'alignSelfBaseline';
51 };
52 /** Value to use for margin: auto at various breakpoints */
53 align?: {
54 default?: 'alignLeft' | 'alignRight';
55 sm?: 'alignLeft' | 'alignRight';
56 md?: 'alignLeft' | 'alignRight';
57 lg?: 'alignLeft' | 'alignRight';
58 xl?: 'alignLeft' | 'alignRight';
59 '2xl'?: 'alignLeft' | 'alignRight';
60 };
61 /** Whether to set width: 100% at various breakpoints */
62 fullWidth?: {
63 default?: 'fullWidth';
64 sm?: 'fullWidth';
65 md?: 'fullWidth';
66 lg?: 'fullWidth';
67 xl?: 'fullWidth';
68 '2xl'?: 'fullWidth';
69 };
70 /** Modifies the flex layout element order property */
71 order?: {
72 default?: string;
73 md?: string;
74 lg?: string;
75 xl?: string;
76 '2xl'?: string;
77 };
78 /** Sets the base component to render. defaults to div */
79 component?: React.ElementType<any> | React.ComponentType<any>;
80}
81export declare const FlexItem: React.FunctionComponent<FlexItemProps>;
82//# sourceMappingURL=FlexItem.d.ts.map
\No newline at end of file