Dialog

A <dialog>: A modal, interactive content box that can be submitted or dismissed

Code

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

  let open = false;
  let returnValue = ''; 
  const onOK = () => {
    returnValue = 'OK';
    open = false;
  };

  const onCancel = () => {
    returnValue = '';
    open = false;
  };
</script>

<Button on:click={() => open = true}>Open</Button>
<Dialog bind:open bind:returnValue>
  <svelte:fragment slot="title">
    <!-- TODO: Add dialog title -->
    </svelte:fragment>
  <svelte:fragment slot="body">
    <!-- TODO: Add dialog content -->
  </svelte:fragment>
  <svelte:fragment slot="footer">
      <Button on:click={() => onOK()}>OK</Button>
      <Button on:click={() => onCancel()}>Cancel</Button>
  </svelte:fragment>
</Dialog>

Members

Property Name	Type	Default	Comment
backdropCloses	boolean	false	When true, clicking outside the dialog causes the dialog close
open	boolean	false	When true, the dialog is open; otherwise the dialog is closed
returnValue	string	''	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, event, and methods

Anatomy

<dialog class="sterling-dialog">
  <form>
    <div class="content">
      <slot name="content">
        <div class="header">
          <slot name="header">
            <div class="title">
              <slot name="title" />
            </div>
            <div class="close">
              <Button>
                <div class="close-x" />
              </Button>
            </div>
          </slot>
        </div>
        <div class="body">
          <slot name="body" />
        </div>
        <div class="separator" />
        <div class="footer">
          <slot name="footer" />
        </div>
      </slot>
    </div>
  </form>
</dialog>