可折叠

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

@peduarte starred 3 repos

@radix-vue/radix-vue

<script setup lang="ts">
import { ref } from 'vue'
import { CollapsibleContent, CollapsibleRoot, CollapsibleTrigger } from 'radix-vue'
import { Icon } from '@iconify/vue'

const open = ref(false)
</script>

<template>
  <CollapsibleRoot
    v-model:open="open"
    class="w-[300px]"
  >
    <div style="display: flex; align-items: center; justify-content: space-between">
      <span class="text-white text-[15px] leading-[25px]"> @peduarte starred 3 repos </span>
      <CollapsibleTrigger
        class="cursor-default rounded-full h-[25px] w-[25px] inline-flex items-center justify-center text-grass11 shadow-[0_2px_10px] shadow-blackA7 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 mt-[10px] p-[10px] shadow-[0_2px_10px] shadow-blackA7">
      <span class="text-grass11 text-[15px] leading-[25px]">@radix-vue/radix-vue</span>
    </div>

    <CollapsibleContent class="data-[state=open]:animate-slideDown data-[state=closed]:animate-slideUp overflow-hidden">
      <div class="bg-white rounded my-[10px] p-[10px] shadow-[0_2px_10px] shadow-blackA7">
        <span class="text-grass11 text-[15px] leading-[25px]">@vuejs/core</span>
      </div>
      <div class="bg-white rounded my-[10px] p-[10px] shadow-[0_2px_10px] shadow-blackA7">
        <span class="text-grass11 text-[15px] leading-[25px]">@radix-ui/primitives</span>
      </div>
    </CollapsibleContent>
  </CollapsibleRoot>
</template>

功能

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

安装

从您的命令行安装组件。

$ npm add radix-vue

解剖

导入组件并将它们组合在一起。

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

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

API 参考

根

包含可折叠的所有部分

道具	默认值	类型
as	'div'	AsTag | 组件 此组件应呈现为的元素或组件。可以被asChild覆盖
asChild		布尔值 将默认渲染的元素更改为作为子元素传递的元素，合并它们的道具和行为。 阅读我们的 组合 指南了解更多详情。
defaultOpen	false	布尔值 可折叠最初渲染时的打开状态。 当您不需要控制其打开状态时使用。
disabled		布尔值 当为true时，防止用户与可折叠进行交互。
open		布尔值 可折叠的受控打开状态。可以与v-model绑定。

发出	有效载荷
update:open	[value: boolean] 可折叠的打开状态发生变化时调用的事件处理程序。

插槽 (默认)	有效载荷
open	布尔值 当前打开状态

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

触发器

切换可折叠的按钮

道具	默认值	类型
as	'button'	AsTag | 组件 此组件应呈现为的元素或组件。可以被asChild覆盖
asChild		布尔值 将默认渲染的元素更改为作为子元素传递的元素，合并它们的道具和行为。 阅读我们的 组合 指南了解更多详情。

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

内容

包含可折叠内容的组件。

道具	默认值	类型
as	'div'	AsTag | 组件 此组件应呈现为的元素或组件。可以被asChild覆盖
asChild		布尔值 将默认渲染的元素更改为作为子元素传递的元素，合并它们的道具和行为。 阅读我们的 组合 指南了解更多详情。
forceMount		布尔值 用于在需要更多控制时强制挂载。在使用 Vue 动画库控制动画时很有用。

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

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

示例

动画内容大小

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

// index.vue
<script setup>
import { CollapsibleContent, CollapsibleRoot, CollapsibleTrigger } from 'radix-vue'
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(--radix-collapsible-content-height);
  }
}

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

无障碍性

遵守 披露 WAI-ARIA 设计模式。

键盘交互

钥匙	描述
空格	打开/关闭可折叠
进入	打开/关闭可折叠