ModalHeader

This component displays the upper part of the Modal in which the following elements may include:

• modal closing button (optional);
• HeroIcon (optional);
• modal window title;
• modal description;
• top part of modal, e.g. for a photo (excludes the closing button and HeroIcon).

Props

orientation

Indicates the arrangement of component elements

type:String

default:vertical

values:vertical, horizontal

align

Positions the title and descriptive text

type:String

default:left

values:left, center

noclose

Is responsible for hiding modal closing button

type:Boolean

default:false

icontype

HeroIcon type

type:String

default:color

values:color, outline

color

Color for HeroIcon from the Tailwind palette

type:String

default:primary

values:primary, secondary, warning, info, success, danger

title

Modal type

type:String

default:''

Slots

default

The main slot in which the content of the description is

top

Picture space or other element for the entire width of the modal

Examples

Basic version

Deactivate account

Are you sure you want to deactivate your account? All of your data will be permanently removed from our servers forever. This action cannot be undone.

<modal-header orientation="horizontal" :iconfile="times" title="Deactivate account"
  >Are you sure you want to deactivate your account? All of your data will be permanently removed
  from our servers forever. This action cannot be undone.
</modal-header>

Version centered without closing

Deactivate account

Are you sure you want to deactivate your account? All of your data will be permanently removed from our servers forever. This action cannot be undone.

<modal-header
  orientation="vertical"
  align="center"
  :iconfile="times"
  noclose
  title="Deactivate account"
  >Are you sure you want to deactivate your account? All of your data will be permanently removed
  from our servers forever. This action cannot be undone.
</modal-header>

Left version without HeroIcon

Deactivate account

Are you sure you want to deactivate your account? All of your data will be permanently removed from our servers forever. This action cannot be undone.

<modal-header orientation="vertical" title="Deactivate account"
  >Are you sure you want to deactivate your account? All of your data will be permanently removed
  from our servers forever. This action cannot be undone.
</modal-header>

Version centered

Deactivate account

Are you sure you want to deactivate your account? All of your data will be permanently removed from our servers forever. This action cannot be undone.

<modal-header orientation="vertical" align="center" title="Deactivate account"
  >Are you sure you want to deactivate your account? All of your data will be permanently removed
  from our servers forever. This action cannot be undone.
  <template #top>
    <div class="block h-20 w-full rounded-md bg-primary-400"></div>
  </template>
</modal-header>