@hawk-ui/bottom-drawer
v4.4.4
Published
hawk-ui: Basic Bottom Drawer Component
Downloads
218
Maintainers
Readme
Installation
To install a component run
$ npm install @hawk-ui/bottom-drawer --save
Please import CSS styles via
@import '/path__to__node_modules/@hawk-ui/bottom-drawer/dist/index.min.css
Usage
With Close Button and background dark
import BottomDrawer from '@hawk-ui/bottom-drawer';
initialState = {
isLeftOpen: false,
};
<div style={{ display: 'flex', justifyContent: 'space-around' }}>
<div>
<BottomDrawer
isOpen={state.isLeftOpen}
hideCloseIcon
type="dark"
title="Modal Title"
position="left"
onKeyDown={(event) => {
setState({ isLeftOpen: false });
}}
onClose={() => {
setState({ isLeftOpen: false });
}}
>
<span>Bottom Drawer Body</span>
</BottomDrawer>
<button
type="button"
className="hawk-button"
onClick={() => {
setState({ isLeftOpen: !state.isLeftOpen });
}}
>
Click here
</button>
</div>
</div>
Without Close Button and background light
import BottomDrawer from '@hawk-ui/bottom-drawer';
initialState = {
isLeftOpen: false,
isRightOpen: false,
};
<div style={{ display: 'flex', justifyContent: 'space-around' }}>
<div>
<BottomDrawer
isOpen={state.isLeftOpen}
type="light"
title="Modal Title"
position="left"
onKeyDown={(event) => {
setState({ isLeftOpen: false });
}}
onClose={() => {
setState({ isLeftOpen: false });
}}
>
<span>Bottom Drawer Body</span>
</BottomDrawer>
<button
type="button"
className="hawk-button"
onClick={() => {
setState({ isLeftOpen: !state.isLeftOpen });
}}
>
Click here
</button>
</div>
</div>