仪表板面板

GitHub
要在仪表板中显示的可调整大小的面板。

用法

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>
大多数情况下，您将使用header插槽中的DashboardNavbar组件。

可调整大小

使用resizable属性使面板可调整大小。

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

Size

使用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属性来更改此设置。

应用程序接口

道具

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

x插槽

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.