ダッシュボードパネル

サイトマップ
ダッシュボードに表示するサイズ変更可能なパネル。

使用法

DashboardPanelコンポーネントは、パネルを表示するために使用されます。その状態（サイズ、折りたたみなど）は、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プロパティを使用する場合、このコンポーネントは単一のルート要素を持ちません。ページ遷移を使用する場合や、レイアウトに単一のルートを必要とする場合は、コンテナ（例えば<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>
ほとんどの場合、DashboardNavbarコンポーネントをheaderスロットで使用します。

サイズ変更可能

resizableプロパティを使用してパネルのサイズを変更できます。

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

サイズ

min-size、max-size、default-sizeの小道具を使用して、パネルのサイズをカスタマイズします。

<template>
  <UDashboardPanel resizable :min-size="22" :default-size="35" :max-size="40">
    <template #body>
      <Placeholder class="h-96" />
    </template>
  </UDashboardPanel>
</template>
サイズはデフォルトでパーセンテージで計算されます。DashboardGroupコンポーネントのunitプロパティを使用して変更できます。

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

スロット

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

Changelog

No recent changes

DashboardNavbar

A responsive navbar to display in a dashboard.

DashboardResizeHandle

A handle to resize a sidebar or panel.