Lzh on GitHub

Collapsible

展开/折叠面板的交互式组件。
<script setup lang="ts">
import { Icon } from '@iconify/vue'
import { CollapsibleContent, CollapsibleRoot, CollapsibleTrigger } from 'reka-ui'
import { ref } from 'vue'

const open = ref(false)
</script>

<template>
  <CollapsibleRoot
    v-model:open="open"
    class="w-[300px] text-sm"
  >
    <div style="display: flex; align-items: center; justify-content: space-between">
      <span class="dark:text-white text-stone-800 font-medium leading-[25px]"> @zernonia starred 3 repos </span>
      <CollapsibleTrigger
        class="cursor-default rounded-full h-[25px] w-[25px] inline-flex items-center justify-center text-grass11 border outline-none data-[state=closed]:bg-white data-[state=open]:bg-green3 hover:bg-green3 focus:shadow-[0_0_0_2px] focus:shadow-black"
      >
        <Icon
          v-if="open"
          icon="radix-icons:cross-2"
          class="h-3.5 w-3.5"
        />
        <Icon
          v-else
          icon="radix-icons:row-spacing"
          class="h-3.5 w-3.5"
        />
      </CollapsibleTrigger>
    </div>

    <div class="bg-white rounded-lg mt-[10px] p-[10px] border">
      <span class="text-grass11 leading-[25px]">@unovue/reka-ui</span>
    </div>

    <CollapsibleContent class="data-[state=open]:animate-slideDown data-[state=closed]:animate-slideUp overflow-hidden">
      <div class="bg-white rounded-lg my-[10px] p-[10px] border">
        <span class="text-grass11 leading-[25px]">@vuejs/core</span>
      </div>
      <div class="bg-white rounded-lg my-[10px] p-[10px] border">
        <span class="text-grass11 leading-[25px]">@unovue/primitives</span>
      </div>
    </CollapsibleContent>
  </CollapsibleRoot>
</template>

功能特点

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

安装

从命令行安装组件。

$ npm add reka-ui

结构

导入组件并将各部分组合在一起。

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

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

API 参考

Root

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

属性默认值类型描述
as'div'AsTag | Component此组件应渲染为的元素或组件。可以通过 asChild 覆盖。
asChildfalseboolean将默认渲染的元素更改为作为子元素传递的元素，合并它们的 props 和行为。有关详细信息，请阅读我们的组合指南。
defaultOpenfalseboolean组件首次渲染时的打开状态。当您不需要控制其打开状态时使用。
disabledboolean当为 true 时，阻止用户与可折叠组件交互。
openboolean可折叠组件的受控打开状态。可与 v-model 绑定。
unmountOnHidetrueboolean当为 true 时，元素在关闭状态下将被卸载。

触发事件 (Emit)

事件名称Payload描述
update:open[value: boolean]可折叠组件打开状态改变时调用的事件处理程序。

默认插槽

插槽参数插槽参数类型描述
openboolean当前打开状态

数据属性

属性值
[data-state]"open" | "closed"
[data-disabled]禁用时存在

Trigger

切换可折叠组件的按钮。

属性默认值类型描述
as'button'AsTag | Component此组件应渲染为的元素或组件。可以通过 asChild 覆盖。
asChildfalseboolean将默认渲染的元素更改为作为子元素传递的元素，合并它们的 props 和行为。有关详细信息，请阅读我们的组合指南。

数据属性

属性值
[data-state]"open" | "closed"
[data-disabled]禁用时存在

Content

包含可折叠内容的组件。

使用 Presence 组件构建 - 支持任何动画技术，同时保持对存在（presence）触发事件的访问。
属性默认值类型描述
as'div'AsTag | Component此组件应渲染为的元素或组件。可以通过 asChild 覆盖。
asChildfalseboolean将默认渲染的元素更改为作为子元素传递的元素，合并它们的 props 和行为。有关详细信息，请阅读我们的组合指南。
forceMountboolean当需要更多控制时，用于强制挂载。在与 Vue 动画库控制动画时很有用。

触发事件 (Emit)

事件Payload
contentFound[(void)?]

数据属性

属性值
[data-state]"open" | "closed"
[data-disabled]禁用时存在

CSS 变量

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

示例

动画内容大小

使用 --reka-collapsible-content-width 和/或 --reka-collapsible-content-height CSS 变量来动画内容打开/关闭时的大小。这是一个演示：

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

<template>
  <CollapsibleRoot>
    <CollapsibleTrigger>…</CollapsibleTrigger>
    <CollapsibleContent class="CollapsibleContent">
      …
    </CollapsibleContent>
  </CollapsibleRoot>
</template>
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" 以使内容始终可用。

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

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

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

可访问性

遵循 Disclosure WAI-ARIA 设计模式。

键盘交互

按键描述
Space打开/关闭可折叠组件
Enter打开/关闭可折叠组件