Ermine UI

Collapsible

One section that a button shows and hides, with its height animated.

See it liveSource on GitHub

Install

If this is the first component in the project, set up once. This writes ermine.json and copies the theme stylesheet. The installation guide covers Vue, Nuxt and Astro.

npx ermineui init
pnpm dlx ermineui init
yarn dlx ermineui init
bunx ermineui init

Then add the component:

npx ermineui add collapsible
pnpm dlx ermineui add collapsible
yarn dlx ermineui add collapsible
bunx ermineui add collapsible

That copies 5 files into src/components/ui/collapsible/, 2 helpers into src/lib/ermine/. Files you already have are kept.

Use

import { Collapsible, CollapsibleContent, CollapsibleTrigger } from '@/components/ui/collapsible'
<Collapsible v-model:open="open">
  <CollapsibleTrigger as-child><Button variant="outline">Details</Button></CollapsibleTrigger>
  <CollapsibleContent>…</CollapsibleContent>
</Collapsible>

<HoverCard>
  <HoverCardTrigger href="/people/ines">Ines Kovač</HoverCardTrigger>
  <HoverCardContent>Owner · 214 deployments this year</HoverCardContent>
</HoverCard>

<Sidebar v-model:collapsed="collapsed">
  <SidebarGroup label="Project">
    <SidebarItem :as="NuxtLink" to="/deployments" active>
      <template #icon><svg>…</svg></template>
      Deployments
    </SidebarItem>
  </SidebarGroup>
</Sidebar>

<EmptyState title="No deployments yet" description="Push to main and it will show up here.">
  <Button>Deploy now</Button>
</EmptyState>

In Nuxt, with the auto-import setting, the tags work in templates without the import. In Astro, use it inside a Vue island.

What gets copied

FileWhere it goes
Collapsible.vuesrc/components/ui/collapsible/Collapsible.vue
CollapsibleContent.vuesrc/components/ui/collapsible/CollapsibleContent.vue
CollapsibleTrigger.vuesrc/components/ui/collapsible/CollapsibleTrigger.vue
context.tssrc/components/ui/collapsible/context.ts
index.tssrc/components/ui/collapsible/index.ts
context.ts helpersrc/lib/ermine/context.ts
primitive.ts helpersrc/lib/ermine/primitive.ts

The folders are the suggested ones. ermine.json says where yours are.

Source

This is exactly what the command copies. To install by hand, create each file below and the helpers listed above.

Collapsible.vue 54 lines
<script setup lang="ts">
import { toRef, useId } from 'vue'
import { provideCollapsible } from './context'

const props = defineProps<{
  disabled?: boolean
}>()

const open = defineModel<boolean>('open', { default: false })

provideCollapsible({
  open,
  toggle: () => {
    if (!props.disabled) open.value = !open.value
  },
  disabled: toRef(props, 'disabled'),
  contentId: useId(),
})
</script>

<template>
  <div class="er-collapsible" :data-state="open ? 'open' : 'closed'">
    <slot :open="open" />
  </div>
</template>

<style>
@layer components {
  /* Animates to the content's own height: a grid row going from 0fr to 1fr needs no measuring. */
  .er-collapsible-content {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows var(--er-duration) var(--er-ease);
  }

  .er-collapsible-content[data-state='open'] {
    grid-template-rows: 1fr;
  }

  .er-collapsible-content > div {
    min-height: 0;
    overflow: hidden;
    /* Hidden outright once it has closed, so its text cannot be selected or found while out of sight. */
    visibility: hidden;
    transition: visibility 0s linear var(--er-duration);
  }

  .er-collapsible-content[data-state='open'] > div {
    visibility: visible;
    transition-delay: 0s;
  }
}
</style>
CollapsibleContent.vue 18 lines
<script setup lang="ts">
import { useCollapsible } from './context'

const collapsible = useCollapsible()
</script>

<template>
  <!-- Closed content stays in the page so it can animate, but inert keeps it out of Tab order and screen readers. -->
  <div
    :id="collapsible.contentId"
    class="er-collapsible-content"
    :data-state="collapsible.open.value ? 'open' : 'closed'"
    :inert="!collapsible.open.value"
  >
    <div><slot /></div>
  </div>
</template>
CollapsibleTrigger.vue 32 lines
<script setup lang="ts">
import type { Component } from 'vue'
import { Primitive } from '../../lib/primitive'
import { useCollapsible } from './context'

withDefaults(
  defineProps<{
    as?: string | Component
    /** Use the single child (e.g. a Button) as the trigger instead of rendering one. */
    asChild?: boolean
  }>(),
  { as: 'button' },
)

const collapsible = useCollapsible()
</script>

<template>
  <Primitive
    :as="as"
    :as-child="asChild"
    :type="as === 'button' && !asChild ? 'button' : undefined"
    :aria-expanded="collapsible.open.value"
    :aria-controls="collapsible.contentId"
    :disabled="collapsible.disabled.value || undefined"
    :data-state="collapsible.open.value ? 'open' : 'closed'"
    @click="collapsible.toggle()"
  >
    <slot />
  </Primitive>
</template>
context.ts 12 lines
import type { Ref } from 'vue'
import { createContext } from '../../lib/context'

export interface CollapsibleContext {
  open: Ref<boolean>
  toggle: () => void
  disabled: Ref<boolean>
  contentId: string
}

export const [provideCollapsible, useCollapsible] = createContext<CollapsibleContext>('Collapsible')
index.ts 5 lines
/** Collapsible — one section that a button shows and hides, with its height animated. */
export { default as Collapsible } from './Collapsible.vue'
export { default as CollapsibleContent } from './CollapsibleContent.vue'
export { default as CollapsibleTrigger } from './CollapsibleTrigger.vue'