Vue DashboardGroup Component

Usage

The DashboardGroup component is the main layout that wraps the DashboardSidebar and DashboardPanel components to create a responsive dashboard interface.

Use it in a layout or in your app.vue:

layouts/dashboard.vue

<template>
  <B24DashboardGroup>
    <B24DashboardSidebar />

    <slot />
  </B24DashboardGroup>
</template>

API

Props

Prop	Default	Type
`as`	`'div'`	`any` The element or component this component should render as.
`storage`	`'cookie'`	`"cookie" \| "local"` The storage to use for the size.
`storageKey`	`'dashboard'`	`string` Unique id used to auto-save size.
`persistent`	`true`	`boolean` Whether to persist the size in the storage.
`unit`	`'px'`	`"px" \| "%" \| "rem"` The unit to use for size values.
`b24ui`		`{ base?: any; }`

Slots

Slot	Type
`default`	`{}`

Theme

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

export default {
  base: 'fixed inset-0 flex overflow-hidden'
}

PageSection

A responsive section.

DashboardNavbar

A responsive navigation bar for dashboards.