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" class="bg-(--ui-color-design-outline-bg-alt) backdrop-blur-md">
        <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.

The dragging, the remembered size and the collapse behaviour all come from the useResizable composable, which is exported if you need a resizable region of your own:

const { el, size, isDragging, isCollapsed, onMouseDown, onTouchStart, onDoubleClick, collapse } = useResizable('my-panel', {
  side: 'left',
  unit: '%',
  defaultSize: 25,
  minSize: 10,
  maxSize: 50,
  collapsible: true,
  storage: 'local'
})

Bind el to the element being sized and the handlers to your handle. The first argument is the storage key, so give each region its own — two regions sharing a key share a width.

Four defaults are worth setting explicitly, because they are not what the prop names suggest. unit is 'px', so bare minSize/maxSize numbers are pixels, not percentages. defaultSize is 0. collapsible is false in the composable, so collapse() and isCollapsed do nothing until you turn it on. And storage is 'cookie', which relies on useCookie — outside Nuxt that is a stub and nothing persists, so use 'local' in a plain Vue app.

resizable

minSize

defaultSize

maxSize

<template>
  <B24DashboardPanel resizable :min-size="200" :default-size="240" :max-size="250">
    <template #body>
      <Placeholder class="ms-2 mt-4 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 mt-4 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?: SlotClass; body?: SlotClass; handle?: SlotClass; }`

Slots

Slot	Type
`default`	`{}`
`header`	`{}`
`body`	`{}`
`footer`	`{}`
`resize-handle`	`{ onMouseDown: (e: MouseEvent) => void; onTouchStart: (e: TouchEvent) => void; onDoubleClick: (e: MouseEvent) => void; }`

Theme

https://github.com/bitrix24/b24ui/tree/main/src/theme/dashboard-panel.ts

export default {
  slots: {
    root: 'relative flex flex-col min-w-0 min-h-svh lg:not-last:border-e lg:not-last:border-e-0 lg:not-last:border-(--ui-color-divider-default) shrink-0',
    body: 'flex flex-col gap-4 flex-1 overflow-y-auto sm:p-4 sm:pt-0 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.