用法该 DashboardPanel 组件是创建多列布局的基础。
首页收件箱4用户设置一般成员通知
宽度默认情况下，DashboardPanel 将采用其内容的宽度。你可以使用 width 道具设置一个固定的宽度。
增长你可以使用 grow 道具使 DashboardPanel 占用剩余空间。它对于布局右侧的最后一个面板很有用。
使用 grow 道具时，将删除右边界以使布局看起来无缝。可调整大小你可以使用 resizable 道具使 DashboardPanel 可调整大小，并设置 min 和 max 值来限制调整大小。
宽度将存储在 cookie 中，以在刷新时保持布局一致。你可能希望通过将 storage 键设置为 local 来使用本地存储（这仅在禁用 ssr 如果你的 nuxt.config.ts）。
我们使用 useId 可组合函数 来生成唯一的 id。当你有多个可调整大小的面板时，通过 id 道具设置一个自定义 id 很有用。
使用 resizable 道具时，面板右侧将显示一个悬停条。你可以使用 #handle 插槽来自定义它，如 DashboardPanelHandle 中所述。
可折叠在移动设备上，两列或三列布局将不太好用。你可以使用 collapsible 道具将 DashboardPanel 转换为移动设备上的 Slideover。
在 useUIState 可组合函数中，我们存储一个 isDashboardSidebarSlideoverOpen ref 来控制移动设备上滑出状态。DashboardPanel 将将其注入到内部的 DashboardNavbar 中，以显示一个切换按钮。
如果你想自己控制滑出状态，或者如果你有多个面板，你可以将 v-model 传递给 DashboardPanel。
如 DashboardNavbar 中所述，更改切换按钮的图标很有用。侧面使用 collapsible 道具时，你可以使用 side 道具设置面板的侧面。默认值为 left。
该 DashboardPanel 可以放在 DashboardLayout 或 DashboardPage 中。
你可以在顶部放置一个 DashboardNavbar，然后放置一个 DashboardSidebar、一个 DashboardToolbar 或一个 DashboardPanelContent 来显示可滚动内容，例如。
layouts/default.vue
pages/inbox.vue
道具uiDeepPartial<{ wrapper: string; border: string; grow: string; collapsible: string; slideover: string; }>{}显示属性id字符串未定义侧面"left" | "right""left"可调整大小布尔值 | Record
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'
}