Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 | 19x 19x 19x 152x 152x 152x 152x 152x 152x 152x 152x 152x 152x 152x 152x 152x 152x 152x 152x 152x 152x 152x 152x 152x 152x 152x 152x 152x 152x 152x 152x 152x 152x | import * as classNames from 'classnames';
import * as React from 'react';
export interface IProps {
xs?: number;
sm?: number;
md?: number;
lg?: number;
xl?: number;
xsOffset?: number;
smOffset?: number;
mdOffset?: number;
lgOffset?: number;
xlOffset?: number;
xsFill?: number;
smFill?: number;
mdFill?: number;
lgFill?: number;
xlFill?: number;
xsPush?: number;
smPush?: number;
mdPush?: number;
lgPush?: number;
xlPush?: number;
xsPull?: number;
smPull?: number;
mdPull?: number;
lgPull?: number;
xlPull?: number;
}
export const Column: React.SFC<IProps & React.HTMLProps<HTMLDivElement>> = (props) => {
const {
children,
className,
xs,
sm,
md,
lg,
xl,
xsOffset,
smOffset,
mdOffset,
lgOffset,
xlOffset,
xsFill,
smFill,
mdFill,
lgFill,
xlFill,
xsPush,
smPush,
mdPush,
lgPush,
xlPush,
xsPull,
smPull,
mdPull,
lgPull,
xlPull,
...remainingProps
} = props;
const myClassNames = [
'column',
xs && `xs-${xs}`,
sm && `sm-${sm}`,
md && `md-${md}`,
lg && `lg-${lg}`,
xl && `xl-${xl}`,
xsOffset && `xs-offset-${xsOffset}`,
smOffset && `sm-offset-${smOffset}`,
mdOffset && `md-offset-${mdOffset}`,
lgOffset && `lg-offset-${lgOffset}`,
xlOffset && `xl-offset-${xlOffset}`,
xsFill && `xs-fill-${xsFill}`,
smFill && `sm-fill-${smFill}`,
mdFill && `md-fill-${mdFill}`,
lgFill && `lg-fill-${lgFill}`,
xlFill && `xl-fill-${xlFill}`,
xsPush && `xs-push-${xsPush}`,
smPush && `sm-push-${smPush}`,
mdPush && `md-push-${mdPush}`,
lgPush && `lg-push-${lgPush}`,
xlPush && `xl-push-${xlPush}`,
xsPull && `xs-pull-${xsPull}`,
smPull && `sm-pull-${smPull}`,
mdPull && `md-pull-${mdPull}`,
lgPull && `lg-pull-${lgPull}`,
xlPull && `xl-pull-${xlPull}`,
className
];
return (
<div {...remainingProps} className={classNames(myClassNames)}>
{children}
</div>
);
};
|