可折叠面板

一种可展开/折叠面板的交互式组件。

View code

@zernonia starred 3 repos

@unovue/reka-ui

功能特性

完整的键盘导航支持
支持受控与非受控模式

安装

通过命令行安装该组件。

$ npm add reka-ui

结构构成

导入组件并组合各部分。

vue

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

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

API 参考

Root

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

Prop	Default	Type
`as`	`'div'`	`AsTag \| Component` The element or component this component should render as. Can be overwritten by `asChild`.
`asChild`		`boolean` Change the default rendered element for the one passed as a child, merging their props and behavior. Read our Composition guide for more details.
`defaultOpen`	`false`	`boolean` The open state of the collapsible when it is initially rendered. Use when you do not need to control its open state.
`disabled`		`boolean` When `true`, prevents the user from interacting with the collapsible.
`open`		`boolean` The controlled open state of the collapsible. Can be binded with `v-model`.
`unmountOnHide`	`true`	`boolean` When `true`, the element will be unmounted on closed state.

Emit	Payload
`update:open`	`[value: boolean]` Event handler called when the open state of the collapsible changes.

Slots (default)	Payload
`open`	`boolean` Current open state

Data Attribute	Value
`[data-state]`	`"open" \| "closed"`
`[data-disabled]`	禁用时出现

Trigger

用于切换可折叠状态的按钮

Prop	Default	Type
`as`	`'button'`	`AsTag \| Component` The element or component this component should render as. Can be overwritten by `asChild`.
`asChild`		`boolean` Change the default rendered element for the one passed as a child, merging their props and behavior. Read our Composition guide for more details.

Data Attribute	Value
`[data-state]`	`"open" \| "closed"`
`[data-disabled]`	禁用时出现

Content

包含可折叠内容的组件

tip

Built with Presence component - supports any animation techniques while maintaining access to presence emitted events.

Prop	Default	Type
`as`	`'div'`	`AsTag \| Component` The element or component this component should render as. Can be overwritten by `asChild`.
`asChild`		`boolean` Change the default rendered element for the one passed as a child, merging their props and behavior. Read our Composition guide for more details.
`forceMount`		`boolean` Used to force mounting when more control is needed. Useful when controlling animation with Vue animation libraries.

Emit	Payload
`contentFound`	`[(void)?]`

Data Attribute	Value
`[data-state]`	`"open" \| "closed"`
`[data-disabled]`	禁用时出现

CSS Variable	Description
`--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 设计模式。

键盘交互

Key	Description
`空格键`	打开/关闭可折叠面板
`回车键`	打开/关闭可折叠面板

可折叠面板 ​

功能特性 ​

安装 ​

结构构成 ​

API 参考 ​

Root ​

Trigger ​

Content ​

示例 ​

内容尺寸动画 ​

折叠时仍渲染内容 ​

无障碍访问 ​

键盘交互 ​