1.1.1 • Published 8 months ago
ks-layout v1.1.1
설치
$ npm install ks-layout
or
$ yarn add ks-layout
Container
Props
type ContainerProps = {
children?: ReactNode;
minWidth?: number;
maxWidth?: number;
padding?:
| number
| { top?: number; right?: number; bottom?: number; left?: number };
margin?:
| number
| { top?: number; right?: number; bottom?: number; left?: number };
...divElementTypes
};
Example
import { Container } from 'ks-layout';
const Demo = () => {
return (
<Container maxWidth={100} minWidth={100} padding={{ top: 200 }}>
<div>
<h1>Test</h1>
</div>
</Container>
);
};
export default Demo;
Flex
Props
type FlexProps = {
children?: ReactNode;
minWidth?: number;
maxWidth?: number;
padding?:
| number
| { top?: number; right?: number; bottom?: number; left?: number };
margin?:
| number
| { top?: number; right?: number; bottom?: number; left?: number };
alignItems?: Property.AlignItems;
alignContent?: Property.AlignContent;
alignSelf?: Property.AlignSelf;
justifyContent?: Property.JustifyContent;
justifyItems?: Property.JustifyItems;
justifySelf?: Property.JustifySelf;
flexDirection?: Property.FlexDirection;
flexWrap?: Property.FlexWrap;
...divElementTypes
};
Example
import { Flex } from 'ks-layout';
const Demo = () => {
return (
<Flex
maxWidth={100}
minWidth={100}
padding={{ top: 200 }}
alignItems="center"
justifyContent="center"
flexDirection="column"
>
<div>
<h1>Test</h1>
</div>
</Flex>
);
};
export default Demo;
Grid
Props
type GridProps = {
children?: ReactNode;
minWidth?: number;
maxWidth?: number;
padding?:
| number
| { top?: number; right?: number; bottom?: number; left?: number };
margin?:
| number
| { top?: number; right?: number; bottom?: number; left?: number };
row?: number;
column?: number;
gap?: {
row?: number;
column?: number;
};
...divElementTypes
};
Example
import { Grid } from 'ks-layout';
const Demo = () => {
return (
<Grid
maxWidth={100}
minWidth={100}
padding={{ top: 200 }}
row={3}
column={2}
gap={{ row: 30, column: 20 }}
>
<div>
<h1>Test</h1>
</div>
</Grid>
);
};
export default Demo;