mirror of
https://git.hmsn.ink/kospo/svcm/oa.git
synced 2026-03-20 07:43:32 +09:00
41 lines
895 B
Markdown
41 lines
895 B
Markdown
### VModal
|
|
|
|
Vuero ships with a dead simple and versatile `<VModal />` component.
|
|
The VModal component has 2 available `slots`: one for the `content`,
|
|
so you can put anything you want inside, and one for the primary `action`.
|
|
Check the code example for more details.
|
|
|
|
<!--code-->
|
|
|
|
```vue
|
|
<script setup lang="ts">
|
|
const centeredActionsOpen = ref(false)
|
|
</script>
|
|
|
|
<template>
|
|
<VButton bold @click="centeredActionsOpen = true">
|
|
Open Modal
|
|
</VButton>
|
|
|
|
<VModal
|
|
:open="centeredActionsOpen"
|
|
actions="center"
|
|
@close="centeredActionsOpen = false"
|
|
>
|
|
<template #content>
|
|
<VPlaceholderSection
|
|
title="Go Premium"
|
|
subtitle="Unlock more features and business tools by going premium"
|
|
/>
|
|
</template>
|
|
<template #action>
|
|
<VButton color="primary" raised>
|
|
Confirm
|
|
</VButton>
|
|
</template>
|
|
</VModal>
|
|
</template>
|
|
```
|
|
|
|
<!--/code-->
|