仪表盘面板 - Nuxt UI Pro

用法

该 DashboardPanel 组件是创建多列布局的基础。

<script setup lang="ts">
const links = [{
  label: 'Home',
  icon: 'i-heroicons-home'
}, {
  label: 'Inbox',
  icon: 'i-heroicons-inbox',
  badge: '4'
}, {
  label: 'Users',
  icon: 'i-heroicons-user-group'
}, {
  label: 'Settings',
  icon: 'i-heroicons-cog-8-tooth',
  children: [{
    label: 'General'
  }, {
    label: 'Members'
  }, {
    label: 'Notifications'
  }]
}]
</script>

<template>
  <UDashboardPanel :width="300" :resizable="{ min: 200, max: 400 }">
    <UDashboardNavbar>
      <template #left>
        <Logo class="w-auto h-5" />
      </template>
    </UDashboardNavbar>

    <UDashboardSidebar>
      <UDashboardSidebarLinks :links="links" />
    </UDashboardSidebar>
  </UDashboardPanel>
</template>

宽度

默认情况下，DashboardPanel 将采用其内容的宽度。你可以使用 width 道具设置一个固定的宽度。

<template>
  <UDashboardPanel :width="250" />
</template>

增长

你可以使用 grow 道具使 DashboardPanel 占用剩余空间。它对于布局右侧的最后一个面板很有用。

<template>
  <UDashboardPanel grow />
</template>

使用 grow 道具时，将删除右边界以使布局看起来无缝。

可调整大小

你可以使用 resizable 道具使 DashboardPanel 可调整大小，并设置 min 和 max 值来限制调整大小。

<template>
  <UDashboardPanel :width="300" :resizable="{ min: 200, max: 400 }" />
</template>

宽度将存储在 cookie 中，以在刷新时保持布局一致。你可能希望通过将 storage 键设置为 local 来使用本地存储（这仅在禁用 ssr 如果你的 nuxt.config.ts）。

<template>
  <UDashboardPanel :width="300" :resizable="{ min: 200, max: 400, storage: 'local' }" />
</template>

我们使用 useId 可组合函数来生成唯一的 id。当你有多个可调整大小的面板时，通过 id 道具设置一个自定义 id 很有用。

<template>
  <UDashboardPanel id="inbox" :width="400" :resizable="{ min: 300, max: 500 }" />
</template>

使用 resizable 道具时，面板右侧将显示一个悬停条。你可以使用 #handle 插槽来自定义它，如 DashboardPanelHandle 中所述。

可折叠

在移动设备上，两列或三列布局将不太好用。你可以使用 collapsible 道具将 DashboardPanel 转换为移动设备上的 Slideover。

<template>
  <UDashboardPanel collapsible />
</template>

在 useUIState 可组合函数中，我们存储一个 isDashboardSidebarSlideoverOpen ref 来控制移动设备上滑出状态。DashboardPanel 将将其注入到内部的 DashboardNavbar 中，以显示一个切换按钮。

如果你想自己控制滑出状态，或者如果你有多个面板，你可以将 v-model 传递给 DashboardPanel。

<script setup lang="ts">
const selected = ref(null)

const isOpen = computed({
  get () {
    return !!selected.value
  },
  set (value: boolean) {
    if (!value) {
      selected.value = null
    }
  }
})
</script>

<template>
  <UDashboardPanel v-model="isOpen" collapsible />
</template>

如 DashboardNavbar 中所述，更改切换按钮的图标很有用。

侧面

使用 collapsible 道具时，你可以使用 side 道具设置面板的侧面。默认值为 left。

<template>
  <UDashboardPanel v-model="isOpen" collapsible side="right" />
</template>

该 DashboardPanel 可以放在 DashboardLayout 或 DashboardPage 中。

你可以在顶部放置一个 DashboardNavbar，然后放置一个 DashboardSidebar、一个 DashboardToolbar 或一个 DashboardPanelContent 来显示可滚动内容，例如。

layouts/default.vue

<template>
  <UDashboardLayout>
    <UDashboardPanel :width="250" :resizable="{ min: 200, max: 300 }" collapsible>
      <UDashboardNavbar />

      <UDashboardSidebar />
    </UDashboardPanel>

    <slot />
  </UDashboardLayout>
</template>

pages/inbox.vue

<script setup lang="ts">
const isOpen = ref(false)
</script>

<template>
  <UDashboardPage>
    <UDashboardPanel id="inbox" :width="400" :resizable="{ min: 300, max: 500 }">
      <UDashboardNavbar title="Inbox" />

      <UDashboardPanelContent />
    </UDashboardPanel>

    <UDashboardPanel v-model="isOpen" collapsible grow side="right">
      <UDashboardNavbar />

      <UDashboardToolbar />

      <UDashboardPanelContent />
    </UDashboardPanel>
  </UDashboardPage>
</template>

道具

DeepPartial<{ wrapper: string; border: string; grow: string; collapsible: string; slideover: string; }>

{}

字符串

未定义

侧面

"left" | "right"

"left"

可调整大小

布尔值 | Record<string, any>

假

宽度

数字

未定义

断点

"sm" | "md" | "lg" | "xl" | "2xl"

"lg"

modelValue

布尔值

未定义

增长

布尔值

假

可折叠

布尔值

假

配置

{
  wrapper: 'flex-col items-stretch relative w-full',
  border: 'border-b lg:border-b-0 lg:border-r border-gray-200 dark:border-gray-800 lg:w-[--width] flex-shrink-0',
  grow: 'flex-1',
  collapsible: 'hidden lg:flex',
  slideover: 'lg:hidden'
}

DashboardPage

仪表盘页面的包装器。

DashboardPanelContent

DashboardPanel 的可滚动容器。