手风琴

一组垂直堆叠的交互式标题，每个标题都可展开显示相关内容部分。

查看代码

是的。它遵循 WAI-ARIA 设计模式。

特性

完整的键盘导航。
支持水平/垂直方向。
支持从右到左方向。
可以展开一个或多个项目。
可以受控或不受控。

安装

从命令行安装此组件。

$ npm add reka-ui

结构

导入所有部分并将其组合。

vue

<script setup>
import { AccordionContent, AccordionHeader, AccordionItem, AccordionRoot, AccordionTrigger } from 'reka-ui'
</script>

<template>
  <AccordionRoot>
    <AccordionItem>
      <AccordionHeader>
        <AccordionTrigger />
      </AccordionHeader>
      <AccordionContent />
    </AccordionItem>
  </AccordionRoot>
</template>

API 参考

根

包含手风琴的所有部分

属性	默认	类型
`as`	`'div'`	`AsTag \| Component` 此组件应渲染为的元素或组件。可通过 `asChild` 覆盖。
`asChild`		`布尔值` 更改默认渲染元素为作为子项传递的元素，合并它们的属性和行为。阅读我们的组合指南了解更多详情。
`collapsible`	`false`	`布尔值` 当类型为“single”时，允许在点击已打开项的触发器时关闭内容。当类型为“multiple”时，此属性无效。
`defaultValue`		`string \| string[]` 项的默认活动值。当您不需要控制项的状态时使用。
`dir`		`'ltr' \| 'rtl'` 手风琴的阅读方向（如果适用）。如果省略，则假定为 LTR（从左到右）阅读模式。
`disabled`	`false`	`布尔值` 当 `true` 时，阻止用户与手风琴及其所有项进行交互
`modelValue`		`string \| string[]` 活动项的受控值。当您需要控制项的状态时使用此项。可以通过 `v-model` 进行绑定
`orientation`	`'vertical'`	`'vertical' \| 'horizontal'` 手风琴的方向。
`type`		`'single' \| 'multiple'` 确定一次可以选择“单个”或“多个”项。此属性将覆盖从 `modelValue` 和 `defaultValue` 推断的类型。
`unmountOnHide`	`true`	`布尔值` 当 `true` 时，元素在关闭状态时将被卸载。

事件触发	载荷
`update:modelValue`	`[value: string \| string[]]` 当项的展开状态发生变化时调用的事件处理程序

插槽（默认）	载荷
`modelValue`	`AcceptableValue \| AcceptableValue[] \| undefined` 当前活动值

数据属性	值
`[data-orientation]`	`"垂直" \| "水平"`

项

包含可折叠部分的所有部分。

属性	默认	类型
`as`	`'div'`	`AsTag \| Component` 此组件应渲染为的元素或组件。可通过 `asChild` 覆盖。
`asChild`		`布尔值` 更改默认渲染元素为作为子项传递的元素，合并它们的属性和行为。阅读我们的组合指南了解更多详情。
`disabled`		`布尔值` 手风琴项是否禁用用户交互。当为 `true` 时，阻止用户与该项进行交互。
`unmountOnHide`		`布尔值` 当 `true` 时，元素在关闭状态时将被卸载。
`值*`		`string` 手风琴项的字符串值。手风琴内的所有项都应使用唯一值。

插槽（默认）	载荷
`open`	`布尔值` 当前打开状态

数据属性	值
`[data-state]`	`"打开" \| "关闭"`
`[data-disabled]`	禁用时存在
`[data-orientation]`	`"垂直" \| "水平"`

包装一个 AccordionTrigger。使用 asChild 属性将其更新为页面上适当的标题级别。

属性	默认	类型
`as`	`'h3'`	`AsTag \| Component` 此组件应渲染为的元素或组件。可通过 `asChild` 覆盖。
`asChild`		`布尔值` 更改默认渲染元素为作为子项传递的元素，合并它们的属性和行为。阅读我们的组合指南了解更多详情。

数据属性	值
`[data-state]`	`"打开" \| "关闭"`
`[data-disabled]`	禁用时存在
`[data-orientation]`	`"垂直" \| "水平"`

触发器

切换其关联项的折叠状态。它应该嵌套在 AccordionHeader 内部。

属性	默认	类型
`as`	`'div'`	`AsTag \| Component` 此组件应渲染为的元素或组件。可通过 `asChild` 覆盖。
`asChild`		`布尔值` 更改默认渲染元素为作为子项传递的元素，合并它们的属性和行为。阅读我们的组合指南了解更多详情。

数据属性	值
`[data-state]`	`"打开" \| "关闭"`
`[data-disabled]`	禁用时存在
`[data-orientation]`	`"垂直" \| "水平"`

内容

包含项的可折叠内容。

属性	默认	类型
`as`	`'div'`	`AsTag \| Component` 此组件应渲染为的元素或组件。可通过 `asChild` 覆盖。
`asChild`		`布尔值` 更改默认渲染元素为作为子项传递的元素，合并它们的属性和行为。阅读我们的组合指南了解更多详情。
`forceMount`		`布尔值` 当需要更多控制时，用于强制挂载。在与 Vue 动画库控制动画时很有用。

数据属性	值
`[data-state]`	`"打开" \| "关闭"`
`[data-disabled]`	禁用时存在
`[data-orientation]`	`"垂直" \| "水平"`

CSS 变量	描述
`--reka-accordion-content-width`	内容打开/关闭时的宽度
`--reka-accordion-content-height`	内容打开/关闭时的高度

示例

默认展开

使用 defaultValue 属性默认定义打开的项。

vue

<template>
  <AccordionRoot
    type="single"
    default-value="item-2"
  >
    <AccordionItem value="item-1">
      …
    </AccordionItem>
    <AccordionItem value="item-2">
      …
    </AccordionItem>
  </AccordionRoot>
</template>

允许折叠所有项

使用 collapsible 属性允许所有项关闭。

vue

<template>
  <AccordionRoot
    type="single"
    collapsible
  >
    <AccordionItem value="item-1">
      …
    </AccordionItem>
    <AccordionItem value="item-2">
      …
    </AccordionItem>
  </AccordionRoot>
</template>

同时打开多个项

将 type 属性设置为 multiple 以允许同时打开多个项。

vue

<template>
  <AccordionRoot type="multiple">
    <AccordionItem value="item-1">
      …
    </AccordionItem>
    <AccordionItem value="item-2">
      …
    </AccordionItem>
  </AccordionRoot>
</template>

打开时图标旋转

您可以添加额外的装饰元素，例如V形箭头，并在项目打开时旋转它。

vue

// index.vue
<script setup>
import { Icon } from '@iconify/vue'
import { AccordionContent, AccordionHeader, AccordionItem, AccordionRoot, AccordionTrigger } from 'reka-ui'
import './styles.css'
</script>

<template>
  <AccordionRoot type="single">
    <AccordionItem value="item-1">
      <AccordionHeader>
        <AccordionTrigger class="AccordionTrigger">
          <span>Trigger text</span>
          <Icon
            icon="radix-icons:chevron-down"
            class="AccordionChevron"
          />
        </AccordionTrigger>
      </AccordionHeader>
      <AccordionContent>…</AccordionContent>
    </AccordionItem>
  </AccordionRoot>
</template>

css

/* styles.css */
.AccordionChevron {
  transition: transform 300ms;
}
.AccordionTrigger[data-state="open"] > .AccordionChevron {
  transform: rotate(180deg);
}

水平方向

使用 orientation 属性创建水平手风琴

vue

<template>
  <AccordionRoot orientation="horizontal">
    <AccordionItem value="item-1">
      …
    </AccordionItem>
    <AccordionItem value="item-2">
      …
    </AccordionItem>
  </AccordionRoot>
</template>

内容大小动画

使用 --reka-accordion-content-width 和/或 --reka-accordion-content-height CSS 变量来动画化内容打开/关闭时的大小

vue

// index.vue
<script setup>
import { AccordionContent, AccordionHeader, AccordionItem, AccordionRoot, AccordionTrigger } from 'reka-ui'
import './styles.css'
</script>

<template>
  <AccordionRoot type="single">
    <AccordionItem value="item-1">
      <AccordionHeader>…</AccordionHeader>
      <AccordionContent class="AccordionContent">
        …
      </AccordionContent>
    </AccordionItem>
  </AccordionRoot>
</template>

css

/* styles.css */
.AccordionContent {
  overflow: hidden;
}
.AccordionContent[data-state="open"] {
  animation: slideDown 300ms ease-out;
}
.AccordionContent[data-state="closed"] {
  animation: slideUp 300ms ease-out;
}

@keyframes slideDown {
  from {
    height: 0;
  }
  to {
    height: var(--reka-accordion-content-height);
  }
}

@keyframes slideUp {
  from {
    height: var(--reka-accordion-content-height);
  }
  to {
    height: 0;
  }
}

即使关闭也渲染内容

默认情况下，隐藏内容将被移除，使用 :unmountOnHide="false" 以保持内容始终可用。

这也将允许浏览器搜索隐藏文本，并打开手风琴。

vue

<template>
  <AccordionRoot :unmount-on-hide="false">
    <AccordionItem value="item-1">
      …
    </AccordionItem>
    <AccordionItem value="item-2">
      …
    </AccordionItem>
  </AccordionRoot>
</template>

无障碍性

遵循手风琴 WAI-ARIA 设计模式。

键盘交互

键	描述
`空格键`	当焦点位于折叠部分的 `AccordionTrigger` 上时，展开该部分。
`回车键`	当焦点位于折叠部分的 `AccordionTrigger` 上时，展开该部分。
`Tab`	将焦点移动到下一个可聚焦元素。
`Shift + Tab`	将焦点移至上一个可聚焦元素。
`向下箭头键`	当 `orientation` 为 `vertical` 时，将焦点移动到下一个 `AccordionTrigger`。
`向上箭头键`	当 `orientation` 为 `vertical` 时，将焦点移动到上一个 `AccordionTrigger`。
`向右箭头`	当 `orientation` 为 `horizontal` 时，将焦点移动到下一个 `AccordionTrigger`。
`向左箭头`	当 `orientation` 为 `horizontal` 时，将焦点移动到上一个 `AccordionTrigger`。
`Home`	当焦点位于 `AccordionTrigger` 上时，将焦点移动到起始 `AccordionTrigger`。
`End`	当焦点位于 `AccordionTrigger` 上时，将焦点移动到最后一个 `AccordionTrigger`。

手风琴 ​

它无障碍吗？

它是无样式的吗？

它可以动画化吗？

特性 ​

安装 ​

结构 ​

API 参考 ​

根 ​

项 ​

标题 ​

触发器 ​

内容 ​

示例 ​

默认展开 ​

允许折叠所有项 ​

同时打开多个项 ​

打开时图标旋转 ​

水平方向 ​

内容大小动画 ​

即使关闭也渲染内容 ​

无障碍性 ​

键盘交互 ​

手风琴

特性

安装

结构