Skip to content

Bottom Sheet Switcher

@astryxdesign/core v0.7.1 · BottomSheetSwitcher

Props ​

PropTypeDefaultDescription
activeSheetstring | nullnullBound with v-model:active-sheet. The sheet-id of the step to show. Bind it to null to close the whole flow.
labelstring—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 purposeHow the whole flow may be dismissed. info allows Escape, a scrim click, and a swipe; form allows Escape only; required blocks every implicit path.
hasScrimbooleantrueDraws 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, or null to close. This is the v-model:active-sheet binding.
  • cancel(event: Event): fires when the dialog receives a native cancel request, before the flow closes. Call event.preventDefault() on the event to keep it open.

Slots ​

  • default: the BottomSheet steps. Each one needs a unique sheet-id and its own label.