Collapsible
<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>
Features
- Full keyboard navigation.
- Can be controlled or uncontrolled.
Installation
Install the component from your command line.
$ npm add radix-vue
Anatomy
Import the components and piece the parts together.
<script setup>
import { CollapsibleContent, CollapsibleRoot, CollapsibleTrigger } from 'radix-vue'
</script>
<template>
<CollapsibleRoot>
<CollapsibleTrigger />
<CollapsibleContent />
</CollapsibleRoot>
</template>
API Reference
Root
Contains all the parts of a collapsible
Prop | Default | Type |
---|---|---|
as | 'div' | AsTag | Component The element or component this component should render as. Can be overwrite by |
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. |
disabled | boolean When | |
open | boolean The controlled open state of the collapsible. Can be binded with |
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] | Present when disabled |
Trigger
The button that toggles the collapsible
Prop | Default | Type |
---|---|---|
as | 'button' | AsTag | Component The element or component this component should render as. Can be overwrite by |
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] | Present when disabled |
Content
The component that contains the collapsible content.
Prop | Default | Type |
---|---|---|
as | 'div' | AsTag | Component The element or component this component should render as. Can be overwrite by |
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. |
Data Attribute | Value |
---|---|
[data-state] | "open" | "closed" |
[data-disabled] | Present when disabled |
CSS Variable | Description |
---|---|
--radix-collapsible-content-width | The width of the content when it opens/closes |
--radix-collapsible-content-height | The height of the content when it opens/closes |
Examples
Animating content size
Use the --radix-collapsible-content-width
and/or --radix-collapsible-content-height
CSS variables to animate the size of the content when it opens/closes. Here's a demo:
// 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;
}
}
Accessibility
Adheres to the Disclosure WAI-ARIA design pattern.
Keyboard Interactions
Key | Description |
---|---|
Space | Opens/closes the collapsible |
Enter | Opens/closes the collapsible |