Sard

Appearance

100%
在新窗口打开⤴

Accordion手风琴

介绍 ​

通过折叠收纳内容，允许同时展开一个或多个。

代码演示 ​

基础使用 ​

为手风琴每一个面板添加一个 name 属性，使用 v-model 绑定展开的面板。

vue
<template>
  <s-accordion v-model="value">
    <s-accordion-item title="标题1" name="1" extra="额外内容">内容1</s-accordion-item>
    <s-accordion-item title="标题2" name="2">内容2</s-accordion-item>
    <s-accordion-item title="标题3" name="3">内容3</s-accordion-item>
  </s-accordion>
</template>

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

const value = ref('1')
</script>
vue
<template>
  <s-accordion v-model="value">
    <s-accordion-item title="标题1" name="1" extra="额外内容">内容1</s-accordion-item>
    <s-accordion-item title="标题2" name="2">内容2</s-accordion-item>
    <s-accordion-item title="标题3" name="3">内容3</s-accordion-item>
  </s-accordion>
</template>

<script setup lang="js">
import { ref } from 'vue'
const value = ref('1')
</script>

展开多个 ​

设置 multiple 属性可以同时展开多个面板，此时 v-model 要绑定一个数组。

vue
<template>
  <s-accordion v-model="value" multiple>
    <s-accordion-item title="标题1" name="1">内容1</s-accordion-item>
    <s-accordion-item title="标题2" name="2">内容2</s-accordion-item>
    <s-accordion-item title="标题3" name="3">内容3</s-accordion-item>
  </s-accordion>
</template>

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

const value = ref(['1'])
</script>
vue
<template>
  <s-accordion v-model="value" multiple>
    <s-accordion-item title="标题1" name="1">内容1</s-accordion-item>
    <s-accordion-item title="标题2" name="2">内容2</s-accordion-item>
    <s-accordion-item title="标题3" name="3">内容3</s-accordion-item>
  </s-accordion>
</template>

<script setup lang="js">
import { ref } from 'vue'
const value = ref(['1'])
</script>

禁用 ​

使用 disabled 属性可以禁用指定单个面板。

vue
<template>
  <s-accordion v-model="value">
    <s-accordion-item title="标题1" name="1">内容1</s-accordion-item>
    <s-accordion-item title="标题2" name="2" disabled>内容2</s-accordion-item>
    <s-accordion-item title="标题3" name="3">内容3</s-accordion-item>
  </s-accordion>
</template>

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

const value = ref('1')
</script>
vue
<template>
  <s-accordion v-model="value">
    <s-accordion-item title="标题1" name="1">内容1</s-accordion-item>
    <s-accordion-item title="标题2" name="2" disabled>内容2</s-accordion-item>
    <s-accordion-item title="标题3" name="3">内容3</s-accordion-item>
  </s-accordion>
</template>

<script setup lang="js">
import { ref } from 'vue'
const value = ref('1')
</script>

隐藏边框 ​

可以使用 hide-border 属性隐藏边框。

vue
<template>
  <s-accordion v-model="value" hide-border>
    <s-accordion-item title="标题1" name="1">内容1</s-accordion-item>
    <s-accordion-item title="标题2" name="2">内容2</s-accordion-item>
    <s-accordion-item title="标题3" name="3">内容3</s-accordion-item>
  </s-accordion>
</template>

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

const value = ref('1')
</script>
vue
<template>
  <s-accordion v-model="value" hide-border>
    <s-accordion-item title="标题1" name="1">内容1</s-accordion-item>
    <s-accordion-item title="标题2" name="2">内容2</s-accordion-item>
    <s-accordion-item title="标题3" name="3">内容3</s-accordion-item>
  </s-accordion>
</template>

<script setup lang="js">
import { ref } from 'vue'
const value = ref('1')
</script>

插槽 ​

可以使用 title, extra, arrow 插槽来自定义内容。

vue
<template>
  <s-accordion v-model="value">
    <s-accordion-item name="1" extra="额外内容">
      <template #title>
        <div class="flex items-center text-(--s-color-primary)">
          <PencilSquare />
          <span class="ms-2">标题1</span>
        </div>
      </template>
      内容1
    </s-accordion-item>
    <s-accordion-item title="标题2" name="2">
      <template #extra>
        <div class="flex items-center text-(--s-color-primary)">
          <span class="me-2">额外内容</span>
          <QuestionCircleFill />
        </div>
      </template>
      内容2
    </s-accordion-item>
    <s-accordion-item title="标题3" name="3">
      <template #arrow="{ visible }">
        <DoubleUp v-if="visible" />
        <DoubleDown v-else />
      </template>
      内容3
    </s-accordion-item>
  </s-accordion>
</template>

<script setup lang="ts">
import { DoubleDown, DoubleUp, PencilSquare, QuestionCircleFill } from '@sard/icons'
import { ref } from 'vue'

const value = ref('1')
</script>
vue
<template>
  <s-accordion v-model="value">
    <s-accordion-item name="1" extra="额外内容">
      <template #title>
        <div class="flex items-center text-(--s-color-primary)">
          <PencilSquare />
          <span class="ms-2">标题1</span>
        </div>
      </template>
      内容1
    </s-accordion-item>
    <s-accordion-item title="标题2" name="2">
      <template #extra>
        <div class="flex items-center text-(--s-color-primary)">
          <span class="me-2">额外内容</span>
          <QuestionCircleFill />
        </div>
      </template>
      内容2
    </s-accordion-item>
    <s-accordion-item title="标题3" name="3">
      <template #arrow="{ visible }">
        <DoubleUp v-if="visible" />
        <DoubleDown v-else />
      </template>
      内容3
    </s-accordion-item>
  </s-accordion>
</template>

<script setup lang="js">
import { DoubleDown, DoubleUp, PencilSquare, QuestionCircleFill } from '@sard/icons'
import { ref } from 'vue'
const value = ref('1')
</script>

API ​

AccordionProps ​

属性描述类型默认值
model-value当前展开面板的 namestring | number | (string | number)[]-
multiple是否可同时展开多个面板booleanfalse
hide-border是否隐藏边框booleanfalse

AccordionSlots ​

插槽描述属性
default自定义默认内容-

AccordionEmits ​

事件描述类型
update:modelValue切换面板时触发(value: string | number | (string | number)[]) => void

AccordionItemProps ​

属性描述类型默认值
title面板标题string-
extra面板右边的内容string-
name面板的唯一标识string | number-
disabled禁用面板booleanfalse

AccordionItemSlots ​

插槽描述属性
default自定义默认内容-
title自定义标题内容-
extra自定义值内容内容-
arrow自定义箭头{ visible: boolean }

AccordionItemEmits ​

事件描述类型
click点击面板头部时触发(event: MouseEvent) => void

主题定制 ​

样式变量 ​

CSS 变量值
--s-accordion-bgvar(--s-bg-color-container)
--s-accordion-bg-activevar(--s-bg-color-active)
--s-accordion-border-colorvar(--s-border-color)
--s-accordion-item-header-padding-xvar(--s-size)
--s-accordion-item-header-padding-yvar(--s-size-sm)
--s-accordion-item-title-font-sizevar(--s-font-size)
--s-accordion-item-body-padding-xvar(--s-size)
--s-accordion-item-body-padding-yvar(--s-size)

Released under the MIT License.

Copyright © 2023-present wuzhitao