Bobo-elements

Appearance

On this page

Collapse 折叠面版 ​

通过折叠面板收纳内容区域

基础用法 ​

可同时展开多个面板，面板之间不影响

Title A

headline title

this is content a aaa
Title B
Disabled Title
<script setup>
import { ref } from 'vue'
import Collapse from '@/components/Collapse/Collapse.vue'
import Item from '@/components/Collapse/CollapseItem.vue'
const openedValue = ref(['a'])
</script>
<template>
  <div class="basic block">
    <Collapse v-model="openedValue">
      <Item name="a" title="Title A">
        <h1>headline title</h1>
        <div> this is content a aaa </div>
      </Item>
      <Item name="b" title="Title B">
        <div> this is bbbbb test </div>
      </Item>
      <Item name="c" title="Disabled Title" disabled>
        <div> this is cccc test </div>
      </Item>
    </Collapse>
  </div>
</template>

手风琴效果 ​

每次只能展开一个面板

通过 accordion 属性来设置是否以手风琴模式显示。

Title A

headline title

this is content a aaa
Title B
Title C
<script setup>
import { ref } from 'vue'
import Collapse from '@/components/Collapse/Collapse.vue'
import Item from '@/components/Collapse/CollapseItem.vue'
const openedValue = ref('a')
</script>
<template>
  <div class="basic block">
    <Collapse v-model="openedValue" accordion>
      <Item name="a" title="Title A">
        <h1>headline title</h1>
        <div> this is content a aaa </div>
      </Item>
      <Item name="b" title="Title B">
        <div> this is bbbbb test </div>
      </Item>
      <Item name="c" title="Title C">
        <div> this is cccc test </div>
      </Item>
    </Collapse>
  </div>
</template>