Guide

Modal

Create modal dialogs with different styles and transitions.

Usage

Use the vk-modal component to render a modal and an overlay that blanks out the page. The modal display is controlled with the show prop.

<vk-modal show>
  <vk-modal-title></vk-modal-title>
</vk-modal>
Open

Note In the demo we are setting the show prop with a sync modifier to give the modal the possibility to control the display.

Close button

The vk-modal-close component renders a close button element that could be placed inside the modal. To place the close button outside the modal, add the outside prop.

<vk-modal>
  <vk-modal-close></vk-modal-close>
</vk-modal>

<vk-modal>
  <vk-modal-close outside></vk-modal-close>
</vk-modal>

Center modal

To vertically center the modal dialog, add the center prop.

<vk-modal center></vk-modal>
Open

To divide the modal into different content sections, use the header and footer slots.

<vk-modal>
  <vk-modal-title slot="header"></vk-modal-title>
  <div></div>
  <div slot="footer"></div>
</vk-modal>

Container modifier

Set the size prop to container to expand the modal dialog to the default container width.

<vk-modal size="container">...</vk-modal>

Full modifier

To create a modal that fills the entire page, use the vk-modal-full component. It is also recommended to use the vk-modal-full-close component for the close button, so that it adapts its styling.

<vk-modal-full>
  <vk-modal-full-close></vk-modal-full-close>
  ...
</vk-modal-full>

Using the grid and UIkit width classes, you can create a nice, split fullscreen modal.

Overflow

By default, the page will scroll with the modal if its content exceeds the window height. To apply a scrollbar inside the modal, set the overflow-auto prop.

<vk-modal overflow-auto>...</vk-modal>

Groups

You can group multiple modals by linking from one to the other and back. Use this to create multistep wizards inside your modals.

<vk-modal :show="show1">
  <vk-button @click="show2 = true">Next</vk-button>
</vk-modal>

<vk-modal :show="show2">
  <vk-button @click="show1 = true">Previous</vk-button>
</vk-modal>

Props

vk-modal, vk-modal-full

Name Type Default Description
show Boolean false The display state. Keep it synced with sync binding modifier.
stuck Boolean false Determines if the modal should be kept open when the background was clicked.
overflowAuto Boolean false Determines if the modal should auto-adjust the height overflow.
center Boolean false Vertically centers the modal dialog.
size String -- Determines the modal dialog size. With options as container or some of the UIkit width classes.
stack Boolean false When a modal is stacked it will not close any previous modal when being displayed.

vk-modal-close

Name Type Default Description
large Boolean false Displays a larger icon.
outside Boolean false Displays the icon outside the modal dialog.

vk-modal-full-close

Name Type Default Description
large Boolean false Displays a larger icon.