Collapsible

An interactive component which expands/collapses a panel.

@peduarte starred 3 repos

@unovue/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]">@unovue/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
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.

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
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
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