BottomSheet

Mobile-style sheet that rises from the bottom, with optional title and footer. The size prop (xs, sm, md, lg, xl) sets the sheet width and padding.

Jump to API reference

Import

Vue

import { UiBottomSheet } from '@ziyarago/ui/vue'

Basic

Vue

<UiBottomSheet title="Select room" :open="open" @close="open = false">
  Double room, 2 adults, breakfast included.
</UiBottomSheet>

With footer

Vue

<UiBottomSheet
  title="Price breakdown"
  max-height="60vh"
  :open="open"
  @close="open = false"
>
  Room 5 nights: $450. Taxes: $45.
  <template #footer>Total $495</template>
</UiBottomSheet>

Sizes

Vue

<UiBottomSheet
  size="lg"
  title="Select room"
  :open="open"
  @close="open = false"
>
  Double room, 2 adults, breakfast included.
</UiBottomSheet>

API reference

Panel anchored to the bottom of the screen with a grab handle; use for mobile pickers and short forms.

Props

PropType and valuesDefaultDescription

openbooleanfalseShows the sheet when true; renders nothing when false.

titlestring—Optional heading; also the aria-label.

maxHeightstring | number'85vh'Maximum height: a CSS length or a number of pixels.

sizexssmmdlgxl'md'Scale of sheet width (360 to 800 px) and padding.

Slots

Vue: named slots. React: a prop with the same name; default is children.

defaultSheet content.

footerSticky footer, e.g. buttons. Rendered only when provided.

Events

Vue: @name. React: onName.

closeCalled on a click on the scrim or the Escape key.

Notes

The handle is decorative: it does not support dragging.
There is no close button; always handle close (scrim click and Escape). Escape calls close; on open focus moves into the dialog, Tab is trapped inside it and focus returns to the previously focused element on close.