Modal

To use the Modal component, you need to import it into your Svelte file. This setup allows you to easily integrate the Modal component into your project.

<script>
  import { Modal } from "theui-svelte";
</script>

<Modal label="Modal Button">
  Hello Modal!
</Modal>

Trigger with the label prop

<Modal label="Modal Trigger"> ... </Modal>

Trigger with the label snippet

<Modal>
  {#snippet label()}
    <Button>Modal Trigger</Button>
  {/snippet}
  ...
</Modal>

Trigger From Outside

To control the Modal from outside, bind a reactive variable to its open prop. This is helpful when the open button is not placed inside the Modal.

<script>
    let openModal: boolean = $state(false)
</script>

<Button onclick={() => openModal = true}>Open Modal</Button>

<Modal bind:open={openModal}>
    <!-- Modal content -->
</Modal>

The content placed directly inside the <Modal> tag will be displayed as the main body of the Modal. The Modal also takes two snippets, for the header and the footer: header and footer.

• The header snippet is used to define the header section of the Modal.
• The footer snippet is used to define the footer section of the Modal.

<Modal label="Modal Content">
  {#snippet header()}
    <h4 class="font-bold text-lg">THIS IS HEADER!</h4>
  {/snippet}

  Modal content!

  {#snippet footer()}
    <p class="text-muted">This is footer</p>
  {/snippet}
</Modal>

The position prop in the Modal component determines where the modal is displayed vertically on the screen. It can be set to 'top', 'center', or 'bottom', with the default being 'center'. This allows you to align the modal according to your design needs, whether you want it at the top for quick alerts, in the center for standard dialogs, or at the bottom for additional content.

<!-- Top-aligned Modal -->
<Modal position="top"> ... </Modal>

<!-- Centered Modal (Default) -->
<Modal position="center"> ... </Modal>

<!-- Bottom-aligned Modal -->
<Modal position="bottom"> ... </Modal>

The size prop controls the width of the Modal. Options include 'sm' for small, 'md' for medium (default), 'lg' for large, and 'full' for full-screen. This allows you to adjust the modal size based on your content needs.

<!-- Small Modal -->
<Modal size="sm"> ... </Modal>

<!-- Medium-sized Modal (default) -->
<Modal size="md"> ... </Modal>

<!-- Large Modal -->
<Modal size="lg"> ... </Modal>

<!-- Full-width Modal -->
<Modal size="full"> ... </Modal>

Animation Type

The animation prop defines the type of animation used when the Modal opens or closes. Available options include 'slide-down', 'slide-up', 'fade', 'zoom-in', and 'zoom-out'. Each option provides a different visual effect for how the Modal appears or disappears.

<!-- Modal with slide-down animation -->
<Modal animation="slide-down"> ... </Modal>

<!-- Modal with slide-up animation -->
<Modal animation="slide-up"> ... </Modal>

<!-- Modal with fade (default) animation -->
<Modal animation="fade"> ... </Modal>

<!-- Modal with zoom-in animation -->
<Modal animation="zoom-in"> ... </Modal>

<!-- Modal with zoom-out animation -->
<Modal animation="zoom-out"> ... </Modal>

Animation Speed

The animationSpeed prop controls the speed of the Modal's animation. It accepts the following values: 'none', 'slower', 'slow', 'normal', 'fast', and 'faster'. The default is 'fast'. Setting this prop to 'none' will disable the animation, while the other values adjust the animation speed accordingly.

<Modal animationSpeed="slower"> ... </Modal>
<Modal animationSpeed="slow"> ... </Modal>
<Modal animationSpeed="normal"> ... </Modal>
<Modal animationSpeed="fast"> ... </Modal>
<Modal animationSpeed="faster"> ... </Modal>
<Modal animationSpeed="none"> ... </Modal>

Static Backdrop

The staticBackdrop prop controls whether the Modal closes when clicking on the backdrop. By default, the backdrop is clickable, and clicking it will close the Modal. Setting staticBackdrop to true makes the backdrop static, meaning the Modal will remain open even when the backdrop is clicked.

<Modal staticBackdrop={true}> ... </Modal>

Backdrop Customization

The backdrop prop manages the visibility and style of the Modal's backdrop. When set to true (default), the backdrop is visible. If set to false, the backdrop will be hidden. You can also customize the backdrop by passing custom CSS classes, which will apply directly to the backdrop.

<!-- Modal with no backdrop -->
<Modal  backdrop={false}> ... </Modal>

<!-- Modal with custom styled backdrop -->
<Modal backdrop="bg-brand-500/30"> ... </Modal>

The closeButton prop allows you to control the visibility of the close button in the Modal. By default, the close button is visible (true). Set this prop to false to hide the close button. You can also pass a string of custom classes to style the close button.

<Modal closeButton={false}> ... </Modal>

The open prop controls whether the Modal is visible when the page loads. By default, open is set to false, meaning the Modal is hidden initially. If you set open to true, the Modal will be open and visible as soon as the page loads.

<Modal open={true}> ... </Modal>