arthur/ui
1
0
Fork 0
mirror of https://github.com/ArthurDanjou/ui.git synced 2026-01-28 10:50:40 +01:00
Code Issues Packages Projects Releases Wiki Activity

docs(ComponentExample): automatically read code (#789)

Browse Source
This commit is contained in:
KeJun
2023-10-09 16:44:47 +08:00
committed by GitHub
parent cf93d968af
commit fe348b48c6
35 changed files with 387 additions and 2925 deletions
Download Patch File Download Diff File Expand all files Collapse all files

177
docs/content/6.overlays/1.modal.md
View File

@@ -13,154 +13,29 @@ links:
Use a `v-model` to control the Modal state.
::component-example
#default
:modal-example-basic
#code
```vue
<script setup>
const isOpen = ref(false)
</script>
<template>
<div>
<UButton label="Open" @click="isOpen = true" />
<UModal v-model="isOpen">
<!-- Content -->
</UModal>
</div>
</template>
```
::
:component-example{component="modal-example-basic"}
You can put a [Card](/layout/card) component inside your Modal to handle forms and take advantage of `header` and `footer` slots:
::component-example
#default
:modal-example-card
#code
```vue
<script setup>
const isOpen = ref(false)
</script>
<template>
<div>
<UButton label="Open" @click="isOpen = true" />
<UModal v-model="isOpen">
<UCard :ui="{ divide: 'divide-y divide-gray-100 dark:divide-gray-800' }">
<template #header>
<!-- Content -->
</template>
<!-- Content -->
<template #footer>
<!-- Content -->
</template>
</UCard>
</UModal>
</div>
</template>
```
::
:component-example{component="modal-example-card"}
### Disable overlay
Set the `overlay` prop to `false` to disable it.
::component-example
#default
:modal-example-disable-overlay
#code
```vue
<script setup>
const isOpen = ref(false)
</script>
<template>
<div>
<UButton label="Open" @click="isOpen = true" />
<UModal v-model="isOpen" :overlay="false">
<div class="p-4">
<Placeholder class="h-48" />
</div>
</UModal>
</div>
</template>
```
::
:component-example{component="modal-example-disable-overlay"}
### Disable transition
Set the `transition` prop to `false` to disable it.
::component-example
#default
:modal-example-disable-transition
#code
```vue
<script setup>
const isOpen = ref(false)
</script>
<template>
<div>
<UButton label="Open" @click="isOpen = true" />
<UModal v-model="isOpen" :transition="false">
<div class="p-4">
<Placeholder class="h-48" />
</div>
</UModal>
</div>
</template>
```
::
:component-example{component="modal-example-disable-transition"}
### Prevent close
Use the `prevent-close` prop to disable the outside click alongside the `esc` keyboard shortcut.
::component-example
#default
:modal-example-prevent-close
#code
```vue
<script setup>
const isOpen = ref(false)
</script>
<template>
<div>
<UButton label="Open" @click="isOpen = true" />
<UModal v-model="isOpen" prevent-close>
<UCard :ui="{ ring: '', divide: 'divide-y divide-gray-100 dark:divide-gray-800' }">
<template #header>
<div class="flex items-center justify-between">
<h3 class="text-base font-semibold leading-6 text-gray-900 dark:text-white">
Modal
</h3>
<UButton color="gray" variant="ghost" icon="i-heroicons-x-mark-20-solid" class="-my-1" @click="isOpen = false" />
</div>
</template>
<Placeholder class="h-32" />
</UCard>
</UModal>
</div>
</template>
```
::
:component-example{component="modal-example-prevent-close"}
You can still handle the `esc` shortcut yourself by using our [defineShortcuts](/getting-started/shortcuts#defineshortcuts) composable.
@@ -182,47 +57,7 @@ defineShortcuts({
Set the `fullscreen` prop to `true` to enable it.
::component-example
#default
:modal-example-fullscreen
#code
```vue
<script setup>
const isOpen = ref(false)
</script>
<template>
<div>
<UButton label="Open" @click="isOpen = true" />
<UModal v-model="isOpen" fullscreen>
<UCard
:ui="{
base: 'h-full flex flex-col',
rounded: '',
divide: 'divide-y divide-gray-100 dark:divide-gray-800',
body: {
base: 'grow'
}
}"
>
<template #header>
<div class="flex items-center justify-between">
<h3 class="text-base font-semibold leading-6 text-gray-900 dark:text-white">
Modal
</h3>
<UButton color="gray" variant="ghost" icon="i-heroicons-x-mark-20-solid" class="-my-1" @click="isOpen = false" />
</div>
</template>
<Placeholder class="h-full" />
</UCard>
</UModal>
</div>
</template>
```
::
:component-example{component="modal-example-fullscreen"}
## Props