This is just simple Container
that you can use.
You can control options(ex.minWidth) of Container
with props.
example
<Container minWidth={100} maxWidth={200}>
<div>Hello, World!</div>
</Container>
There are several options for Container
. I'll describe all of options for you.
minWidth
: TheminWidth
setting requiresnumber(px)
orstring(n%)
to be entered(default: '100%').
example of number
<Container minWidth={100}>Hello, World!</Container>
example of string
<Container minWidth={'100%'}>Hello, World!</Container>
-
maxWidth
: ThemaxWidth
setting requiresnumber(px)
orstring(n%)
to be entered(default: '100%'). -
overflow
: You can decide on theoverflow
option among the following options.auto | scroll | hidden | visible
-
padding
: You can determinepadding
by enteringnumber
forContainer
-
borderRadius
: TheborderRadius
setting requiresnumber(px)
orstring(n%)
to be entered.
example of number
<Container borderRadius={8}>Hello, World!</Container>
example of string
<Container borderRadius={'50%'}>Hello, World!</Container>
background
: Thebackground
setting requiresstring
that color name(ex.red, white) or Hex(ex. #ffffff)(default: 'white').
This is simple Gird
layout component.
You can control number of Grid
's columns, rows with props.
example
<Grid column={3} row={3} gap={10}>
<div>first</div>
<div>second</div>
<div>third</div>
<div>fourth</div>
<div>fifth</div>
<div>sixth</div>
</Grid>
-
column
: Thecolumn
decides value ofrepeat($value, 1fr)
attribute by enteringnumber
. -
row
: Therow
decides value ofrepeat($value, 1fr)
attribute by enteringnumber
likecolumn
does. -
gap
: Thegap
decides gap of columns and rows by enteringnumber
. -
padding
: You can determinepadding
by enteringnumber
forGrid
This is simple Flex
component you can use.
There are several options you can control. direction
, justify
, and so on.
-
direction
: You can decide on thedirection
option among the following options.row | column
-
justify
: You can decide on thejustify
option among the following options.center | baseline | flex-start | flex-end | space-around | space-between | space-evenly
-
align
: You can decide on thealign
option among the following options.center | flex-start | flex-end
-
gap
: Thegap
decides gap of columns and rows by enteringnumber
. -
padding
: You can determinepadding
by enteringnumber
forGrid
This Drawer
has children for render. Drawer
appear where anchor you input.
example
import { Drawer, useDrawer } from 'rego-layout-component';
// ...
const { isOpen, closeDrawer, openDrawer } = useDrawer();
return (
<div>
<button onClick={openDrawer}>open drawer</button>
<Drawer anchor="left" isOpen={isOpen} closeDrawer={closeDrawer} padding={1}>
<div>Home</div>
<div>MyPage</div>
<div>Setting</div>
</Drawer>
</div>
);
-
anchor
: You can decide on thedirection
option among the following options.'left' | 'right' | 'top' | 'bottom'
-
isOpen
: You can controlDrawer
's state byisOpen
. -
closeDrawer
: This function is used to closeDrawer
. -
padding
: You can determinepadding
by enteringnumber
forGrid