Modal

Modal Demo

New UI

You are already looking at the new UI, which is based on a set of UI component presets from UnoCss。

Usage

HTML

<button class="btn-green" onclick="modal_1.showModal()">
  Open
</button>
<dialog id="modal_1" class="modal">
  <form method="dialog" class="w-full h-full">
    <h3 class="text-lg font-medium leading-6 text-gray-900 dark:text-gray-100 m-0!">
      New UI
    </h3>
    <div class="mt-2">
      <p class="text-sm text-gray-500">
        You are already looking at the new UI, which is based on a set of UI component presets from UnoCss。
      </p>
    </div>
    <div class="mt-4">
      <button value="cancel" class="btn-green">
        Close
      </button>
    </div>
  </form>
</dialog>

JSX

<button className="btn-green" onclick="modal_1.showModal()">
  Open
</button>
<dialog id="modal_1" className="modal">
  <form method="dialog" className="w-full h-full">
    <h3 className="text-lg font-medium leading-6 text-gray-900 dark:text-gray-100 m-0!">
      New UI
    </h3>
    <div className="mt-2">
      <p clclassNameass="text-sm text-gray-500">
        You are already looking at the new UI, which is based on a set of UI component presets from UnoCss。
      </p>
    </div>
    <div className="mt-4">
      <button value="cancel" calssName="btn-green">
        Close
      </button>
    </div>
  </form>
</dialog>

Rules

/^modal$/