Usage

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:

pages/index.vue

<script setup lang="ts">
definePageMeta({
  layout: 'dashboard'
})
</script>

<template>
  <B24DashboardPanel id="inbox-1" resizable />

  <B24DashboardPanel id="inbox-2" class="hidden lg:flex" />
</template>

It is recommended to set an id when using multiple panels in different pages to avoid conflicts.

This component does not have a single root element when using the 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.

Inbox

<template>
  <B24DashboardPanel resizable>
    <template #header>
      <B24DashboardNavbar title="Inbox">
        <template #leading>
          <B24DashboardSidebarCollapse />
        </template>
      </B24DashboardNavbar>
    </template>

    <template #body>
      <Placeholder class="h-full" />
    </template>
  </B24DashboardPanel>
</template>

Most of the time, you will use the DashboardNavbar component in the header slot.

Resizable

Use the resizable prop to make the panel resizable.

resizable

minSize

defaultSize

maxSize

<template>
  <B24DashboardPanel resizable :min-size="200" :default-size="240" :max-size="250">
    <template #body>
      <Placeholder class="ms-2 h-96" />
    </template>
  </B24DashboardPanel>
</template>

Size

Use the min-size, max-size and default-size props to customize the size of the panel.

minSize

defaultSize

maxSize

<template>
  <B24DashboardPanel resizable :min-size="200" :default-size="240" :max-size="250">
    <template #body>
      <Placeholder class="ms-2 h-96" />
    </template>
  </B24DashboardPanel>
</template>

Sizes are calculated as percentages by default. You can change this using the unit prop on the DashboardGroup component.

API

Props

Prop	Default	Type
`id`	`useId()`	`string` The id of the panel.
`minSize`	`200`	`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.
`b24ui`		`{ root?: ClassNameValue; body?: ClassNameValue; handle?: ClassNameValue; }`

Slots

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({
  b24ui: {
    dashboardPanel: {
      slots: {
        root: 'relative flex flex-col min-w-0 min-h-svh lg:not-last:border-e lg:not-last:border-(--ui-color-divider-default) shrink-0',
        body: 'flex flex-col gap-4 sm:gap-6 flex-1 overflow-y-auto pt-2.5 lg:p-4 scrollbar-thin',
        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 bitrix24UIPluginVite from '@bitrix24/b24ui-nuxt/vite'

export default defineConfig({
  plugins: [
    vue(),
    bitrix24UIPluginVite({
      b24ui: {
        dashboardPanel: {
          slots: {
            root: 'relative flex flex-col min-w-0 min-h-svh lg:not-last:border-e lg:not-last:border-(--ui-color-divider-default) shrink-0',
            body: 'flex flex-col gap-4 sm:gap-6 flex-1 overflow-y-auto pt-2.5 lg:p-4 scrollbar-thin',
            handle: ''
          },
          variants: {
            size: {
              true: {
                root: 'w-full lg:w-(--width)'
              },
              false: {
                root: 'flex-1'
              }
            }
          }
        }
      }
    })
  ]
})

DashboardNavbar

A responsive navigation bar for dashboards.

DashboardResizeHandle

A resize handle for sidebars or panels.

DashboardPanel New