Panel group

Panel group module for organizing and managing the layout of multiple panels in vertical space

panel-group

The component opens all panels in a panel group by default and automatically applies equal heights. In addition, the panel group is guaranteed to have at least one panel open

Examples

Quick layout

vue

<template>
  <PanelGroup>
    <PanelItem>
      <template #header>
        panel 1 header
      </template>
      <div>panel 1 body</div>
    </PanelItem>
    <PanelItem>
      <template #header>
        panel 2 header
      </template>
      <div>panel 2 body</div>
    </PanelItem>
  </PanelGroup>
</template>

<script setup>
import { PanelGroup, PanelItem } from 'v-layouts'
</script>

Components only to achieve the layout and functionality, does not contain style, so that it is more convenient to customize the style, the style in the example is only for more intuitive rendering effect

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Specify the panel to open

Specify which panel to open by setting the v-model value of PanelGroup and don't forget to set the name attribute for PanelItem

vue

<template>
  <PanelGroup v-model="active">
    <PanelItem name="panel1">...</PanelItem>
    <PanelItem name="panel2">...</PanelItem>
    <PanelItem name="panel3">...</PanelItem>
  </PanelGroup>
</template>

<script setup>
import { ref } from 'vue'
import { PanelGroup, PanelItem } from 'v-layouts'

const active = ref(['panel2', 'panel3'])
</script>

WARNING

The panels can't all be closed, at least one panel will be left open

Accordion mode

By setting the accordion prop it is possible to switch to accordion mode, where only one expansion panel is displayed (i.e. opening one closes the other)

Uniqueness

In this mode, even if more than one panel name is specified to be opened, only the first panel will be opened

vue

<template>
  <PanelGroup
    accordion
    v-model="active"
  >
    <PanelItem name="panel1">...</PanelItem>
    <PanelItem name="panel2">...</PanelItem>
    <PanelItem name="panel3">...</PanelItem>
  </PanelGroup>
</template>

<script setup>
import { ref } from 'vue'
import { PanelGroup, PanelItem } from 'v-layouts'
// set panel2 active by default
const active = ref(['panel2'])
</script>

Conditional Rendering

When destroying/restoring a panel via conditional rendering, the panel group will automatically adjust the height of the remaining panels

template

<PanelGroup>
  <PanelItem name="panel1">
    <template #header v-if="visiblePanel1Header">
      <h4>panel 1 header</h4>
    </template>
    <div>panel 1 body</div>
  </PanelItem>
  <PanelItem name="panel2" v-if="visiblePanel2">...</PanelItem>
  <PanelItem name="panel3" :switcher="false">...</PanelItem>
</PanelGroup>

Combined with layout

Combine LayoutAdminClassic and PanelGroup to realize some layout effects

template

<LayoutAdminClassic>
  <template #header>
    <div>Header</div>
  </template>
  <template #aside>
    <PanelGroup v-model="active">
      <PanelItem name="panel1">...</PanelItem>
      <PanelItem name="panel2">...</PanelItem>
      <PanelItem name="panel3" :switcher="false">...</PanelItem>
    </PanelGroup>
  </template>
  <template #breadcrumb>
    <div>Breadcrumb</div>
  </template>
  <template #footer>
    <div>Footer</div>
  </template>

  <div>Main content</div>
</LayoutAdminClassic>

Header

Main content

Props

PanelGroup properties

interface PanelGroupProps {
  /**
   * Activated panel item names
   */
  modelValue?: string[]
  /**
   * @default `auto`
   */
  width?: CssValue
  /**
   * @default `100%`
   */
  height?: CssValue
  /**
   * Panel spacing
   * @default `1rem`
   */
  gap?: CssValue
  /**
   * Panel group allows all panels to be opened by default
   * set to true, only one panel can be expanded
   * @default false
   */
  accordion?: boolean
}

PanelItem properties

interface PanelItemProps {
  /**
   * Panel item name
   */
  name?: string
  /**
   * Panel content collapse switcher
   * @default true
   */
  switcher?: boolean
  /**
   * Switcher custom class
   */
  switcherClass?: string
  /**
   * Whether to destroy when the panel is collapsed
   * @default false
   */
  destroyOnCollapse?: boolean
}

v-dialogs

v-layouts

Panel group

Examples

Quick layout

panel 1 header

panel 2 header

panel 3 header

Specify the panel to open

panel 1 header

panel 2 header

panel 3 header

Accordion mode

panel 1 header

panel 2 header

panel 3 header

Conditional Rendering

panel 1 header

panel 2 header

panel 3 header

Combined with layout

panel 1 header

panel 2 header

panel 3 header

Props

Slots

PanelGroup

PanelItem

Panel group ​

Examples ​

Quick layout ​

panel 1 header

panel 2 header

panel 3 header

Specify the panel to open ​

panel 1 header

panel 2 header

panel 3 header

Accordion mode ​

panel 1 header

panel 2 header

panel 3 header

Conditional Rendering ​

panel 1 header

panel 2 header

panel 3 header

Combined with layout ​

panel 1 header

panel 2 header

panel 3 header

Props ​

Slots ​

PanelGroup ​

PanelItem ​

Panel group

Examples

Quick layout

Specify the panel to open

Accordion mode

Conditional Rendering

Combined with layout

Props

Slots

PanelGroup

PanelItem