Wizard Modal

A wizard that finds place within a modal to guide the user through miscellaneous options and information to execute a final action.

<script lang="ts">let visible = false;
const steps = [
  {
    name: "EnterController",
    title: "Enter a controller"
  },
  {
    name: "ConfirmController",
    title: "Confirm the controller"
  }
];
let currentStep;
let modal;
const next = () => modal.next();
</script>

<button on:click={() => (visible = true)} class="primary">
  Open modal
</button>

{#if visible}
    <WizardModal {steps} bind:currentStep bind:this={modal} on:nnsClose={() => (visible = false)}>
      <svelte:fragment slot="title">My title</svelte:fragment>

      {#if currentStep?.name === "EnterController"}
        <p>Step to enter the controller</p>

        <button class="primary" on:click={modal.next}>
            Next
        </button>
      {/if}
      {#if currentStep?.name === "ConfirmController"}
        <p>Step to confirm the controller</p>
      {/if}
    </WizardModal>
{/if}

Usage

Unlike the <Modal /> that can be toggled through a property, the developer has to wrap the wizard within a condition to render the component or not.

Likewise, it is up to developer to handle the currentStep and render the correct information accordingly.

Properties

Functions

In addition to the properties, the component exposes various functions.

Showcase