Panel group

面板组模块，用于组织和管理多个面板在垂直空间的布局

panel-group

组件默认会打开面板组中的所有面板，并自动应用均等高度。另外，面板组会至少保证有一个面板处于打开状态

实例

快速应用

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>

组件仅实现布局与功能，不包含样式，这样更方便进行样式定制，实例中的样式仅为了更直观地呈现效果

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.

指定打开的面板

通过设置 PanelGroup 的 v-model 值来指定打开的面板，同时别忘了为 PanelItem 设置 name 属性

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>

注意

面板不能全部被关闭，至少会保留一个面板处于打开状态

手风琴模式

通过设置 accordion 属性可以切换为手风琴模式，仅显示一个扩展面板（即打开一个会关闭另一个）

唯一性

在该模式下，指定打开面板的名称数量即使超过一个，仅其中的第一个面板会被打开

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>

条件渲染

通过条件渲染销毁 / 恢复面板时，面板组会自动对剩余面板进行高度调整

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>

结合 layout

结合 LayoutAdminClassic 与 PanelGroup 实现一些布局效果

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 属性

interface PanelGroupProps {
  /**
   * 指定打开的面板名称
   */
  modelValue?: string[]
  /**
   * 面板组总宽度
   * @default `auto`
   */
  width?: CssValue
  /**
   * 面板组总高度
   * @default `100%`
   */
  height?: CssValue
  /**
   * 面板与面板的间距
   * @default `1rem`
   */
  gap?: CssValue
  /**
   * 手风琴模式（单面板打开）
   * @default false
   */
  accordion?: boolean
}

PanelItem 属性

interface PanelItemProps {
  /**
   * 面板名，用于 PanelGroup 中指定打开的面板
   */
  name?: string
  /**
   * 面板内容收起开关
   * @default true
   */
  switcher?: boolean
  /**
   * 切换图标自定义样式
   */
  switcherClass?: string
  /**
   * 收起面板时是否销毁
   * @default false
   */
  destroyOnCollapse?: boolean
}

v-region

v-dialogs

v-layouts

Panel group

实例

快速应用

panel 1 header

panel 2 header

panel 3 header

指定打开的面板

panel 1 header

panel 2 header

panel 3 header

手风琴模式

panel 1 header

panel 2 header

panel 3 header

条件渲染

panel 1 header

panel 2 header

panel 3 header

结合 layout

panel 1 header

panel 2 header

panel 3 header

Props

插槽

PanelGroup

PanelItem

Panel group ​

实例 ​

快速应用 ​

panel 1 header

panel 2 header

panel 3 header

指定打开的面板 ​

panel 1 header

panel 2 header

panel 3 header

手风琴模式 ​

panel 1 header

panel 2 header

panel 3 header

条件渲染 ​

panel 1 header

panel 2 header

panel 3 header

结合 layout ​

panel 1 header

panel 2 header

panel 3 header

Props ​

插槽 ​

PanelGroup ​

PanelItem ​

Panel group

实例

快速应用

指定打开的面板

手风琴模式

条件渲染

结合 layout

Props

插槽

PanelGroup

PanelItem