BIN-UI-DESIGN

Appearance

On this page

折叠面板 Collapse ​

需要进行分段显示时使用折叠面板

基础用法 ​

默认可以同时展开多个面板，可以设置默认展开第几个。

面板一标题
面板二标题
面板三标题
<template>
  <div>
    <b-collapse v-model="value">
      <b-collapse-panel title="面板一标题" name="1">
        <p v-for="i in 3" :key="i">我是内容我是内容...</p>
      </b-collapse-panel>
      <b-collapse-panel title="面板二标题" name="2">
        <p v-for="i in 3" :key="i">我是内容我是内容...</p>
      </b-collapse-panel>
      <b-collapse-panel title="面板三标题" name="3">
        <p v-for="i in 3" :key="i">我是内容我是内容...</p>
      </b-collapse-panel>
    </b-collapse>
  </div>
</template>

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

const value = ref('')
</script>
<template>
  <div>
    <b-collapse v-model="value">
      <b-collapse-panel title="面板一标题" name="1">
        <p v-for="i in 3" :key="i">我是内容我是内容...</p>
      </b-collapse-panel>
      <b-collapse-panel title="面板二标题" name="2">
        <p v-for="i in 3" :key="i">我是内容我是内容...</p>
      </b-collapse-panel>
      <b-collapse-panel title="面板三标题" name="3">
        <p v-for="i in 3" :key="i">我是内容我是内容...</p>
      </b-collapse-panel>
    </b-collapse>
  </div>
</template>

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

const value = ref('')
</script>

手风琴模式 ​

设置 accordion 手风琴模式默认只能开启一个

面板一标题
面板二标题
面板三标题
<template>
  <div>
    <b-collapse v-model="value" accordion>
      <b-collapse-panel title="面板一标题" name="1">
        <p v-for="i in 3" :key="i">我是内容我是内容...</p>
      </b-collapse-panel>
      <b-collapse-panel title="面板二标题" name="2">
        <p v-for="i in 3" :key="i">我是内容我是内容...</p>
      </b-collapse-panel>
      <b-collapse-panel title="面板三标题" name="3">
        <p v-for="i in 3" :key="i">我是内容我是内容...</p>
      </b-collapse-panel>
    </b-collapse>
  </div>
</template>

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

const value = ref('')
</script>
<template>
  <div>
    <b-collapse v-model="value" accordion>
      <b-collapse-panel title="面板一标题" name="1">
        <p v-for="i in 3" :key="i">我是内容我是内容...</p>
      </b-collapse-panel>
      <b-collapse-panel title="面板二标题" name="2">
        <p v-for="i in 3" :key="i">我是内容我是内容...</p>
      </b-collapse-panel>
      <b-collapse-panel title="面板三标题" name="3">
        <p v-for="i in 3" :key="i">我是内容我是内容...</p>
      </b-collapse-panel>
    </b-collapse>
  </div>
</template>

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

const value = ref('')
</script>

简单模式和自定义头 ​

simple 设置简单模式，也可以通过 插槽自定义头部

面板一标题
面板二标题
面板三标题
<template>
  <div>
    <b-collapse v-model="value" simple>
      <b-collapse-panel title="面板一标题" name="1">
        <template #title>
          面板一标题
          <b-icon name="smile" size="18"></b-icon>
        </template>
        <p v-for="i in 3" :key="i">我是内容我是内容...</p>
      </b-collapse-panel>
      <b-collapse-panel title="面板二标题" name="2">
        <p v-for="i in 3" :key="i">我是内容我是内容...</p>
      </b-collapse-panel>
      <b-collapse-panel title="面板三标题" name="3">
        <p v-for="i in 3" :key="i">我是内容我是内容...</p>
      </b-collapse-panel>
    </b-collapse>
  </div>
</template>

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

const value = ref('')
</script>
<template>
  <div>
    <b-collapse v-model="value" simple>
      <b-collapse-panel title="面板一标题" name="1">
        <template #title>
          面板一标题
          <b-icon name="smile" size="18"></b-icon>
        </template>
        <p v-for="i in 3" :key="i">我是内容我是内容...</p>
      </b-collapse-panel>
      <b-collapse-panel title="面板二标题" name="2">
        <p v-for="i in 3" :key="i">我是内容我是内容...</p>
      </b-collapse-panel>
      <b-collapse-panel title="面板三标题" name="3">
        <p v-for="i in 3" :key="i">我是内容我是内容...</p>
      </b-collapse-panel>
    </b-collapse>
  </div>
</template>

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

const value = ref('')
</script>

容器组件 ​

使用 b-collapse-wrap 组件可以单独使用独立的折叠面板

标题栏

我是内容我是内容...

我是内容我是内容...

我是内容我是内容...

收起附加右侧操作

我是内容我是内容...

我是内容我是内容...

我是内容我是内容...

自定义开关和标题
自定义label标题

我是内容我是内容...

我是内容我是内容...

我是内容我是内容...

<template>
  <div>
    <b-collapse-wrap title="标题栏" collapse>
      <div class="p5">
        <p v-for="i in 3" :key="i">我是内容我是内容...</p>
      </div>
    </b-collapse-wrap>
    <b-collapse-wrap title="收起附加右侧操作" collapse>
      <template #right>
        <b-button type="primary" plain size="small">编辑</b-button>
      </template>
      <div class="p5">
        <p v-for="i in 3" :key="i">我是内容我是内容...</p>
      </div>
    </b-collapse-wrap>
    <b-collapse-wrap v-model="value" shadow="none">
      <template #title>
        <div style="font-size: 16px; padding: 10px">自定义开关和标题</div>
      </template>
      <template #right>
        <b-button type="text" @click="value = !value">{{ value ? '收起' : '展开' }}</b-button>
      </template>
      <div class="p5">
        <p v-for="i in 3" :key="i">我是内容我是内容...</p>
      </div>
    </b-collapse-wrap>
    <b-collapse-wrap title="标题栏" collapse shadow="none" arrow-icon="caret-down">
      <template #title><span class="title">自定义label标题</span></template>
      <div class="p5">
        <p v-for="i in 3" :key="i">我是内容我是内容...</p>
      </div>
    </b-collapse-wrap>
  </div>
</template>

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

const value = ref(false)
</script>
<template>
  <div>
    <b-collapse-wrap title="标题栏" collapse>
      <div class="p5">
        <p v-for="i in 3" :key="i">我是内容我是内容...</p>
      </div>
    </b-collapse-wrap>
    <b-collapse-wrap title="收起附加右侧操作" collapse>
      <template #right>
        <b-button type="primary" plain size="small">编辑</b-button>
      </template>
      <div class="p5">
        <p v-for="i in 3" :key="i">我是内容我是内容...</p>
      </div>
    </b-collapse-wrap>
    <b-collapse-wrap v-model="value" shadow="none">
      <template #title>
        <div style="font-size: 16px; padding: 10px">自定义开关和标题</div>
      </template>
      <template #right>
        <b-button type="text" @click="value = !value">{{ value ? '收起' : '展开' }}</b-button>
      </template>
      <div class="p5">
        <p v-for="i in 3" :key="i">我是内容我是内容...</p>
      </div>
    </b-collapse-wrap>
    <b-collapse-wrap title="标题栏" collapse shadow="none" arrow-icon="caret-down">
      <template #title><span class="title">自定义label标题</span></template>
      <div class="p5">
        <p v-for="i in 3" :key="i">我是内容我是内容...</p>
      </div>
    </b-collapse-wrap>
  </div>
</template>

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

const value = ref(false)
</script>

Props ​

参数说明类型可选值默认值
modelValue当前激活的面板的 name，可以使用 v-model 双向绑定Array/String——
accordion是否开启手风琴模式，开启后每次至多展开一个面板Boolean—false
simple是否开启简洁模式Boolean—false

Events ​

事件名说明返回值
change切换面板时触发，返回当前已展开的面板的 key，格式为数组array[]

Slot ​

名称说明
title面板头内容

CollapseWrap Props ​

参数说明类型可选值默认值
value是否展开boolean—true
title标题string——
collapse是否可以展开收起boolean—false
shadowshadow，设置为none可以开启简单模式stringnone/自定义shadow—

CollapseWrap Slot ​

名称说明
title面板头内容
right右侧插入内容区域

MIT Licensed | Copyright © 2023-present bin-ui-design