Side Panel

Usage

import { Button, SidePanel } from '@wdzyi/ui';

const [open, setOpen] = useState(false);

<SidePanel
  open={open}
  onOpenChange={setOpen}
  title='Brand guidelines.pdf'
  description='PDF document, 4.2 MB'
  footer={<Button variant='foil' size={32}>Open</Button>}
>
  <FilePreview />
  <FileDetails />
</SidePanel>

Part of @wdzyi/ui. See setup to install it, or copy the code above.

Props

open, onOpenChangeboolean, (open: boolean) => void

Whether it’s open, and how it asks to close.

titlestring

Its heading, which names it for screen readers.

descriptionstring

A quieter line under the title.

childrenReactNode

What’s in it. Each child comes in on its own beat.

footerReactNode

Kept at the foot, such as its actions.

containedboolean = false

Slides within its nearest positioned parent, rather than over the window.

widthnumber = 400

Its widest, in px. Some of the page always shows beside it.

autoFocusboolean = true

Takes focus as it opens. Turn it off for one that opens by itself.

classNamestring

Added to the panel.

Notes

• It slides in over 440ms and out in 240ms. Its contents wait until it has all but settled, then come up 70ms apart, from the side it came.
• Focus goes into it, and Tab stays inside it until it closes, from its close button, Escape or a press on the dimmed page. Then focus goes back to wherever it was.
• Over the window, the page behind holds still while it’s open. Contained, it fills the box it’s in, which needs a position and a size, and slides within it.
• With reduced motion, it fades in where it stands.