Dialog

A modal, interactive content box that can be submitted or dismissed.

Code

<script lang="ts">
  import { Dialog } from '@geoffcox/sterling-svelte';
</script>

<Dialog bind:open bind:returnValue>
  <!-- Add content snippet or header, body, and footer snippets -->
</Dialog>

Members

Property Name	Type	Default	Comment
backdropCloses	boolean \| null \| undefined	false	When true, clicking outside the dialog causes the dialog to close.
body	Snippet \| undefined	undefined	The body within the dialog content.
content	Snippet \| undefined	undefined	The entire content of the dialog. Defaults to header, body, and footer snippets.
footer	Snippet \| undefined	undefined	The footer within the dialog content.
header	Snippet\| undefined	undefined	The header within the dialog content. Defaults to headerTitle and close button.
headerTitle	string \| Snippet \| undefined	undefined	The title within the header.
open	boolean \| null \| undefined	false	When true, the dialog is open; otherwise the dialog is closed
returnValue	string \| undefined	''	A value indicates OK, empty indicates cancellation.
variant	string	''	Additional class names to apply

Considerations

The dialog is always modal.
The cancel event is only raised when the escape key is pressed.
Includes HTMLDialogElement props, events, and methods.

Anatomy

<dialog class="sterling-dialog">
  <form>
    <div class="content">
      {#if content}
        {@render content()}
      {:else}
        <div class="header">
          {@render header()}
          <div class="title">
            {@render headerTitle()}
          </div>
          <div class="close">
            <Button>
              <div class="close-x">
              </div>
            </Button>
          </div>
        </div>
        <div class="body">
          {@render body()}
        </div>
        <div class="separator"></div>
        <div class="footer">
          {@render footer()}
        </div>
      {/if}
    </div>
  </form>
</dialog>