Bottom Sheet Switcher
@astryxdesign/core v0.7.1 · BottomSheetSwitcher
Props
| Prop | Type | Default | Description |
|---|---|---|---|
activeSheet | string | null | null | Bound with v-model:active-sheet. The sheet-id of the step to show. Bind it to null to close the whole flow. |
label | string | — | Accessible name for the whole flow. When omitted, the active sheet's own label is used, and Bottom sheet when there is none. |
purpose | 'info' | 'form' | 'required' | active sheet's purpose | How the whole flow may be dismissed. info allows Escape, a scrim click, and a swipe; form allows Escape only; required blocks every implicit path. |
hasScrim | boolean | true | Draws one scrim for the entire flow. It stays up while steps change and only goes away when the flow closes. Without it the page behind stays interactive and scrolling. |
Events
update:activeSheet(value: string | null): fires with the step the switcher wants to show, ornullto close. This is thev-model:active-sheetbinding.cancel(event: Event): fires when the dialog receives a native cancel request, before the flow closes. Callevent.preventDefault()on the event to keep it open.
Slots
default: theBottomSheetsteps. Each one needs a uniquesheet-idand its ownlabel.