Como criar um componente modal usando Svelte e Tailwind CSS

Neste artigo, você aprenderá como criar um componente modal usando Svelte e Tailwind CSS. Você também aprenderá como usar as transições do Svelte e as propriedades personalizadas do Tailwind para estilizar e animar o modal

Uso de ferramentas

• Tailwind CSS 3.x
• Esbelto
• Ícone de heróis

Exemplos

esbelto com tailwind css modal simples.

<script>
  let isOpen = false;

  function closeModal() {
    isOpen = false;
  }
</script>

<div>
  <div class="flex items-center justify-center h-screen">
    <button
      class="px-4 py-2 font-semibold text-white bg-blue-500 rounded hover:bg-blue-700"
      on:click={() => (isOpen = true)}
    >
      Open Modal
    </button>
  </div>

  <div
    class={`fixed inset-0 z-50 overflow-auto bg-opacity-50 bg-black flex items-center justify-center ${
      isOpen ? "" : "hidden"
    }`}
  >
    <div class="w-3/4 p-6 bg-white rounded shadow-lg md:w-1/2 lg:w-1/3">
      <header class="flex items-center justify-between mb-4">
        <h2 class="text-xl font-semibold">Modal Title</h2>
        <button class="text-gray-700" on:click={closeModal}>
          <svg
            xmlns="http://www.w3.org/2000/svg"
            fill="none"
            viewBox="0 0 24 24"
            stroke-width="1.5"
            stroke="currentColor"
            class="w-6 h-6"
          >
            <path
              stroke-linecap="round"
              stroke-linejoin="round"
              d="M6 18L18 6M6 6l12 12"
            />
          </svg>
        </button>
      </header>
      <div>
        <p class="text-gray-700">Modal content...</p>
      </div>
    </div>
  </div>
</div>

esbelto com tailwind css modal usando TypeScript.

<script lang="ts">
  let isOpen: boolean = false;

  function closeModal(): void {
    isOpen = false;
  }
</script>

<div>
  <div class="flex items-center justify-center h-screen">
    <button
      class="px-4 py-2 font-semibold text-white bg-blue-500 rounded hover:bg-blue-700"
      on:click={() => (isOpen = true)}
    >
      Open Modal
    </button>
  </div>

  <div
    class={`fixed inset-0 z-50 overflow-auto bg-opacity-50 bg-black flex items-center justify-center ${
      isOpen ? "" : "hidden"
    }`}
  >
    <div class="w-3/4 p-6 bg-white rounded shadow-lg md:w-1/2 lg:w-1/3">
      <header class="flex items-center justify-between mb-4">
        <h2 class="text-xl font-semibold">Modal Title</h2>
        <button class="text-gray-700" on:click={closeModal}>
          <svg
            xmlns="http://www.w3.org/2000/svg"
            fill="none"
            viewBox="0 0 24 24"
            stroke-width="1.5"
            stroke="currentColor"
            class="w-6 h-6"
          >
            <path
              stroke-linecap="round"
              stroke-linejoin="round"
              d="M6 18L18 6M6 6l12 12"
            />
          </svg>
        </button>
      </header>
      <div>
        <p class="text-gray-700">Modal content...</p>
      </div>
    </div>
  </div>
</div>

esbelto com modal CSS tailwind fechado clicando fora.

<script>
  let isOpen = false;

  function closeModal() {
    isOpen = false;
  }

  function handleOutsideClick(event) {
    if (event.target === event.currentTarget) {
      closeModal();
    }
  }
</script>

<div class="flex items-center justify-center h-screen">
  <button
    class="px-4 py-2 font-semibold text-white bg-blue-500 rounded hover:bg-blue-700"
    on:click={() => (isOpen = true)}
  >
    Open Modal
  </button>
</div>
<div>
  {#if isOpen}
    <div
      class="fixed inset-0 z-50 flex items-center justify-center overflow-auto bg-black bg-opacity-50"
      on:click={handleOutsideClick}
    >
      <div class="w-3/4 p-6 bg-white rounded shadow-lg md:w-1/2 lg:w-1/3">
        <header class="flex items-center justify-between mb-4">
          <h2 class="text-xl font-semibold">Click Outside of Modal</h2>
          <button class="text-gray-700" on:click={closeModal}>
            <svg
              xmlns="http://www.w3.org/2000/svg"
              fill="none"
              viewBox="0 0 24 24"
              stroke-width="1.5"
              stroke="currentColor"
              class="w-6 h-6"
            >
              <path
                stroke-linecap="round"
                stroke-linejoin="round"
                d="M6 18L18 6M6 6l12 12"
              />
            </svg>
          </button>
        </header>
        <div>
          <p class="text-gray-700">Modal content ...</p>
        </div>
      </div>
    </div>
  {/if}
</div>

#tailwindcss  #svelte