Skip to content

Collapsible

An interactive component which expands/collapses a panel.
@peduarte starred 3 repos
@oku-ui/primitives
vue
vue
<script setup lang="ts">
import { ref } from 'vue'
import { CollapsibleContent, CollapsibleRoot, CollapsibleTrigger } from '@oku-ui/primitives'
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-mauve12 shadow-[0_2px_10px] shadow-blackA7 outline-none data-[state=closed]:bg-white data-[state=open]:bg-indigo3 hover:bg-indigo3 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-mauve12 text-[15px] leading-[25px]">@oku-ui/primitives</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-mauve12 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-mauve12 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.

sh
sh
$ npm add @oku-ui/primitives

Anatomy

Import the components and piece the parts together.

vue
vue
<script setup>
import { CollapsibleContent, CollapsibleRoot, CollapsibleTrigger } from '@oku-ui/primitives'
</script>

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

API Reference

Root

Contains all the parts of a collapsible

PropDefaultType
defaultOpen
boolean
disabled
boolean
open
boolean
EmitPayload
update:open
[value: boolean]
Data AttributeValue
[data-state]"open" | "closed"
[data-disabled]Present when disabled

Trigger

The button that toggles the collapsible

PropDefaultType
as
'button'
object | AsTag
Data AttributeValue
[data-state]"open" | "closed"
[data-disabled]Present when disabled

Content

The component that contains the collapsible content.

PropDefaultType
forceMount
boolean

Used to force mounting when more control is needed. Useful when controlling animation with Vue animation libraries.

Data AttributeValue
[data-state]"open" | "closed"
[data-disabled]Present when disabled
CSS VariableDescription
--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:

vue
vue
// index.vue
<script setup>
import { CollapsibleContent, CollapsibleRoot, CollapsibleTrigger } from '@oku-ui/primitives'
import './styles.css'
</script>

<template>
  <CollapsibleRoot>
    <CollapsibleTrigger></CollapsibleTrigger>
    <CollapsibleContent class="CollapsibleContent">

    </CollapsibleContent>
  </CollapsibleRoot>
</template>
css
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(--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

KeyDescription
Space
Opens/closes the collapsible
Enter
Opens/closes the collapsible