Usage
Built on top of the Modal component, the DashboardModal contains a header, body and footer.
Its header matches exactly the DashboardNavbar on mobile and contains a close button matching the DashboardSlideover and DashboardSearch.
Use the title, description and icon props to customize the modal.
<script setup lang="ts">
const open = ref(true)
const loading = ref(false)
function onDelete() {
loading.value = true
setTimeout(() => {
loading.value = false
open.value = false
}, 1000)
}
// This is a hack to keep the modal open
watch(open, (value) => {
if (!value) {
setTimeout(() => open.value = true, 1000)
}
})
</script>
<template>
<UDashboardModal
v-model="open"
title="Delete account"
description="Are you sure you want to delete your account?"
icon="i-heroicons-exclamation-circle"
:ui="{
icon: { base: 'text-red-500 dark:text-red-400' } as any,
footer: { base: 'ml-16' } as any
}"
>
<template #footer>
<UButton color="red" label="Delete" :loading="loading" @click="onDelete" />
<UButton color="white" label="Cancel" @click="open = false" />
</template>
</UDashboardModal>
</template>
Slots
icon
{}
title
{}
description
{}
default
{}
footer
{}
header
{}
Props
icon
string
undefinedtitle
string
undefineddescription
string
undefinedcloseButton
Button
{}ui
any
{}modelValue
boolean
falsepreventClose
boolean
falseConfig
{
rounded: 'sm:rounded-lg',
shadow: 'sm:shadow-xl',
width: 'sm:max-w-xl',
height: 'h-dvh sm:h-auto',
padding: 'p-0',
header: {
base: 'flex items-start justify-between gap-x-1.5 flex-shrink-0 min-h-[--header-height]',
inner: 'flex items-start gap-4',
padding: 'px-4 py-4 sm:px-6'
},
body: {
base: 'flex-1 flex flex-col gap-y-3 overflow-y-auto',
padding: 'px-4 py-5 sm:p-6'
},
footer: {
base: 'flex items-center gap-x-1.5 flex-shrink-0',
padding: 'px-4 py-4 sm:px-6'
},
title: 'text-gray-900 dark:text-white font-semibold',
description: 'mt-1 text-gray-500 dark:text-gray-400 text-sm',
icon: {
wrapper: 'inline-flex',
base: 'w-12 h-12 flex-shrink-0 text-gray-900 dark:text-white'
},
default: {
closeButton: {
icon: 'i-heroicons-x-mark-20-solid',
color: 'gray',
variant: 'ghost',
size: 'sm'
}
}
}