dashboardpanneau

GitHub à
Un panneau redimensionnable à afficher dans un dashboard.

Utilisation

Son état (taille, effondrement, etc.) sera enregistré en fonction des accessoires storage et storage-key que vous fournissez au composant DashboardGroup.

Utilisez-le dans l'emplacement par défaut du composant DashboardGroup, vous pouvez placer plusieurs panneaux les uns à côté des autres:

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>
Il est recommandé de définir un id lorsque vous utilisez plusieurs panneaux dans différentes pages pour éviter les conflits.
Ce composant n'a pas un seul élément racine lorsque vous utilisez la prop resizable, donc enveloppez-le dans un conteneur (par exemple <div class="flex flex-1">) si vous utilisez des transitions de page ou si vous avez besoin d'une seule racine pour la mise en page.

Utilisez les emplacements header, body et footer pour personnaliser le panneau ou l'emplacement par défaut si vous ne voulez pas un corps défilable avec rembourrage.

Inbox

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

    <template #body>
      <Placeholder class="h-full" />
    </template>
  </UDashboardPanel>
</template>
La plupart du temps, vous utiliserez le composant DashboardNavbar dans l'emplacement header.

Redimensionnable

Utilisez le prop resizable pour redimensionner le panneau.

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

taille

Utilisez les accessoires min-size, max-size et default-size pour personnaliser la taille du panneau.

<template>
  <UDashboardPanel resizable :min-size="22" :default-size="35" :max-size="40">
    <template #body>
      <Placeholder class="h-96" />
    </template>
  </UDashboardPanel>
</template>
Les tailles sont calculées en pourcentage par défaut. Vous pouvez modifier cela en utilisant la prop unit sur le composant DashboardGroup.

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 électroniques

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

Thème

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

No recent changes

DashboardNavbar

A responsive navbar to display in a dashboard.

DashboardResizeHandle

A handle to resize a sidebar or panel.