side-sheet

v4.15.0

STATUS

Passing

DOWNLOADS

LICENSE

MIT

VISIBILITY

Public

PUBLISHED

5 years ago

SIZE

N/A

1 contributor

Install side-sheet as a package?

Copied

npm i @bit/segmentio.evergreen.side-sheet

Set Bit as a scoped registryLearn more

npm config set '@bit:registry' https://node.bit.cloud

Component Example

React

Vue

Angular

React Native

Add dependency...

Just

import

any of the 1 million components

and packages in Bit or NPM to the example.

import Button from '@bit/grommet.grommet.button';
import Lodash from 'lodash';

Properties

Name	Type	Default value	Description
isClosing	`bool`
position (required)	`Position.LEFT \| Position.RIGHT \| Position.TOP \| Position.BOTTOM`
children (required)	`node \| function`		Children can be a string, node or a function accepting `({ close })`.
isShown	`bool`		When true, the Side Sheet is shown.
onCloseComplete	`function`	`() => {}`	Function that will be called when the exit transition is complete.
onOpenComplete	`function`	`() => {}`	Function that will be called when the enter transition is complete.
onBeforeClose	`function`		Function called when overlay is about to close. Return `false` to prevent the sheet from closing. type: `Function -> Boolean`
shouldCloseOnOverlayClick	`bool`	`true`	Boolean indicating if clicking the overlay should close the overlay.
shouldCloseOnEscapePress	`bool`	`true`	Boolean indicating if pressing the esc key should close the overlay.
width	`string \| number`	`620`	Width of the SideSheet.
containerProps	`object`		Properties to pass through the SideSheet container Pane.
position	`Position.TOP \| Position.BOTTOM \| Position.LEFT \| Position.RIGHT`	`Position.RIGHT`	Positions the sheet to the top, left, right, or bottom of the screen.
preventBodyScrolling	`bool`		Whether or not to prevent scrolling in the outer body