Collapse

Use Collapse to store contents.

Basic usage

You can expand multiple panels

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.

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

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

const activeNames = ref(['1'])
const handleChange = (val: string[]) => {
  // eslint-disable-next-line no-console
  console.log(val)
}
</script>

Accordion

In accordion mode, only one panel can be expanded at once. Activate accordion mode using the accordion attribute.

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.

Custom Title

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

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.

<template>
  <b-collapse v-model="activeNames" accordion>
    <b-collapse-item name="1">
      <template #title>
        <span class="inline-flex items-center">
          Consistency
          <b-icon class="ml-2">
            <Information />
          </b-icon>
        </span>
      </template>
      <p>
        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;
      </p>
      <p class="mt-2">
        Consistent within interface: all elements should be consistent, such as:
        design style, icons and texts, position of elements, etc.
      </p>
    </b-collapse-item>
    <b-collapse-item title="Feedback" name="2">
      <p>
        Operation feedback: enable the users to clearly perceive their
        operations by style updates and interactive effects;
      </p>
      <p class="mt-2">
        Visual feedback: reflect current state by updating or rearranging
        elements of the page.
      </p>
    </b-collapse-item>
    <b-collapse-item title="Efficiency" name="3">
      <p>Simplify the process: keep operating process simple and intuitive;</p>
      <p class="mt-2">
        Definite and clear: enunciate your intentions clearly so that the users
        can quickly understand and make decisions;
      </p>
      <p class="mt-2">
        Easy to identify: the interface should be straightforward, which helps
        the users to identify and frees them from memorizing and recalling.
      </p>
    </b-collapse-item>
    <b-collapse-item title="Controllability" name="4">
      <p>
        Decision making: giving advices about operations is acceptable, but do
        not make decisions for the users;
      </p>
      <p class="mt-2">
        Controlled consequences: users should be granted the freedom to operate,
        including canceling, aborting or terminating current operation.
      </p>
    </b-collapse-item>
  </b-collapse>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import { Information } from '@bigin/icons-vue'

const activeNames = ref(['1'])
</script>

Collapse Attributes

Attribute	Description	Type	Accepted Values	Default
model-value / v-model	currently active panel	string (accordion mode) / array (non-accordion mode)	—	—
accordion	whether to activate accordion mode	boolean	—	false

Collapse Events

Event Name	Description	Parameters
change	triggers when active panels change	(activeNames: array (non-accordion mode) / string (accordion mode))

Collapse Slots

Name	Description	Subtags
-	customize default content	Collapse Item

Collapse Item Attributes

Attribute	Description	Type	Accepted Values	Default
name	unique identification of the panel	string/number	—	—
title	title of the panel	string	—	—
disabled	disable the collapse item	boolean	—	—

Collapse Item Slot

Name	Description
—	content of Collapse Item
title	content of Collapse Item title

# Collapse

# Basic usage

# Accordion

# Custom Title

# Collapse Attributes

# Collapse Events

# Collapse Slots

# Collapse Item Attributes

# Collapse Item Slot

Collapse

Basic usage

Accordion

Custom Title

Collapse Attributes

Collapse Events

Collapse Slots

Collapse Item Attributes

Collapse Item Slot