mirror of
https://git.hmsn.ink/kospo/svcm/oa.git
synced 2026-03-20 07:13:44 +09:00
first
This commit is contained in:
40
documentation/modal/v-modal-sizes-documentation.md
Normal file
40
documentation/modal/v-modal-sizes-documentation.md
Normal file
@@ -0,0 +1,40 @@
|
||||
### Modal Sizes
|
||||
|
||||
The `<VModal />` component can have different sizes. use the size `true`
|
||||
prop to change the modal size. Available sizes are: `small`, default,
|
||||
`medium`, `large` and `big`.
|
||||
|
||||
<!--code-->
|
||||
|
||||
```vue
|
||||
<script setup lang="ts">
|
||||
const centeredActionsOpen = ref(false)
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<VButton bold @click="centeredActionsOpen = true">
|
||||
Open Modal
|
||||
</VButton>
|
||||
|
||||
<VModal
|
||||
:open="centeredActionsOpen"
|
||||
size="small"
|
||||
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-->
|
||||
Reference in New Issue
Block a user