Modal

Modal is a dialog that appears on top of the main window. It is used to display information or collect user input. It is a component of the Dialogs category.

We have already created several modals. You can use them easily anywhere in the project.

Basic example

vue

<template>
  <div>
    <Button text="Open Modal" @click="toggleModal" />
    <Modal
      title="Basic Modal"
      label="Modal title"
      :activeModal="show"
      @close="show = false"
    >
      Lorem ipsum dolor sit amet, consec tetur adipiscing elit, sed do eiusmod
      tempor incididun ut .
    </Modal>
  </div>
</template>
<script setup>
import Modal from "@/components/Modal";
import Button from "@/components/Button";
import { ref } from "vue";
const show = ref(false);
const toggleModal = () => {
  show.value = !show.value;
};
</script>

Note

You can use activeModal props for active modal. centered props for centered modal. disableBackdrop props for disabled backdrop. noFade props for disabled fade animation. sizeClass props for changing modal size. eg: sizeClass="w-1/2" for half modal.

Modal #

Basic example #

Basic example