React Layout Component
npm install @fine1012/react-layout-componentThis modal is simple react-layout-component.
- Typescript support
For more Information: See Component Docs
Includes the following components:
- Container
- Flex
- Grid
- Tab
To install, you can use npm or yarn:
```
$ npm install @fine1012/react-layout-component
$ yarn add @fine1012/react-layout-component
The Container component implements a layout that limits the maximum width of the content and places it in the center according to the width of the screen.
#### props
[optional]
- width: string: Width of Containerheight: string
- : Height of ContainermaxWidth: string
- : Max width of ContainermaxHeight: string
- : Max height of ContainerminWidth: string
- : Min width of ContainerminHeight: string
- : Min height of ContainerbgColor: string
- : Background color of Containercolor: string
- : Font color of Containerborder: string
- : Border of Container(width | style | color)borderRadius: string
- : Border radius of Containerpadding: string
- : Padding of Containermargin: string
- : Margin of Container
#### Usage
`javascript
import { Container } from '@fine1012/react-modal';
const Example = () => {
return (
hi
);
};
export default Example;
`
The Grid component implements a layout that arranges child components in a grid.
#### props
[optional]
- rows: number, rowTrackList: string: grid-template-rows: repeat(rows, rowTrackList)columns: number
- , columnTrackList: string: grid-template-rows: repeat(column, columnTrackList)rowGap: string
- : Row gap of GridcolumnGap: string
- : Column gap of Grid
#### Usage
`javascript
import { Grid } from '@fine1012/react-modal';
const Example = () => {
return (
column={2}
columnTrackList='60px'
rowGap='2rem'
columnGap='1rem'
>
export default Example;
`
Flex components implement a layout that flexibly arranges child components.
#### props
[optional]
- direction: 'row' | 'column': Direction of Flexjustify: 'stretch' | 'flex-start' | 'flex-end' | 'center' | 'space-between' | 'space-around' | 'space-evenly'
- : justify-contentalign: 'stretch' | 'flex-start' | 'flex-end' | 'center' | 'self-start' | 'self-end' | 'baseline'
- : align-itemswrap: 'no-wrap' | 'wrap' | 'wrap-reverse'
- : flex-wrapgap: string
- : Gap of Flex
#### Usage
`javascript
import { Flex } from '@fine1012/react-modal';
const Example = () => {
return (
hi
hi
hi
);
};
export default Example;
`
Tabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.
The components are as follows:
- TabProvider
[optional]
- defaultIndex: number (default: 0)index: number
- : for Controlled TabsonChange: any
- : for Controlled Tabs
- Tabs
- Tab
[optional]
- icon: ReactElementiconDirection: 'row' | 'column'
- (default: column)
- TabPanels
- TabPanel
#### Usage
`javascript
import {
TabProvider,
Tabs,
Tab,
TabPanels,
TabPanel,
} from '@fine1012/react-modal';
const Example = () => {
return (
);
};
export default Example;
``