Modal
A window overlaid on either the primary window or another dialog window, rendering the content underneath inert.
Usage
vue
<script setup lang="ts">
import { ref } from 'vue';
import { Modal, PrimaryButton } from '@youcan/ui-vue3';
const showModal = ref(false);
const onConfirm = () => {
showModal.value = false;
};
</script>
<template>
<div class="container">
<Modal v-model:visible="showModal" title="Edit profile" @on-confirm="onConfirm">
<p class="content">
The quick brown fox jumps over the lazy dog.
</p>
</Modal>
<PrimaryButton @click="showModal = true;">
<span>Open Modal</span>
</PrimaryButton>
</div>
</template>