DashboardPanel

GitLab
Um painel redimensionável para exibir em um dashboard.

Uso

O componente DashboardPanel é usado para exibir um painel. O estado dele (tamanho, recolhido, etc.) é salvo com base nas props storage e storage-key que você fornece ao componente DashboardGroup.

Use-o dentro do slot padrão do componente DashboardGroup; você pode colocar vários painéis lado a lado:

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

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

  <NDashboardPanel id="inbox-2" class="hidden lg:flex" />
</template>
É recomendado definir um id ao usar vários painéis em páginas diferentes para evitar conflitos.
Este componente não tem um único elemento raiz ao usar a prop resizable, então envolva-o em um container (ex.: <div class="flex flex-1">) se você usar transições de página ou precisar de uma raiz única para o layout.

Use os slots header, body e footer para personalizar o painel, ou o slot padrão se você não quiser um corpo rolável com espaçamento interno.

Caixa de entrada

Na maioria das vezes, você usará o componente DashboardNavbar no slot header.

Redimensionável

Use a prop resizable para tornar o painel redimensionável.

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

Tamanho

Use as props min-size, max-size e default-size para personalizar o tamanho do painel.

<template>
  <NDashboardPanel resizable :min-size="22" :default-size="35" :max-size="40">
    <template #body>
      <Placeholder class="h-96" />
    </template>
  </NDashboardPanel>
</template>
Os tamanhos são calculados como porcentagens por padrão. Você pode alterar isso usando a prop unit no componente DashboardGroup.

API

Props

Prop Default Type
iduseId() string

The id of the panel.

minSize15 number

The minimum size of the panel.

maxSize100 number

The maximum size of the panel.

defaultSize0 number

The default size of the panel.

resizablefalseboolean

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

Tema

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 '@nitro/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

Uma navbar responsiva para exibir em um dashboard.

DashboardResizeHandle

Uma alça para redimensionar uma sidebar ou painel.