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.

{
  "message": "You should use slots with <ContentRenderer>",
  "value": {},
  "excerpt": false,
  "tag": "div"
}

Slots

header

{}

title

{}

default

{}

footer

{}

Props

title

string

undefined

closeButton

Button

{}

any

{}

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

DashboardSidebarLinks

A list of collapsible and draggable links to display in a DashboardSidebar.

DashboardToolbar

A sub-navbar to add actions to your DashboardPanel.