用法
构建在 滑出 组件之上，DashboardSlideover 包含页眉、主体和页脚。
它的页眉与 仪表板导航栏 完全匹配，并包含一个与 仪表板模态框 和 仪表板搜索 相匹配的关闭按钮。
它的主体是一个可滚动容器，带有一些填充以显示您的内容，它的页脚位于滑出的底部。
使用 title 道具来自定义滑出。
<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>
插槽
页眉
{}
标题
{}
默认
{}
页脚
{}
道具
标题
字符串
未定义关闭按钮
按钮
{}ui
任何
{}modelValue
布尔值
假阻止关闭
布尔值
假配置
{
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'
}
}
}