El DashboardPanel

GitHub también
Un panel redimensionable para mostrar en un panel de control.

xph0000xUso

Su estado (tamaño, colapsado, etc.) se guardará en función de los elementos de apoyo storage y storage-key que proporcione al componente DashboardGroup.

Usarlo dentro de la ranura predeterminada del componente DashboardGroup, puede poner varios paneles uno al lado del otro:

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>
Se recomienda establecer un id cuando se utilizan varios paneles en diferentes páginas para evitar conflictos.
Este componente no tiene un solo elemento raíz cuando se usa el prop resizable, así que envuélvalo en un contenedor (por ejemplo, <div class="flex flex-1">) si usa transiciones de página o requiere una sola raíz para el diseño.

Utiliza las ranuras header, body y footer para personalizar el panel o la ranura predeterminada si no quieres un cuerpo desplazable con relleno.

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 mayoría de las veces, se utilizará el componente DashboardNavbar en la ranura header.

redimensionable

Utilice el soporte resizable para hacer que el panel sea redimensionable.

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

Tamaño

Utilice los accesorios min-size, max-size y default-size para personalizar el tamaño del panel.

<template>
  <UDashboardPanel resizable :min-size="22" :default-size="35" :max-size="40">
    <template #body>
      <Placeholder class="h-96" />
    </template>
  </UDashboardPanel>
</template>
Los tamaños se calculan como porcentajes de forma predeterminada. Puede cambiar esto utilizando el prop unit en el componente DashboardGroup.

API (Edición española)

Accesorios

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 (Español)

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

Temas

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

xph05xChangelog (Edición española)

No recent changes

DashboardNavbar

A responsive navbar to display in a dashboard.

DashboardResizeHandle

A handle to resize a sidebar or panel.