DashboardPaneel

Een aanpasbaar paneel om weer te geven in een dashboard.

Gebruik

De DashboardPanel-component wordt gebruikt om een paneel weer te geven. De status (grootte, samengevouwen, enz.) wordt opgeslagen op basis van de storage en storage-key-rekwisieten die u aan de DashboardGroup -component levert.

Gebruik het in de standaardsleuf van de DashboardGroup component, u kunt meerdere panelen naast elkaar plaatsen:

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>

Het wordt aanbevolen om een id in te stellen wanneer u meerdere panelen op verschillende pagina 's gebruikt om conflicten te voorkomen.

Dit onderdeel heeft geen enkel root-element wanneer u de resizable-prop gebruikt, dus wikkel het in een container (bijv. <div class="flex flex-1">) als u paginaovergangen gebruikt of een enkele wortel voor lay-out.

Gebruik de header-, body- en footer-slots om het paneel of de standaardsleuf aan te passen als u geen schuifbare behuizing met vulling wilt.

Inbox

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

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

Meestal gebruikt u de DashboardNavbar component in de header-sleuf.

Aanpasbaar

Gebruik de resizable prop om het paneel aanpasbaar te maken.

resizable

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

Grootte

Gebruik de min-size, max-size en default-size rekwisieten om de grootte van het paneel aan te passen.

minSize

defaultSize

maxSize

<template>
  <UDashboardPanel resizable :min-size="22" :default-size="35" :max-size="40">
    <template #body>
      <Placeholder class="h-96" />
    </template>
  </UDashboardPanel>
</template>

Maten worden standaard berekend als percentages. U kunt dit wijzigen met de unit prop op de DashboardGroup component.

API

Props

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

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

Thema

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

Wijzigingsgelog

No recent changes

DashboardNavbar

A responsive navbar to display in a dashboard.

DashboardResizeHandle

A handle to resize a sidebar or panel.