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

feat(Modal/Slideover): add close method in slots (#4219)

Browse Source 
Co-authored-by: Benjamin Canac <canacb1@gmail.com>
This commit is contained in:
Joseph Anson
2025-05-28 14:57:12 +01:00
committed by GitHub
parent ca507c6a0d
commit 5835eb5f0f
8 changed files with 64 additions and 38 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
playground/app/pages/components/modal.vue
View File

@@ -69,5 +69,13 @@ function openModal() {
</UModal>
<UButton label="Open programmatically" color="neutral" variant="outline" @click="openModal" />
<UModal title="First modal">
<UButton color="neutral" variant="outline" label="Close with scoped slot close" />
<template #footer="{ close }">
<UButton label="Close with scoped slot close" @click="close" />
</template>
</UModal>
</div>
</template>

16
playground/app/pages/components/slideover.vue
View File

@@ -125,5 +125,21 @@ function openSlideover() {
</USlideover>
<UButton label="Open programmatically" color="neutral" variant="outline" @click="openSlideover" />
<USlideover title="Slideover with scoped slot close" description="This slideover has a scoped slot close that can be used to close the slideover from within the content.">
<UButton color="neutral" variant="subtle" label="Open with scoped slot close" />
<template #header="{ close }">
<UButton label="Close with scoped slot close" @click="close" />
</template>
<template #body="{ close }">
<UButton label="Close with scoped slot close" @click="close" />
</template>
<template #footer="{ close }">
<UButton label="Close with scoped slot close" @click="close" />
</template>
</USlideover>
</div>
</template>