Modal

Demo

Demo

Usage

<!-- Basic -->
<script setup>
const [isBasicModalActive, setIsBasicModalActive] = useState(false);
</script>

<template>
<Button class="uppercase" @click="setIsBasicModalActive(true)">
  Open Modal
</Button>
<Modal
  :active="isBasicModalActive"
  :onClose="() => setIsBasicModalActive(false)"
>
  <ModalHeader>Modal Title</ModalHeader>
  <ModalBody>
    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam
    nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat,
    sed diam voluptua. At vero eos et accusam et justo duo dolores et ea
    rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem
    ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur
    sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et
    dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam
    et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea
    takimata sanctus est Lorem ipsum dolor sit amet.
  </ModalBody>
  <ModalFooter>
    <div class="flex ltr:ml-auto rtl:mr-auto">
      <Button
        color="secondary"
        class="uppercase"
        @click="setIsBasicModalActive(false)"
        >Close</Button
      >
      <Button class="ltr:ml-2 rtl:mr-2 uppercase">Save Changes</Button>
    </div>
  </ModalFooter>
</Modal>
</template>

Props

Property	Type	Default	Required	Description
active	boolean		no	Is Modal active
centered	boolean		no	Is Modal centered
scrollable	boolean		no	Is Modal scrollable
staticBackdrop	boolean	false	no	Close Modal when backdrop is clicked
aside	boolean		no	If the Modal is palced at a side
onClose	function		no	Callback function when the Modal is closed