DashboardSlideover - Nuxt UI Pro

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

undefined

closeButton

{}

{}

{}

{}

modelValue

boolean

false

preventClose

boolean

false

Config

{
  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'
    }
  }
}

DashboardSidebar

A scrollable container to display links inside a DashboardPanel.

DashboardToolbar

A sub-navbar to add actions to your DashboardPanel.