The DashboardPanel component is used to display a panel. Its state (size, collapsed, etc.) will be saved based on the storage and storage-key props you provide to the DashboardGroup component.
Use it inside the default slot of the DashboardGroup component, you can put multiple panels next to each other:
<script setup lang="ts">
definePageMeta({
layout: 'dashboard'
});
</script>
<template>
<PDashboardPanel
id="inbox-1"
resizable
/>
<PDashboardPanel
id="inbox-2"
class="hidden lg:flex"
/>
</template>
id when using multiple panels in different pages to avoid conflicts.resizable prop, so wrap it in a container (e.g., <div class="flex flex-1">) if you use page transitions or require a single root for layout.Use the header, body and footer slots to customize the panel or the default slot if you don't want a scrollable body with padding.
<template>
<PDashboardPanel resizable>
<template #header>
<PDashboardNavbar title="Inbox">
<template #leading>
<PDashboardSidebarCollapse />
</template>
</PDashboardNavbar>
</template>
<template #body>
<CorePlaceholder class="h-full" />
</template>
</PDashboardPanel>
</template>
DashboardNavbar component in the header slot.Use the resizable prop to make the panel resizable.
<template>
<PDashboardPanel resizable>
<template #body>
<CorePlaceholder class="h-96" />
</template>
</PDashboardPanel>
</template>
Use the min-size, max-size and default-size props to customize the size of the panel.
<template>
<PDashboardPanel resizable :min-size="22" :default-size="35" :max-size="40">
<template #body>
<CorePlaceholder class="h-96" />
</template>
</PDashboardPanel>
</template>
unit prop on the DashboardGroup component.| Prop | Default | Type |
|---|
| Slot | Type |
|---|
Below is the theme configuration skeleton for the PDashboardPanel. Since the component is provided unstyled by default, you will need to fill in these values to apply your own custom look and feel. If you prefer to use our pre-built, opinionated styling, you can instead use our UnoCSS preset, this docs is using it as well.
export default defineAppConfig({
pohon: {
dashboardPanel: {
slots: {
root: '',
body: '',
handle: ''
},
variants: {
size: {
true: {
root: ''
},
false: {
root: ''
}
}
}
}
}
};
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import pohon from 'pohon-ui/vite'
export default defineAppConfig({
pohon: {
dashboardPanel: {
slots: {
root: '',
body: '',
handle: ''
},
variants: {
size: {
true: {
root: ''
},
false: {
root: ''
}
}
}
}
}
};