@smashing/side-sheet
v1.0.2
Published
Component used to show a panel attached to the edge of the screen.
Downloads
7
Readme
Side Sheet
yarn add @smashing/side-sheetBasic example
<Wrapper>
{({setIsShown, isShown}) => (
<SideSheet
isShown={isShown}
onCloseComplete={() => setIsShown(false)}
containerProps={{
display: 'flex',
flex: '1',
flexDirection: 'column'
}}
> Hello World!</SideSheet>
)}
</Wrapper>Change position
<Wrapper>
{({setIsShown, isShown}) => (
<SideSheet
isShown={isShown}
onCloseComplete={() => setIsShown(false)}
position='top'
containerProps={{
display: 'flex',
flex: '1',
flexDirection: 'column'
}}
> Hello World!</SideSheet>
)}
</Wrapper>Hide closing button
<Wrapper>
{({setIsShown, isShown}) => (
<SideSheet
isShown={isShown}
onCloseComplete={() => setIsShown(false)}
isClosingButtonVisible={false}
containerProps={{
display: 'flex',
flex: '1',
flexDirection: 'column'
}}
> Hello World!</SideSheet>
)}
</Wrapper>