jio-modal

Props

Prop name	Description	Type	Values
enableModal	Whether the modal must be shown	enableModalInterface	-
title	Title of the modal	string	-
description	Description of the modal	string	-
buttonOptions	Buttons options for the modal	buttonsOption	-

View on Gitlab

General

This component is used to show a modal. This component is using the jio-dimmer to focus on the modal.

Code examples

A button that enables the modal.

<template>
  <div class="jio-core">
    <jio-button @click="showModal">Show modal</jio-button>
    <jio-dimmer :isEnabled="enableModal.show" @click="hideModal" />
    <jio-modal
      :enableModal="enableModal"
      title="Weet je het zeker?"
      description="Donec sed odio dui. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Vestibulum id ligula porta felis euismod semper. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus."
      :buttonOptions="modalButtons"
    />
    <br />
    <span class="mt-3"> Bevestigd: {{ enableModal.confirmed }} </span>
  </div>
</template>

<script setup lang="ts">
import { reactive } from "vue";

const modalButtons = {
  buttonsReverse: true,
  confirmText: "Ja, akkoord",
  cancelText: "Nee, niet akkoord",
};

const enableModal = reactive({ show: false, confirmed: false });

function showModal() {
  enableModal.show = true;
}

function hideModal() {
  enableModal.show = false;
}
</script>

jio-modal ​

Props ​

General ​

Code examples ​

Props

General

Code examples