Das DashboardPanel

GitHub
Ein anpassbares Panel, das in einem Dashboard angezeigt werden kann.

Bearbeiten

Der Status (Größe, zusammengeklappt usw.) wird basierend auf den storage-und storage-key-Requisiten gespeichert, die Sie der DashboardGroup-Komponente zur Verfügung stellen.

Verwenden Sie es innerhalb des Standardsteckplatzes der DashboardGroup-Komponente, können Sie mehrere Panels nebeneinander platzieren:

pages/index.vue
<script setup lang="ts">
definePageMeta({
  layout: 'dashboard'
})
</script>

<template>
  <UDashboardPanel id="inbox-1" resizable />

  <UDashboardPanel id="inbox-2" class="hidden lg:flex" />
</template>
Es wird empfohlen, ein id zu setzen, wenn mehrere Bedienfelder auf verschiedenen Seiten verwendet werden, um Konflikte zu vermeiden.
Diese Komponente hat kein einziges Wurzelelement, wenn Sie die resizable-prop verwenden, also wickeln Sie es in einen Container (z. B. <div class="flex flex-1">), wenn Sie Seitenübergänge verwenden oder eine einzelne Wurzel für das Layout benötigen.

Verwenden Sie die Steckplätze header, body und footer, um das Bedienfeld oder den Standardsteckplatz anzupassen, wenn Sie keinen scrollbaren Körper mit Polsterung wünschen.

Inbox

<template>
  <UDashboardPanel resizable>
    <template #header>
      <UDashboardNavbar title="Inbox">
        <template #leading>
          <UDashboardSidebarCollapse />
        </template>
      </UDashboardNavbar>
    </template>

    <template #body>
      <Placeholder class="h-full" />
    </template>
  </UDashboardPanel>
</template>
Meistens verwenden Sie die Komponente DashboardNavbar im header-Slot.

Resizable (nicht übersetzbar)

Verwenden Sie die resizable-Prop, um das Panel in der Größe zu vergrößern.

<template>
  <UDashboardPanel resizable>
    <template #body>
      <Placeholder class="h-96" />
    </template>
  </UDashboardPanel>
</template>

Größe

Verwenden Sie die min-size, max-size und default-size Requisiten, um die Größe des Panels anzupassen.

<template>
  <UDashboardPanel resizable :min-size="22" :default-size="35" :max-size="40">
    <template #body>
      <Placeholder class="h-96" />
    </template>
  </UDashboardPanel>
</template>
Größen werden standardmäßig als Prozentsätze berechnet. Sie können dies mit der unit-Prop auf der DashboardGroup-Komponente ändern.

API (englisch)

Props (englisch)

Prop Default Type
id
useId()
string

The id of the panel.

minSize
15
number

The minimum size of the panel.

maxSize
100
number

The maximum size of the panel.

defaultSize
0
number

The default size of the panel.

resizable
false
boolean

Whether to allow the user to resize the panel.

ui
{ root?: SlotClass; body?: SlotClass; handle?: SlotClass; }

Slots Bearbeiten

Slot Type
default
{}
header
{}
body
{}
footer
{}
resize-handle
{ onMouseDown: (e: MouseEvent) => void; onTouchStart: (e: TouchEvent) => void; onDoubleClick: (e: MouseEvent) => void; }

Theme (englisch)

app.config.ts
export default defineAppConfig({
  ui: {
    dashboardPanel: {
      slots: {
        root: 'relative flex flex-col min-w-0 min-h-svh lg:not-last:border-e lg:not-last:border-default shrink-0',
        body: 'flex flex-col gap-4 sm:gap-6 flex-1 overflow-y-auto p-4 sm:p-6',
        handle: ''
      },
      variants: {
        size: {
          true: {
            root: 'w-full lg:w-(--width)'
          },
          false: {
            root: 'flex-1'
          }
        }
      }
    }
  }
})
vite.config.ts
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import ui from '@nuxt/ui/vite'

export default defineConfig({
  plugins: [
    vue(),
    ui({
      ui: {
        dashboardPanel: {
          slots: {
            root: 'relative flex flex-col min-w-0 min-h-svh lg:not-last:border-e lg:not-last:border-default shrink-0',
            body: 'flex flex-col gap-4 sm:gap-6 flex-1 overflow-y-auto p-4 sm:p-6',
            handle: ''
          },
          variants: {
            size: {
              true: {
                root: 'w-full lg:w-(--width)'
              },
              false: {
                root: 'flex-1'
              }
            }
          }
        }
      }
    })
  ]
})

Changelog (englisch)

No recent changes

DashboardNavbar

A responsive navbar to display in a dashboard.

DashboardResizeHandle

A handle to resize a sidebar or panel.