Skip to content
On this page

Modal

Base component for modal dialog.

Usage

Modal are using z-modal for z-index value. It posible to change z-index value using CSS variable --p-modal-z-index. But don't forget to see the all z-index variant for layer-ordering component.

Simple Usage

preview
vue
<template>
  <p-modal v-model="showModal"
    title="Modal Title"
    text="This is place holder text. The basic dialog for modals
      should contain only valuable and relevant information.">
    <template #footer="{ close }">
      <div class="flex items-center justify-end">
        <p-button @click="close" color="info">
          Submit
        </p-button>
      </div>
    </template>
  </p-modal>
</template>

Combine with additional component

preview
vue
<template>
  <p-modal
    v-model="advanceModal"
    title="Modal Title">
    <p>
      This is place holder text. The basic dialog for modals
      should contain only valuable and relevant information.
    </p>
    <p-banner>
      Your enterprise Privy Balance is running out. Please topup now.
    </p-banner>
    <template #footer="{ close }">
      <div class="flex items-center justify-between">
        <div>
          <p-checkbox>
            This is additional checbox for the modal
          </p-checkbox>
        </div>
        <div>
          <p-button @click="close" color="info">
            Button text
          </p-button>
        </div>
      </div>
    </template>
  </p-modal>
</template>

Hide close button

You can hide close button with dismissable set to false

preview
vue
<template>
  <p-modal
    title="Give Me Title Here"
    v-model="bottomSheet"
    :dismissable="false">
    <p>
      Explain what this menu to do, <br>
      descriptive but as short as possible
    </p>
    <template #footer>
      <div class="flex justify-end">
        <p-button color="info" @click="bottomSheet = false">
          Button Text
        </p-button>
      </div>
    </template>
  </p-modal>
</template>

No Close Modal

Modal will not close while Escape button was pressed by props no-close-on-esc. Also you can make modal can't close while backdrop was clicked by props no-close-on-backdrop.

preview
vue
<template>
  <p-modal
    title="Modal Title"
    no-close-on-esc
    no-close-on-backdrop
    v-model="bannerSheet" :dismissable="false">
    <p>
      This is place holder text. <br>
      The basic dialog for modals should <br>
      contain only valuable and relevant information.
    </p>
    <template #footer="{ close }">
      <div class="flex justify-end">
        <p-button color="info" @click="close">
          Button Text
        </p-button>
      </div>
    </template>
  </p-modal>
</template>

When modals content become too long, modal body can scroll itself by adding props modal-body-scrollable.

preview
vue
<template>
  <p-modal
    v-model="scrollModal"
    title="Modal Title"
    no-close-on-esc
    no-close-on-backdrop
    modal-body-scrollable>
    <div>
      <p>
        This is place holder text. The basic dialog for modals should contain only valuable and relevant information. Simplify dialogs by removing unnecessary elements or content that does not support user tasks. If you find that the number of required elements for your design are making the dialog excessively large, then try a different design solution.
      </p>
      <blockquote>
        A wonderful serenity has taken possession of my entire soul, like these sweet mornings of spring which I enjoy with my whole heart.
      </blockquote>
      <p>
        I am alone, and feel the charm of existence in this spot, which was created for the bliss of souls like mine. I am so happy, my dear friend, so absorbed in the exquisite sense of mere tranquil existence, that I neglect my talents.
      </p>
    </div>
    <template #footer="{ close }">
      <p-button @click="close" color="info">
        Button Text
      </p-button>
    </template>
  </p-modal>
</template>

Modal can be set look like banner with prop banner. For example, it can be used for promotional purposes, events and others.

vue
<template>
  <p-modal
    v-model="modalBanner"
    :dismissable="false"
    banner>
    <img src="/assets/images/img-modal-banner-sheet.jpg">
    <div class="p-6 text-center">
      <p-heading element="h6">Give Me Title Here</p-heading>
      <p>
        Explain what this menu to do, <br>
        descriptive but as short as possible
      </p>
    </div>
    <template #footer="{ close }">
      <div class="flex items-center justify-end">
        <p-button variant="link" @click="close">
          Button Text
        </p-button>
        <p-button color="info" @click="close">
          Button Text
        </p-button>
      </div>
    </template>
  </p-modal>
</template>

Sizing

Modal has 4 different sizing, there are sm, md, lg and xl. You can change the size via prop size. Default size are md.

preview
vue
<template>
  <p-modal
    v-model="modalSize"
    title="Modal Title"
    size="sm">
    <div>
      <blockquote>
        A wonderful serenity has taken possession of my entire soul,
        like these sweet mornings of spring which I enjoy with my whole heart.
      </blockquote>
    </div>
    <template #footer="{ close }">
      <p-button @click="close" color="info">
        Button Text
      </p-button>
    </template>
  </p-modal>
</template>

Centered Modal

Modal can be vertically center in the viewport by setting centered prop.

preview
vue
<template>
  <p-modal
    v-model="modalCenter"
    title="Modal Title"
    size="sm"
    centered>
    <div>
      This is place holder text. The basic dialog for modals
      should contain only valuable and relevant information.
    </div>
    <template #footer="{ close }">
      <p-button @click="close" color="info">
        Button Text
      </p-button>
    </template>
  </p-modal>
</template>

Variables

Modal use local CSS variables on .modal for enhanced real-time customization.

sass
--p-modal-size-xl: 960px;
--p-modal-size-lg: 800px;
--p-modal-size-md: 600px;
--p-modal-size-sm: 400px;
--p-modal-z-index: theme(zIndex.modal);
--p-modal-body-scrollable-max-height: theme(spacing.64);
--p-modal-body-scrollable-min-height: 0;
--p-modal-content-margin-y: theme(spacing.8);

API

Props

PropsTypeDefaultDescription
v-modelBooleanfalseShow / Hide modal
titleString-Modal Title
textString-Text inside of Modal Body
dismissableBooleantrueShow / Hide dismiss button
sizeStringmdSize of modal, valid value is sm, md, lg and xl
bannerBooleanfalseGive modal no-padding to place image for specific purpose
no-close-on-escBooleanfalseNo close modal while Escape was pressed
no-close-on-backdropBooleanfalseNo close modal while Modal Backdrop was clicked
modal-body-scrollableBooleanfalseScrollable modal body when content is to long
centeredBooleanfalseHandle center vertically of the viewport

Slots

NameDescription
header Content (in the form of— permalink or button) to place in Modal Header
footer Content (in the form of— permalink or button) to place in Modal Footer

Events

NameArgumentsDescription
close-Event when close button clicked

Released under the MIT License.