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
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:
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
Key | Description |
---|---|
Space | Opens/closes the collapsible |
Enter | Opens/closes the collapsible |