XModal

Modals are built with HTML, CSS, and JavaScript. They’re positioned over everything else in the document and remove scroll from the <body> so that modal content scrolls instead.

Potabilis UI provides a large variety of styles and properties for the XModal component like sizes, maximized, icons, positions and others.

It is also possible change de slots from header, body, footer, loading and prompt.

Overview

HTML

<Modal [...props] />

typescript

interface UseButtonClassesProps {
  size: XModalSize;
  modelValue?: boolean;
  title: string;
  titleClass?: string;
  bodyClass?: string;
  position?: string;
  noHeader?: boolean;
  noFooter?: boolean;
  overflowVisible?: boolean;
  initialLoading?: boolean;
  iconLeft?: string;
  iconRight?: string;
  loadingInputs?: boolean;
  loadingText?: boolean;
  tooltipIcon?: string;
  isOverflowVisible?: boolean;
  seamless?: boolean;
  persistent?: boolean;
  maximized?: boolean;
  fullWidth?: boolean;
}

Basic

Size

typescript

type XModalSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | number;

defineProps<{
  size: XModalSize;
}>(),
  {
    size: 'md',
  };

Custom Size

Also you can customize size passing a specific number of pixel.

html

<Modal v-model="showModal" :size="300">
  <template #body>
    <span class="text-center"> Click/Tap on the backdrop. </span>
  </template>
</Modal>

Positioning

Maximized

Handling scroll

Persistent

User cannot dismiss the Dialog by pressing ESCAPE key or by clicking/tapping on its backdrop.

Seamless

XModal can also be a part of the page, without requiring immediate focus. It’s where “seamless” mode comes into play:

XModal ​

Overview ​

Basic ​

Size ​

Custom Size ​

Positioning ​

Maximized ​

Handling scroll ​

Persistent ​

Seamless ​