Actionsheet

Bottom sheet listing tappable actions with a cancel row. The size prop (xs, sm, md, lg, xl) sets the sheet width and padding.

Jump to API reference

Import

Vue

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

Actions

Vue

<UiActionsheet
  title="Booking #2041"
  :items="[{ label: 'Edit dates', icon: 'calendar' }, { label: 'Share', icon: 'share' }, { label: 'Cancel booking', icon: 'trash', tone: 'danger' }]"
  :open="open"
  @close="open = false"
 />

Sizes

Vue

<UiActionsheet
  size="lg"
  title="Booking #2041"
  :items="[{ label: 'Edit dates', icon: 'calendar' }, { label: 'Share', icon: 'share' }]"
  :open="open"
  @close="open = false"
 />

API reference

Bottom sheet with a list of actions and a Cancel button; use for mobile "more actions" menus.

Props

PropType and valuesDefaultDescription

openbooleanfalseShows the sheet when true; renders nothing when false.

titlestring—Optional heading.

items{ label: string; icon?: string; tone?: 'danger'; disabled?: boolean; onClick?: () => void }[]'[]'Actions. Each item runs its own onClick, then select, then the sheet closes. Tone "danger" colors it red.

cancelLabelstring'Cancel'Text of the cancel row.

sizexssmmdlgxl'md'Scale of sheet width and padding.

Events

Vue: @name. React: onName.

selectCalled with the whole clicked item after its onClick.

closeCalled after any item is chosen, on Cancel, on the Escape key and on a scrim click.