dashboardPanel 대시보드

대시보드에 표시할 크기 조절 가능한 패널입니다.

Usage

대시보드 패널 구성 요소는 패널을 표시하는 데 사용됩니다. 해당 상태(크기, 축소 등)는 DashboardGroup 구성 요소에 제공된 storage 및 storage-key 소품에 따라 저장됩니다.

DashboardGroup 구성 요소의 기본 슬롯에 사용하면 여러 패널을 서로 옆에 배치할 수 있습니다.

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>

충돌을 방지하려면 서로 다른 페이지에서 여러 패널을 사용할 때 id를 설정하는 것이 좋습니다.

resizable Prop을 사용할 때 이 구성 요소는 단일 루트 요소를 갖지 않으므로 페이지 전환을 사용하거나 레이아웃에 단일 루트가 필요한 경우 컨테이너(예: <div class="flex flex-1">)에 래핑합니다.

패딩이 있는 스크롤 가능한 몸체를 원하지 않는 경우 header, body 및 footer 슬롯을 사용하여 패널이나 기본 슬롯을 사용자 정의합니다.

Inbox

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

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

대부분의 경우 header 슬롯에서 DashboardNavbar 구성 요소를 사용합니다.

크기 조정 가능

resizable 소품을 사용하여 패널의 크기를 조절할 수 있도록 합니다.

resizable

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

Size 크기

min-size, max-size 및 default-size 소품을 사용하여 패널의 크기를 사용자 정의합니다.

minSize

defaultSize

maxSize

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

크기는 기본적으로 백분율로 계산됩니다. DashboardGroup 구성 요소에서 unit prop을 사용하여 변경할 수 있습니다.

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

Theme 테마

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

변경 로그

No recent changes

DashboardNavbar

A responsive navbar to display in a dashboard.

DashboardResizeHandle

A handle to resize a sidebar or panel.