Usage
Built on top of the Slideover component, the DashboardSlideover contains a header, body and footer.
Its header matches exactly the DashboardNavbar and contains a close button matching the DashboardModal and DashboardSearch.
Its body is a scrollable container with some padding to display your content and its footer is placed at the bottom of the slideover.
Use the title prop to customize the slideover.
<script setup lang="ts">
const open = ref(true)
// This is a hack to keep the slideover open
watch(open, (value) => {
if (!value) {
setTimeout(() => open.value = true, 1000)
}
})
</script>
<template>
<UDashboardSlideover v-model="open" title="Notifications" />
</template>
Slots
header
{}
title
{}
default
{}
footer
{}
Props
title
string
undefinedui
{}
{}closeButton
{}
{}modelValue
boolean
falseConfig
{
header: {
base: 'flex items-center justify-between gap-x-1.5 flex-shrink-0 border-b border-gray-200 dark:border-gray-800 h-[--header-height]',
padding: 'p-4'
},
body: {
base: 'flex-1 overflow-y-auto',
padding: 'p-4'
},
footer: {
base: 'flex items-center gap-x-1.5 flex-shrink-0',
padding: 'p-4'
},
title: 'text-gray-900 dark:text-white font-semibold flex items-center gap-x-1.5 min-w-0',
default: {
closeButton: {
icon: 'i-heroicons-x-mark-20-solid',
color: 'gray',
variant: 'ghost',
size: 'sm'
}
}
}