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

feat(Slideover): add close button in header (#65)

Browse Source
This commit is contained in:
Sylvain Marroufin
2022-06-24 15:40:26 +02:00
committed by GitHub
parent aecfef20e6
commit 2f90ce2319
1 changed files with 5 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
src/runtime/components/overlays/Slideover.vue
View File

@@ -28,13 +28,12 @@
leave-from="translate-x-0" leave-from="translate-x-0"
:leave-to="side === 'left' ? '-translate-x-full' : 'translate-x-full'" :leave-to="side === 'left' ? '-translate-x-full' : 'translate-x-full'"
> >
<DialogPanel class="relative flex-1 flex flex-col w-full max-w-md u-bg-white focus:outline-none"> <DialogPanel class="relative flex-1 flex flex-col w-full max-w-md u-bg-white focus:outline-none" :class="panelClass">
<div v-if="$slots.header" class="border-b u-border-gray-200"> <div v-if="$slots.header" class="border-b u-border-gray-200">
<div class="flex items-center justify-between px-4 sm:px-6 h-16"> <div class="flex items-center justify-between px-4 sm:px-6 h-16">
<slot name="header" /> <slot name="header" />
</div> </div>
</div> </div>
<slot /> <slot />
</DialogPanel> </DialogPanel>
</TransitionChild> </TransitionChild>
@@ -56,6 +55,10 @@ const props = defineProps({
type: String, type: String,
default: 'left', default: 'left',
validator: (value: string) => ['left', 'right'].includes(value) validator: (value: string) => ['left', 'right'].includes(value)
},
panelClass: {
type: String,
default: 'max-w-md'
} }
}) })
const emit = defineEmits(['update:modelValue']) const emit = defineEmits(['update:modelValue'])