Sard Uniapp

Appearance

在新窗口打开⤴

Accordion手风琴

介绍 ​

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

引入 ​

js
import Accordion from 'sard-uniapp/components/accordion/accordion.vue'
import AccordionItem from 'sard-uniapp/components/accordion-item/accordion-item.vue'

代码演示 ​

基础使用 ​

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

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

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

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

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

展开多个 ​

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

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

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

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

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

禁用 ​

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

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

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

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

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

隐藏边框 1.22+ ​

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

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

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

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

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

插槽 1.28+ ​

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

vue
<template>
  <sar-accordion v-model="value">
    <sar-accordion-item name="1" extra="额外内容">
      <template #title>
        <view style="color: var(--sar-primary)">
          <sar-icon name="pencil-square" />
          <text class="ml-10">标题1</text>
        </view>
      </template>
      内容1
    </sar-accordion-item>
    <sar-accordion-item title="标题2" name="2">
      <template #extra>
        <view style="color: var(--sar-primary)">
          <text class="mr-10">额外内容</text>
          <sar-icon name="question-circle-fill" />
        </view>
      </template>
      内容2
    </sar-accordion-item>
    <sar-accordion-item title="标题3" name="3">
      <template #arrow="{ visible }">
        <sar-icon :name="visible ? 'double-up' : 'double-down'" />
      </template>
      内容3
    </sar-accordion-item>
  </sar-accordion>
</template>

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

const value = ref('1')
</script>
vue
<template>
  <sar-accordion v-model="value">
    <sar-accordion-item name="1" extra="额外内容">
      <template #title>
        <view style="color: var(--sar-primary)">
          <sar-icon name="pencil-square" />
          <text class="ml-10">标题1</text>
        </view>
      </template>
      内容1
    </sar-accordion-item>
    <sar-accordion-item title="标题2" name="2">
      <template #extra>
        <view style="color: var(--sar-primary)">
          <text class="mr-10">额外内容</text>
          <sar-icon name="question-circle-fill" />
        </view>
      </template>
      内容2
    </sar-accordion-item>
    <sar-accordion-item title="标题3" name="3">
      <template #arrow="{ visible }">
        <sar-icon :name="visible ? 'double-up' : 'double-down'" />
      </template>
      内容3
    </sar-accordion-item>
  </sar-accordion>
</template>

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

API ​

AccordionProps ​

属性描述类型默认值
root-class组件根元素类名string-
root-style组件根元素样式StyleValue-
model-value当前展开面板的 namestring | number | (string | number)[]-
multiple是否可同时展开多个面板booleanfalse
hide-border 1.22+是否隐藏边框booleanfalse

AccordionSlots ​

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

AccordionEmits ​

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

AccordionItemProps ​

属性描述类型默认值
root-class组件根元素类名string-
root-style组件根元素样式StyleValue-
title面板标题string-
extra 1.28+面板右边的内容string-
value (同extra，建议使用 extra)面板右边的内容string-
name面板的唯一标识string | number-
disabled禁用面板booleanfalse

AccordionItemSlots ​

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

AccordionItemEmits ​

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

主题定制 ​

CSS 变量 ​

scss
page,
.sar-portal {
  --sar-accordion-bg: var(--sar-emphasis-bg);
  --sar-accordion-active-bg: var(--sar-active-bg);
  --sar-accordion-border-color: var(--sar-border-color);

  --sar-accordion-item-header-padding-x: 32rpx;
  --sar-accordion-item-header-padding-y: 20rpx;

  --sar-accordion-item-title-font-size: var(--sar-text-base);
  --sar-accordion-item-title-line-height: var(--sar-leading-snug);

  --sar-accordion-item-arrow-margin-left: 16rpx;
  --sar-accordion-item-arrow-font-size: var(--sar-text-base);
  --sar-accordion-item-arrow-color: var(--sar-tertiary-color);

  --sar-accordion-item-body-padding-x: 32rpx;
  --sar-accordion-item-body-padding-y: 32rpx;
}

Released under the MIT License.

Copyright © 2023-present wuzhitao