v2.1.8
/
  • Get Started
  • Components
  • Composables
  • Typography
  • GitHub
  • Layout
  • App
  • Container
  • Error
  • SidebarLayout
  • Element
  • Advice
  • Alert
  • Avatar
  • AvatarGroup
  • Badge
  • Banner
  • Button
  • Calendar
  • Card
  • Chip
  • Collapsible
  • Countdown
  • FieldGroup
  • Kbd
  • Progress
  • Separator
  • Skeleton
  • Form
  • Checkbox
  • CheckboxGroup
  • ColorPicker
  • FileUpload
  • Form
  • FormField
  • Input
  • InputDate
  • InputMenu
  • InputNumber
  • InputTags
  • InputTime
  • PinInput
  • RadioGroup
  • Range
  • Select
  • SelectMenu
  • Switch
  • Textarea
  • Data
  • Accordion
  • DescriptionList
  • Empty
  • Table
  • TableWrapper
  • Timeline
  • User
  • Navigation
  • Breadcrumb
  • CommandPalette
  • Link
  • NavigationMenu
  • Pagination
  • Stepper
  • Tabs
  • Overlay
  • ContextMenu
  • DropdownMenu
  • Modal
  • Popover
  • Slideover
  • Toast
  • Tooltip
  • Page
  • PageCard
  • PageColumns
  • PageGrid
  • PageLinks
  • PageList
  • Dashboard
  • DashboardGroup
  • DashboardSearch
  • DashboardSearchButton
  • AI Chat
  • soonChatMessage
  • soonChatMessages
  • soonChatPalette
  • soonChatPrompt
  • soonChatPromptSubmit
  • Content
  • ContentSearch
  • ContentSearchButton
  • ContentSurround
  • ContentToc
  • Color Mode
  • ColorModeAvatar
  • ColorModeButton
  • ColorModeImage
  • ColorModeSelect
  • ColorModeSwitch
  • i18n
  • LocaleSelect
  • b24icons
  • b24jssdk
Use our Nuxt starter
v2.1.8
  • Docs
  • Components
  • Composables
  • Typography

DashboardGroup

A fixed-layout dashboard container with sidebar state management and persistent UI state.
GitHub
Nuxt UI
We are still updating this page. Some data may be missing here — we will complete it shortly.

Usage

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

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

layouts/dashboard.vue
<template>
  <B24DashboardGroup>
    <B24SidebarLayout>
      <slot />
    <B24SidebarLayout>
  </B24DashboardGroup>
</template>

API

Props

Prop Default Type
as'div'any

The element or component this component should render as.

iduseId() string

The id of the SidebarLayout.

storage'cookie' "cookie" | "local"

The storage to use for the size.

storageKey'dashboard' string

Unique id used to auto-save size.

Slots

Slot Type
default{}

Theme

app.config.ts
export default defineAppConfig({
  b24ui: {
    dashboardGroup: {
      base: ''
    }
  }
})
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: {
        dashboardGroup: {
          base: ''
        }
      }
    })
  ]
})

PageList

A vertical list layout for stacking content items.

DashboardSearch

A ready-to-use Command Palette component for your dashboard.

On this page

  • Usage
  • API
    • Props
    • Slots
  • Theme
Releases
Published under MIT License.

Copyright © 2024-present Bitrix24