1.0.0 • Published 2 years ago
devs-react-box v1.0.0
Flex, Grid, Container
Box
Props | Values | Default |
---|---|---|
justifyContent | string | center |
alignItems | "flex-start" , "flex-end" , "center" , "baseline" , "stretch" | center |
alignContent | "flex-start" , "flex-end" , "center" , "space-between" , "space-around" , "stretch" | null |
width | string eg: 20px | 100% |
height | string eg: 20px | 100% |
textAlign | "left" , "right" , "center" , "justify" , "inherit" | center |
wrap(fle-wrap) | "nowrap" , "wrap" , "wrap-reverse" | wrap |
direction(flex-direction) | row, row-reverse, column, column-reverse | row |
margin | string. Eg: 20px | 0 |
pad(padding) | string | 0 |
bgColor(background-color) | string | transparent |
Usage
import { Components, ThemeTypes } from "devs-react-box"
const theme: ThemeTypes = {
palette: {
Blue: {
dark: {
5: '#F2F6FA'
},
},
};
// shadows,
// typography,
// zIndex,
// shape,
// fontSizes,
};
const { Flex } = Components(theme)
const App = () => (
<Flex
justifyContent="center"
bgColor='Blue.dark.5'
// ...other propps if needed
>
This is a div
</Flex>
)
Grid
Props | Values | Default |
---|---|---|
columns(grid-template-columns) | string | 1fr |
rows(gird-template-rows) | string | auto |
gap(grid-gap) | string | 10px |
justifyContent | string | center |
alignItems | "flex-start" , "flex-end" , "center" , "baseline" , "stretch" | center |
width | 100% |
Usage
import { Components, ThemeTypes } from "devs-react-component-library"
const theme: ThemeTypes = {
// palette:
// shadows,
// typography,
// zIndex,
// shape,
// fontSizes,
};
const { Grid } = Components(theme)
const App = () => (
<Grid
row="1fr 1fr"
// ...other propps if needed
>
This is a div
</Grid>
)
Container
Props | Values | Default |
---|---|---|
width | string eg: 20px | 100% |
height | string eg: 20px | 100% |
textAlign | "left" , "right" , "center" , "justify" , "inherit" | center |
margin | string. Eg: 20px | 0 |
pad(padding) | string | 0 |
bgColor(background-color) | string | transparent |
Usage
import { Components, ThemeTypes } from "devs-react-component-library"
const theme: ThemeTypes = {
palette: {
read: '#F2F6FA'
};
// shadows,
// typography,
// zIndex,
// shape,
// fontSizes,
};
const { Grid } = Components(theme)
const App = () => (
<Container
width="50px"
bgColor='read'
// ...other propps if needed
>
This is a div
</Container>
)
1.0.0
2 years ago