DashboardPanelPRO

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，以避免冲突。

使用 header、body 和 footer 插槽来自定义面板，如果您不希望有带内边距的可滚动主体，则使用默认插槽。

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

尺寸

使用 min-size、max-size 和 default-size 属性来自定义面板的大小。

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

API

属性

属性默认值类型
id

useId()

string

面板的ID。

minSize

15

number

面板的最小尺寸。

maxSize

100

number

面板的最大尺寸。

defaultSize

0

number

面板的默认尺寸。

resizable

false

boolean

是否允许用户调整面板大小。

ui

{ root?: ClassNameValue; body?: ClassNameValue; handle?: ClassNameValue; }

插槽

插槽类型
默认

{}

页头

{}

主体

{}

页脚

{}

调整大小手柄

{ onMouseDown: (e: MouseEvent) => void; onTouchStart: (e: TouchEvent) => void; onDoubleClick: (e: MouseEvent) => void; }

主题

app.config.ts
export default defineAppConfig({
  uiPro: {
    dashboardPanel: {
      slots: {
        root: 'relative flex flex-col min-w-0 min-h-svh lg:not-last:border-r 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({
      uiPro: {
        dashboardPanel: {
          slots: {
            root: 'relative flex flex-col min-w-0 min-h-svh lg:not-last:border-r 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 uiPro from '@nuxt/ui-pro/vite'

export default defineConfig({
  plugins: [
    vue(),
    uiPro({
      uiPro: {
        dashboardPanel: {
          slots: {
            root: 'relative flex flex-col min-w-0 min-h-svh lg:not-last:border-r 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'
              }
            }
          }
        }
      }
    })
  ]
})

DashboardNavbar

一个可在仪表盘中显示的响应式导航栏。

DashboardResizeHandle

一个用于调整侧边栏或面板大小的手柄。