Modal

Modals are dialogs that can be used for lightboxes, user notifications, or completely custom content.

Example

To create a modal, create an element (such as an <i-button>) as a trigger and the v-model on an <i-modal> component to control its visibility. Everything inside the <i-modal> is rendered as the modal body. Optionally, you can provide a modal header and footer using slot="header" and slot="footer".

Modal Example

Sizes

You're able to use the size modifier to control the size of your modals, using one of the available sizes: sm, md, and lg. The default size is set to md.

Modal Sizes
   

Variants

Inkline includes two predefined modal styles, each serving its own semantic purpose. You can set the style of a <i-modal> using the variant property. By default, modals use the light variant.

Modal Variants
             

API

Modal API <i-modal>
Property Description Type Accepted Default
closeOnPressEscape Sets whether to hide the modal component when pressing escape. Boolean true, false true
value Sets the visibility of the modal component. Boolean true, false false
transition Sets the transition of the modal component. String fade-in-transition, fade-in-linear-transition, zoom-in-top-transition, zoom-in-bottom-transition, zoom-in-center-transition, zoom-in-left-transition, zoom-in-right-transition zoom-in-center-transition