Collapse

Collapse component enhanced based on Element Plus Collapse.

Use Collapse to store contents.

Basic usage

You can expand multiple panels

Consistency

Consistent with real life: in line with the process and logic of real life, and comply with languages and habits that the users are used to;

Consistent within interface: all elements should be consistent, such as: design style, icons and texts, position of elements, etc.

Feedback

Operation feedback: enable the users to clearly perceive their operations by style updates and interactive effects;

Visual feedback: reflect current state by updating or rearranging elements of the page.

Efficiency

Simplify the process: keep operating process simple and intuitive;

Definite and clear: enunciate your intentions clearly so that the users can quickly understand and make decisions;

Easy to identify: the interface should be straightforward, which helps the users to identify and frees them from memorizing and recalling.

Controllability

Decision making: giving advice about operations is acceptable, but do not make decisions for the users;

Controlled consequences: users should be granted the freedom to operate, including canceling, aborting or terminating current operation.

<template>
  <div class="demo-collapse">
    <bk-collapse v-model="activeNames" @change="handleChange">
      <bk-collapse-item title="Consistency" name="1">
        <div>
          Consistent with real life: in line with the process and logic of real life, and comply
          with languages and habits that the users are used to;
        </div>
        <div>
          Consistent within interface: all elements should be consistent, such as: design style,
          icons and texts, position of elements, etc.
        </div>
      </bk-collapse-item>
      <bk-collapse-item title="Feedback" name="2">
        <div>
          Operation feedback: enable the users to clearly perceive their operations by style updates
          and interactive effects;
        </div>
        <div>
          Visual feedback: reflect current state by updating or rearranging elements of the page.
        </div>
      </bk-collapse-item>
      <bk-collapse-item title="Efficiency" name="3">
        <div>Simplify the process: keep operating process simple and intuitive;</div>
        <div>
          Definite and clear: enunciate your intentions clearly so that the users can quickly
          understand and make decisions;
        </div>
        <div>
          Easy to identify: the interface should be straightforward, which helps the users to
          identify and frees them from memorizing and recalling.
        </div>
      </bk-collapse-item>
      <bk-collapse-item title="Controllability" name="4">
        <div>
          Decision making: giving advice about operations is acceptable, but do not make decisions
          for the users;
        </div>
        <div>
          Controlled consequences: users should be granted the freedom to operate, including
          canceling, aborting or terminating current operation.
        </div>
      </bk-collapse-item>
    </bk-collapse>
  </div>
</template>

<script lang="ts" setup>
import { ref } from "vue"

import type { CollapseModelValue } from "vue-business-kit"

const activeNames = ref(["1"])
const handleChange = (val: CollapseModelValue) => {
  console.log(val)
}
</script>

Hide Source

Accordion

In accordion mode, only one panel can be expanded at once

Activate accordion mode using the accordion attribute.

Consistency

Consistent with real life: in line with the process and logic of real life, and comply with languages and habits that the users are used to;

Consistent within interface: all elements should be consistent, such as: design style, icons and texts, position of elements, etc.

Feedback

Operation feedback: enable the users to clearly perceive their operations by style updates and interactive effects;

Visual feedback: reflect current state by updating or rearranging elements of the page.

Efficiency

Simplify the process: keep operating process simple and intuitive;

Definite and clear: enunciate your intentions clearly so that the users can quickly understand and make decisions;

Easy to identify: the interface should be straightforward, which helps the users to identify and frees them from memorizing and recalling.

Controllability

Decision making: giving advices about operations is acceptable, but do not make decisions for the users;

Controlled consequences: users should be granted the freedom to operate, including canceling, aborting or terminating current operation.

<template>
  <div class="demo-collapse">
    <bk-collapse v-model="activeName" accordion>
      <bk-collapse-item title="Consistency" name="1">
        <div>
          Consistent with real life: in line with the process and logic of real life, and comply
          with languages and habits that the users are used to;
        </div>
        <div>
          Consistent within interface: all elements should be consistent, such as: design style,
          icons and texts, position of elements, etc.
        </div>
      </bk-collapse-item>
      <bk-collapse-item title="Feedback" name="2">
        <div>
          Operation feedback: enable the users to clearly perceive their operations by style updates
          and interactive effects;
        </div>
        <div>
          Visual feedback: reflect current state by updating or rearranging elements of the page.
        </div>
      </bk-collapse-item>
      <bk-collapse-item title="Efficiency" name="3">
        <div>Simplify the process: keep operating process simple and intuitive;</div>
        <div>
          Definite and clear: enunciate your intentions clearly so that the users can quickly
          understand and make decisions;
        </div>
        <div>
          Easy to identify: the interface should be straightforward, which helps the users to
          identify and frees them from memorizing and recalling.
        </div>
      </bk-collapse-item>
      <bk-collapse-item title="Controllability" name="4">
        <div>
          Decision making: giving advices about operations is acceptable, but do not make decisions
          for the users;
        </div>
        <div>
          Controlled consequences: users should be granted the freedom to operate, including
          canceling, aborting or terminating current operation.
        </div>
      </bk-collapse-item>
    </bk-collapse>
  </div>
</template>

<script lang="ts" setup>
import { ref } from "vue"

const activeName = ref("1")
</script>

Hide Source

Custom title

Besides using the title attribute, you can customize panel title with named slots, which makes adding custom content, e.g. icons, possible.

TIP

The title slot provides an isActive property that indicates whether the current collapse item is active.

Consistency

Consistent with real life: in line with the process and logic of real life, and comply with languages and habits that the users are used to;

Consistent within interface: all elements should be consistent, such as: design style, icons and texts, position of elements, etc.

Feedback

Operation feedback: enable the users to clearly perceive their operations by style updates and interactive effects;

Visual feedback: reflect current state by updating or rearranging elements of the page.

Efficiency

Simplify the process: keep operating process simple and intuitive;

Definite and clear: enunciate your intentions clearly so that the users can quickly understand and make decisions;

Easy to identify: the interface should be straightforward, which helps the users to identify and frees them from memorizing and recalling.

Controllability

Decision making: giving advices about operations is acceptable, but do not make decisions for the users;

Controlled consequences: users should be granted the freedom to operate, including canceling, aborting or terminating current operation.

<template>
  <div class="demo-collapse">
    <bk-collapse accordion>
      <bk-collapse-item name="1">
        <template #title="{ isActive }">
          <div :class="['title-wrapper', { 'is-active': isActive }]">
            Consistency
            <bk-icon class="header-icon" icon="tabler:info-circle-filled"> </bk-icon>
          </div>
        </template>
        <div>
          Consistent with real life: in line with the process and logic of real life, and comply
          with languages and habits that the users are used to;
        </div>
        <div>
          Consistent within interface: all elements should be consistent, such as: design style,
          icons and texts, position of elements, etc.
        </div>
      </bk-collapse-item>
      <bk-collapse-item title="Feedback" name="2">
        <div>
          Operation feedback: enable the users to clearly perceive their operations by style updates
          and interactive effects;
        </div>
        <div>
          Visual feedback: reflect current state by updating or rearranging elements of the page.
        </div>
      </bk-collapse-item>
      <bk-collapse-item title="Efficiency" name="3">
        <div>Simplify the process: keep operating process simple and intuitive;</div>
        <div>
          Definite and clear: enunciate your intentions clearly so that the users can quickly
          understand and make decisions;
        </div>
        <div>
          Easy to identify: the interface should be straightforward, which helps the users to
          identify and frees them from memorizing and recalling.
        </div>
      </bk-collapse-item>
      <bk-collapse-item title="Controllability" name="4">
        <div>
          Decision making: giving advices about operations is acceptable, but do not make decisions
          for the users;
        </div>
        <div>
          Controlled consequences: users should be granted the freedom to operate, including
          canceling, aborting or terminating current operation.
        </div>
      </bk-collapse-item>
    </bk-collapse>
  </div>
</template>

<script setup lang="ts"></script>

<style scoped>
.title-wrapper {
  display: flex;
  align-items: center;
  gap: 4px;
}

.title-wrapper.is-active {
  color: var(--el-color-primary);
}
</style>

Hide Source

Custom icon

Besides using the icon attribute, you can customize icon of panel item with named slots, which makes adding custom content.

Consistency

Consistent with real life: in line with the process and logic of real life, and comply with languages and habits that the users are used to;

Consistent within interface: all elements should be consistent, such as: design style, icons and texts, position of elements, etc.

Feedback

Collapsed

Operation feedback: enable the users to clearly perceive their operations by style updates and interactive effects;

Visual feedback: reflect current state by updating or rearranging elements of the page.

Efficiency

Simplify the process: keep operating process simple and intuitive;

Definite and clear: enunciate your intentions clearly so that the users can quickly understand and make decisions;

Easy to identify: the interface should be straightforward, which helps the users to identify and frees them from memorizing and recalling.

Controllability

Decision making: giving advices about operations is acceptable, but do not make decisions for the users;

Controlled consequences: users should be granted the freedom to operate, including canceling, aborting or terminating current operation.

<template>
  <div class="demo-collapse">
    <bk-collapse v-model="activeNames" @change="handleChange">
      <bk-collapse-item title="Consistency" name="1" icon="tabler:folder-open">
        <div>
          Consistent with real life: in line with the process and logic of real life, and comply
          with languages and habits that the users are used to;
        </div>
        <div>
          Consistent within interface: all elements should be consistent, such as: design style,
          icons and texts, position of elements, etc.
        </div>
      </bk-collapse-item>
      <bk-collapse-item title="Feedback" name="2">
        <template #icon="{ isActive }">
          <span class="icon-ele">
            {{ isActive ? "Expanded" : "Collapsed" }}
          </span>
        </template>
        <div>
          Operation feedback: enable the users to clearly perceive their operations by style updates
          and interactive effects;
        </div>
        <div>
          Visual feedback: reflect current state by updating or rearranging elements of the page.
        </div>
      </bk-collapse-item>
      <bk-collapse-item title="Efficiency" name="3">
        <div>Simplify the process: keep operating process simple and intuitive;</div>
        <div>
          Definite and clear: enunciate your intentions clearly so that the users can quickly
          understand and make decisions;
        </div>
        <div>
          Easy to identify: the interface should be straightforward, which helps the users to
          identify and frees them from memorizing and recalling.
        </div>
      </bk-collapse-item>
      <bk-collapse-item title="Controllability" name="4">
        <div>
          Decision making: giving advices about operations is acceptable, but do not make decisions
          for the users;
        </div>
        <div>
          Controlled consequences: users should be granted the freedom to operate, including
          canceling, aborting or terminating current operation.
        </div>
      </bk-collapse-item>
    </bk-collapse>
  </div>
</template>

<script lang="ts" setup>
import { ref } from "vue"
import { type CollapseModelValue } from "vue-business-kit"

const activeNames = ref(["1"])
const handleChange = (val: CollapseModelValue) => {
  console.log(val)
}
</script>

<style scoped>
.icon-ele {
  margin: 0 8px 0 auto;
  color: #409eff;
}
</style>

Hide Source

Custom icon position

using the expand-icon-position attribute, you can customize icon position.

expand icon position:

left

right

Consistency

Consistent with real life: in line with the process and logic of real life, and comply with languages and habits that the users are used to;

Consistent within interface: all elements should be consistent, such as: design style, icons and texts, position of elements, etc.

Feedback

Operation feedback: enable the users to clearly perceive their operations by style updates and interactive effects;

Visual feedback: reflect current state by updating or rearranging elements of the page.

Efficiency

Simplify the process: keep operating process simple and intuitive;

Definite and clear: enunciate your intentions clearly so that the users can quickly understand and make decisions;

Easy to identify: the interface should be straightforward, which helps the users to identify and frees them from memorizing and recalling.

<template>
  <div class="demo-collapse-position">
    <div class="flex items-center mb-4">
      <span class="mr-4">expand icon position: </span>
      <el-switch
        v-model="position"
        inactive-value="left"
        active-value="right"
        inactive-text="left"
        active-text="right"
        style="--el-switch-off-color: #88b8fe"
      />
    </div>

    <bk-collapse :expand-icon-position="position">
      <bk-collapse-item title="Consistency" name="1">
        <div>
          Consistent with real life: in line with the process and logic of real life, and comply
          with languages and habits that the users are used to;
        </div>
        <div>
          Consistent within interface: all elements should be consistent, such as: design style,
          icons and texts, position of elements, etc.
        </div>
      </bk-collapse-item>
      <bk-collapse-item title="Feedback" name="2">
        <div>
          Operation feedback: enable the users to clearly perceive their operations by style updates
          and interactive effects;
        </div>
        <div>
          Visual feedback: reflect current state by updating or rearranging elements of the page.
        </div>
      </bk-collapse-item>
      <bk-collapse-item title="Efficiency" name="3">
        <div>Simplify the process: keep operating process simple and intuitive;</div>
        <div>
          Definite and clear: enunciate your intentions clearly so that the users can quickly
          understand and make decisions;
        </div>
        <div>
          Easy to identify: the interface should be straightforward, which helps the users to
          identify and frees them from memorizing and recalling.
        </div>
      </bk-collapse-item>
    </bk-collapse>
  </div>
</template>

<script lang="ts" setup>
import { ref } from "vue"

import type { CollapseIconPositionType } from "vue-business-kit"

const position = ref<CollapseIconPositionType>("left")
</script>

Hide Source

Prevent collapsing

set the before-collapse property, If false is returned or a Promise is returned and then is rejected, will stop collapsing.

before collapse return:

false

true

Consistency

Consistent with real life: in line with the process and logic of real life, and comply with languages and habits that the users are used to;

Consistent within interface: all elements should be consistent, such as: design style, icons and texts, position of elements, etc.

Feedback

Operation feedback: enable the users to clearly perceive their operations by style updates and interactive effects;

Visual feedback: reflect current state by updating or rearranging elements of the page.

Efficiency

Simplify the process: keep operating process simple and intuitive;

Definite and clear: enunciate your intentions clearly so that the users can quickly understand and make decisions;

Easy to identify: the interface should be straightforward, which helps the users to identify and frees them from memorizing and recalling.

Controllability

Decision making: giving advices about operations is acceptable, but do not make decisions for the users;

Controlled consequences: users should be granted the freedom to operate, including canceling, aborting or terminating current operation.

<template>
  <div v-loading="loading" class="demo-collapse">
    <div class="flex items-center mb-4">
      <span class="mr-4">before collapse return: </span>
      <el-switch
        v-model="before"
        :inactive-value="false"
        :active-value="true"
        inactive-text="false"
        active-text="true"
      />
    </div>

    <bk-collapse v-model="activeNames" :before-collapse="beforeCollapse">
      <bk-collapse-item title="Consistency" name="1">
        <div>
          Consistent with real life: in line with the process and logic of real life, and comply
          with languages and habits that the users are used to;
        </div>
        <div>
          Consistent within interface: all elements should be consistent, such as: design style,
          icons and texts, position of elements, etc.
        </div>
      </bk-collapse-item>
      <bk-collapse-item title="Feedback" name="2">
        <div>
          Operation feedback: enable the users to clearly perceive their operations by style updates
          and interactive effects;
        </div>
        <div>
          Visual feedback: reflect current state by updating or rearranging elements of the page.
        </div>
      </bk-collapse-item>
      <bk-collapse-item title="Efficiency" name="3">
        <div>Simplify the process: keep operating process simple and intuitive;</div>
        <div>
          Definite and clear: enunciate your intentions clearly so that the users can quickly
          understand and make decisions;
        </div>
        <div>
          Easy to identify: the interface should be straightforward, which helps the users to
          identify and frees them from memorizing and recalling.
        </div>
      </bk-collapse-item>
      <bk-collapse-item title="Controllability" name="4">
        <div>
          Decision making: giving advices about operations is acceptable, but do not make decisions
          for the users;
        </div>
        <div>
          Controlled consequences: users should be granted the freedom to operate, including
          canceling, aborting or terminating current operation.
        </div>
      </bk-collapse-item>
    </bk-collapse>
  </div>
</template>

<script lang="ts" setup>
import { ref } from "vue"

const before = ref(true)
const activeNames = ref(["1"])
const loading = ref(false)

const beforeCollapse = (): Promise<boolean> => {
  loading.value = true
  return new Promise((resolve) => {
    setTimeout(() => {
      loading.value = false
      return resolve(before.value)
    }, 1000)
  })
}
</script>

Hide Source

Toolbar

Customize the collapse item toolbar.

Use show-export attribute to display built-in action buttons, or use the toolbar slot to fully customize the toolbar content.

Data

Settings

There are no click events for the time being

<template>
  <div class="demo-collapse">
    <bk-collapse v-model="activeNames" @change="handleChange">
      <bk-collapse-item title="Data" name="1" show-export>
        <bk-table :raw-data="tableData">
          <bk-table-column prop="date" label="Date" width="180"> </bk-table-column>
          <bk-table-column prop="name" label="Name" width="180"> </bk-table-column>
          <bk-table-column prop="address" label="Address"> </bk-table-column>
        </bk-table>
      </bk-collapse-item>
      <bk-collapse-item title="Settings" name="2">
        <template #toolbar>
          <bk-icon
            icon="tabler:settings-check"
            size="30"
            @click.stop="event = 'Settings Check'"
          ></bk-icon>
          <bk-icon
            icon="tabler:settings-code"
            size="30"
            @click.stop="event = 'Settings Code'"
          ></bk-icon>
          <bk-icon
            icon="tabler:settings-exclamation"
            size="30"
            @click.stop="event = 'Settings Exclamation'"
          ></bk-icon>
        </template>
        {{ event }}
      </bk-collapse-item>
    </bk-collapse>
  </div>
</template>

<script lang="ts" setup>
import { ref } from "vue"

import type { CollapseModelValue } from "vue-business-kit"

const tableData = [
  {
    date: "2016-05-03",
    name: "Tom",
    address: "No. 189, Grove St, Los Angeles"
  },
  {
    date: "2016-05-02",
    name: "Tom",
    address: "No. 189, Grove St, Los Angeles"
  },
  {
    date: "2016-05-04",
    name: "Tom",
    address: "No. 189, Grove St, Los Angeles"
  },
  {
    date: "2016-05-01",
    name: "Tom",
    address: "No. 189, Grove St, Los Angeles"
  }
]

const activeNames = ref(["1"])
const event = ref("There are no click events for the time being")
const handleChange = (val: CollapseModelValue) => {
  console.log(val)
}
</script>

Hide Source

Collapse API

Collapse Attributes

Element Plus Collapse Attributes

Name	Description	Type	Default
model-value / v-model	currently active panel, the type is string in accordion mode, otherwise it is array	string / array	[]
accordion	whether to activate accordion mode	boolean	false
expand-icon-position	set expand icon position	enum	right
before-collapse	before-collapse hook before the collapse state changes. If false is returned or a Promise is returned and then is rejected, will stop collapsing	Function	—

Collapse Events

Element Plus Collapse Events

Name	Description	Type
change	triggers when active panels change, the parameter type is string in accordion mode, otherwise it is array	Function

Collapse Slots

Element Plus Collapse Slots

Name	Description	Subtags
default	customize default content	Collapse Item

Collapse Exposes

Element Plus Collapse Exposes

Name	Description	Type
activeNames	currently active panel names	object
setActiveNames	set active panel names	Function

Collapse Item API

Collapse Item Attributes

Name	Description	Type	Default
title extended	title of the panel	string	''
subtitle	subtitle of the panel	string	''
icon extended	icon of the collapse item	string / Component	ArrowRight
showExport	show export button, If onExport is empty, it will default to obtaining the export of the child component bk-table.	boolean	false
onExport	export event	Function	—

Element Plus CollapseItem Attributes

Name	Description	Type	Default
name	unique identification of the panel	string / number	—
disabled	disable the collapse item	boolean	false

Collapse Item Slot

Name	Description	Type
title extended	content of Collapse Item title	object
icon extended	content of Collapse Item icon	object
toolbar	content of Collapse Item toolbar	—

Element Plus CollapseItem Slot

Name	Description	Type
default	content of Collapse Item	—

Collapse Item Exposes

Element Plus CollapseItem Exposes

Name	Description	Type
isActive	whether the current collapse item is active	object