Collapsible

An interactive component which expands/collapses a panel.

@peduarte starred 3 repos

@oku-ui/primitives

TailwindCSSCSS

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

$ npm add @oku-ui/primitives

Anatomy

Import the components and piece the parts together.

<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

Prop	Default	Type
defaultOpen		boolean
disabled		boolean
open		boolean

Emit	Payload
update:open	[value: boolean]

Data Attribute	Value
[data-state]	"open" | "closed"
[data-disabled]	Present when disabled

Trigger

The button that toggles the collapsible

Prop	Default	Type
as	'button'	object | AsTag

Data Attribute	Value
[data-state]	"open" | "closed"
[data-disabled]	Present when disabled

Content

The component that contains the collapsible content.

Prop	Default	Type
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 '@oku-ui/primitives'
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