Sheet

Statusstable
Published4.5.0

If you need a full-page view that also keeps the user oriented with where they were in the background, use a Sheet. This is appropriate for looking in further detail, or when expanding a collapsed "card"-like element.

Sheets are intended for use as a routed view. They are not a replacement for other popups, such as Inspectors or Confirmations, which are intentionally more compact and have standardized layouts.

They're also fully routable: you can have router-view areas inside Sheets.

<jds-button :to="{name: 'docs.patterns.sheet.example'}" >Open example</jds-button>
<router-view />

JdsSheet

Props

PropValueDefault
toLocationnone

Where to go upon clicking the close button or clicking on the edge backdrop. In general, this should go to whatever is intuitively "behind" the sheet.

By default, this just performs a browser "back" action. This is not acceptable if the sheet contains routing within itself, and those sheets must have an explicit to Location.

Slots

Slot
left

Optional left-hand sidebar content for the sheet. Best used for contextual elements that need to live nearby, to help people get around.

default

Main contents of the sheet. Unstyled, so you can have any elements in here.

Changelog

JOBILLA DESIGN SYSTEM