Reka UI logoReka
backdrop
示例
组件

可折叠

一个可展开/折叠面板的交互式组件。
@zernonia 点赞了 3 个仓库
@unovue/reka-ui

特性

  • 完整的键盘导航。
  • 可受控或非受控。

安装

从命令行安装此组件。

sh
$ npm add reka-ui

结构

导入组件并将其组合在一起。

vue
<script setup>
import { CollapsibleContent, CollapsibleRoot, CollapsibleTrigger } from 'reka-ui'
</script>

<template>
  <CollapsibleRoot>
    <CollapsibleTrigger />
    <CollapsibleContent />
  </CollapsibleRoot>
</template>

API 参考

根

包含可折叠组件的所有部分

属性默认类型
as
'div'
AsTag | Component

此组件应渲染为的元素或组件。可通过 asChild 覆盖。

asChild
布尔值

更改默认渲染元素为作为子项传递的元素，合并它们的属性和行为。

阅读我们的 组合指南了解更多详情。

defaultOpen
false
布尔值

可折叠组件初次渲染时的展开状态。
当您不需要控制其展开状态时使用。

disabled
布尔值

当 true 时，防止用户与可折叠组件交互。

open
布尔值

可折叠组件的受控展开状态。可与 v-model 绑定。

unmountOnHide
true
布尔值

当 true 时，元素在关闭状态时将被卸载。

事件触发载荷
update:open
[value: boolean]

当可折叠组件的展开状态改变时调用的事件处理函数。

插槽（默认）载荷
open
布尔值

当前打开状态

数据属性值
[data-state]"打开" | "关闭"
[data-disabled]禁用时存在

触发器

切换可折叠组件的按钮

属性默认类型
as
'button'
AsTag | Component

此组件应渲染为的元素或组件。可通过 asChild 覆盖。

asChild
布尔值

更改默认渲染元素为作为子项传递的元素，合并它们的属性和行为。

阅读我们的 组合指南了解更多详情。

数据属性值
[data-state]"打开" | "关闭"
[data-disabled]禁用时存在

内容

包含可折叠内容的组件。

提示
使用 Presence 组件构建 - 支持任何 动画技术，同时保持对 Presence 发出事件的访问。
属性默认类型
as
'div'
AsTag | Component

此组件应渲染为的元素或组件。可通过 asChild 覆盖。

asChild
布尔值

更改默认渲染元素为作为子项传递的元素，合并它们的属性和行为。

阅读我们的 组合指南了解更多详情。

forceMount
布尔值

当需要更多控制时，用于强制挂载。在与 Vue 动画库控制动画时很有用。

事件触发载荷
contentFound
[(void)?]
数据属性值
[data-state]"打开" | "关闭"
[data-disabled]禁用时存在
CSS 变量描述
--reka-collapsible-content-width
内容展开/折叠时的宽度
--reka-collapsible-content-height
内容展开/折叠时的高度

示例

动画内容大小

使用 --reka-collapsible-content-width 和/或 --reka-collapsible-content-height CSS 变量来为内容展开/折叠时的尺寸添加动画效果。这是一个演示

vue
// index.vue
<script setup>
import { CollapsibleContent, CollapsibleRoot, CollapsibleTrigger } from 'reka-ui'
import './styles.css'
</script>

<template>
  <CollapsibleRoot>
    <CollapsibleTrigger>…</CollapsibleTrigger>
    <CollapsibleContent class="CollapsibleContent">
      …
    </CollapsibleContent>
  </CollapsibleRoot>
</template>
css
/* styles.css */
.CollapsibleContent {
  overflow: hidden;
}
.CollapsibleContent[data-state="open"] {
  animation: slideDown 300ms ease-out;
}
.CollapsibleContent[data-state="closed"] {
  animation: slideUp 300ms ease-out;
}

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

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

即使折叠也渲染内容

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

这也将允许浏览器搜索隐藏文本，并打开可折叠组件。

vue
<script setup>
import { CollapsibleContent, CollapsibleRoot, CollapsibleTrigger } from 'reka-ui'
</script>

<template>
  <CollapsibleRoot :unmount-on-hide="false">
    …
  </CollapsibleRoot>
</template>

可访问性

遵循 Disclosure WAI-ARIA 设计模式。

键盘交互

键描述
空格键
打开/关闭可折叠组件
回车键
打开/关闭可折叠组件