@paprika/sidepanel NPM

@paprika/sidepanel - 0.4.22-alpha.1

Description

The SidePanel component provides a view that slides in from one side so the user can maintain context of their main task while they work on a sub task.

Installation

yarn add @paprika/sidepanel

or with npm:

npm install @paprika/sidepanel

Props

SidePanel

Prop	Type	required	default	Description
a11yText	string	false	null
children	node	true	-	The content for the SidePanel.
getPushContentElement	func	false	null	Function that provides the container DOM element to be pushed.
groupOffsetY	number	false	0	Y offset that is passed down from <SidePanel.Group>
isCompact	bool	false	false	Control the compactness of the side panel
isInline	bool	false	false	Render the sidepanel inline
isOpen	bool	true	-	Control the visibility of the side panel. This prop makes the side panel appear
isSlideFromLeft	bool	false	false	Control if the side panel slides from the left
kind	SidePanel.types.kind.DEFAULT, SidePanel.types.kind.CHILD, SidePanel.types.kind.PRIMARY	false	SidePanel.types.kind.DEFAULT	Modify the look of the SidePanel
offsetY	number	false	0	Control y offset of the sidepanel
onAfterClose	func	false	() => {}	Callback once the sidepanel has been closed event
onAfterOpen	func	false	() => {}	Callback once the sidepanel has been opened event
onClose	func	false	null	Callback triggered when the side panel needs to be close
width	string,number	false	"33%"	The width of the open panel.
zIndex	number	false	zValue(7)	Control the z position of the sidepanel

Components

You can use any of the following components to compose the SidePanel:

<SidePanel.Header />
<SidePanel.Footer />
<SidePanel.Overlay />
<SidePanel.FocusLock />
<SidePanel.Trigger />

Basic examples.

<SidePanel isOpen={isOpen} onClose={() => {}}>
  [...your_content...]
</SidePanel>

<SidePanel isOpen={isOpen} onClose={() => {}}>
  <SidePanel.Header>Your header</SidePanel.Header>
  [...your_content...]
  <SidePanel.Overlay />
</SidePanel>

Warnings

If the content you are putting into this component will try and control focus (like CKEditor), read this: https://github.com/acl-services/paprika/issues/453