1.0.6 • Published 1 year ago
@bismarkanes/container-base v1.0.6
Container Base
Small library container base for fast development based on flexbox
This library is using:
Install
npm install @bismarkanes/container-base
Note
- This library is intended to be small.
Usage
ContainerBaseRow is row oriented container using flex.
ContainerBaseBlock is block oriented container.
import React from 'react'
import { ContainerBaseRow, ContainerBaseBlock } from 'container-base'
class Example extends React.Component {
render() {
return (
<ContainerBaseRow>
<ContainerBaseBlock>
<ContainerBaseRow
border="2px solid grey"
justify="space-between"
align="center"
height="250px"
width="500px"
>
<p>Row 1, Block 1, Row 1</p>
<p>Row 1, Block 1, Row 2</p>
</ContainerBaseRow>
<ContainerBaseRow
border="2px solid grey"
justify="space-around"
align="flex-start"
height="250px"
width="500px"
>
<p>Row 1, Block 2, Row 1</p>
<p>Row 1, Block 2, Row 2</p>
</ContainerBaseRow>
</ContainerBaseBlock>
<ContainerBaseBlock>
<ContainerBaseRow
border="2px solid grey"
justify="space-between"
align="center"
height="250px"
width="500px"
>
<p>Row 2, Block 1, Row 1</p>
<p>Row 2, Block 1, Row 2</p>
</ContainerBaseRow>
<ContainerBaseRow
border="2px solid grey"
justify="space-around"
align="flex-start"
height="250px"
width="500px"
>
<p>Row 2, Block 2, Row 1</p>
<p>Row 2, Block 2, Row 2</p>
</ContainerBaseRow>
</ContainerBaseBlock>
</ContainerBaseRow>
)
}
}
Reference
TODO
License
Licensed under the MIT License, Copyright © 2023-present Bismark Johannes
See LICENSE for more information.