Overlays

Sheet

Bottom-aligned modal surface with managed focus and drag-to-dismiss behavior.

Playground

Configure the baseline public contract and copy synchronized Vue markup.

Open sheet

Choose an action

Bottom sheets keep related actions close to the current task.

Done

Properties

Open

Outside click

Escape

Vue

<m-button
  @click="open = true"
>
  Open sheet
</m-button>

<m-sheet
  click-to-close
  esc-to-close
  v-model="open"
>
  <strong>
    Choose an action
  </strong>
  <p>
    Bottom sheets keep related actions close to the current task.
  </p>
  <m-button
    @click="open = false"
  >
    Done
  </m-button>
</m-sheet>

MSheet API

Props, slots, and events are extracted from the current public UI Kit contract.

MSheet

Overlay family

src/runtime/components/ui/sheet

Props

NameTypeDefault

clickToClose

booleantrue

escToClose

booleantrue

parent

M3ModalContext | nullundefined

Slots

Events

@cancelvoid

@confirmunknown