SusModal

Modal dialog with backdrop, focus trap, and header / body / footer slots.

Package

SusKit · Molecules (commercial)

No API metadata for SusModal. Run npm run extract.

Usage

<template>
  <sus:SusModal :Model="Open.Value" Width="480" @opened="OnOpened">
    <template #header>
      <ui:Label text="Confirm" />
    </template>
    <ui:Label text="Are you sure?" />
    <template #footer>
      <sus:SusButton Text="Cancel" Variant="text" @click="Open.Value = false" />
      <sus:SusButton Text="OK" @click="Confirm" />
    </template>
  </sus:SusModal>
</template>

<script>
public Prop<bool> Open = new(false);
void OnOpened() { }
void Confirm() { Open.Value = false; }
</script>

Set Persistent to keep the modal open on backdrop / Escape.