@paprika/hf-panel NPM

@paprika/panel

Description

The Panel 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/panel

or with npm:

npm install @paprika/panel

Props

Panel

Prop	Type	required	default	Description
a11yText	string	false	null
children	node	true	-	The content for the Panel.
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 <Panel.Group>
height	string,number	false	"33%"	The height of the open Panel (when slide in from bottom)
isCompact	bool	false	false	Control the compactness of the Panel
isInline	bool	false	false	Render the panel inline
isOpen	bool	false	false	Control the visibility of the Panel. This prop makes the Panel appear.
kind	Panel.types.kind.DEFAULT, Panel.types.kind.CHILD, Panel.types.kind.PRIMARY	false	Panel.types.kinds.DEFAULT	Modify the look of the Panel
offset	shape	false	{ top: 0, left: 0, right: 0 }	Control offset of the Panel. Only use 'top' when sliding in from the left or right. Only use 'left' or 'right' when sliding in from the bottom.
onAfterClose	func	false	() => {}	Callback once the Panel has been closed event
onAfterOpen	func	false	() => {}	Callback once the Panel has been opened event
onClose	func	false	null	Callback triggered when the Panel needs to be close
slideFrom	Panel.types.slideFroms.RIGHT, Panel.types.slideFroms.LEFT, Panel.types.slideFroms.BOTTOM	false	Panel.types.slideFroms.RIGHT	Control where the Panel slides in from
width	string,number	false	"33%"	The width of the open Panel (when slide in from left or right)
zIndex	number	false	zValue(7)	Control the z-index of the Panel

Panel.Header

Prop	Type	required	default
children	node	true	-
getPushContentElement	func	false	() => {}
hasCloseButton	bool	false	true
isCompact	bool	false	false
isHeaderSticky	bool	false	false
kind	Header.types.kind.DEFAULT, Header.types.kind.PRIMARY	false	Header.types.kind.DEFAULT
level	1, 2, 3, 4, 5, 6	false	2
onClose	func	false	() => {}
refHeading	custom	false	null

Panel.Content

Prop	Type	required	default	Description
children	node	false	null	Body content of the Content

Panel.Footer

Prop	Type	required	default
children	node	true	-
height	number	false	72
isSticky	bool	false	false

Panel.Overlay

Prop	Type	required	default	Description
backdropClassName	string	false	-
children	func	false	-
container	node	false	-	container of the Overlay element
focusLockOptions	shape	false	-
hasBackdrop	bool	false	-
isOpen	bool	false	-
onClose	func	false	-
onAfterOpen	func	false	-
onAfterClose	func	false	-
zIndex	number	false	-	The z-index of the Panel Overlay

Panel.Trigger

Prop	Type	required	default	Description
children	node	true	-

Components

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

<Panel.Content />
<Panel.Header />
<Panel.Footer />
<Panel.Overlay />
<Panel.FocusLock />
<Panel.Trigger />

Basic examples

import Panel from "@paprika/panel";

const [isOpen, setIsOpen] = React.useState(true);

<Panel isOpen={isOpen} onClose={() => setIsOpen(false)} slideFrom={Panel.types.slideFrom.LEFT}>
  <Panel.Header kind="primary">Header</Panel.Header>
  <Panel.Content>Your content here</Panel.Content>
  <Panel.Footer>
    <button>Accept</button>
    <button>Cancel</button>
  </Panel.Footer>
</Panel>;

FocusLock

There are issues when using FocusLock without the <Panel.Overlay />. Therefore the Panel will not use the focus lock when there is no overlay present. Focus locking will only be used when overlay is used to prevent this issue.

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

Links

@babel/runtime-corejs2 @paprika/button @paprika/constants @paprika/heading @paprika/helpers @paprika/icon @paprika/overlay @paprika/stylers @paprika/themes @paprika/tokens lodash.debounce prop-types react-focus-lock

@infinitebrahmanuniverse/nolb-_pap @everything-registry/sub-chunk-704

0.1.3-hack

3 years ago

0.1.0-hack

3 years ago