Accordéon

Des sections qui se replient. Il est construit sur <details> et <summary>, si bien que l'état ouvert, le comportement clavier et la recherche dans la page viennent tous du navigateur.

Utilisation

vue

Does it work with Nuxt?

Yes. The package is SSR-safe and ships as ESM.

Is there a Tailwind preset?

No. The tokens are custom properties, which any framework can read.

<script setup lang="ts">
import { VAccordion, VAccordionItem } from 'vectis-ui'
</script>

<template>
  <VAccordion>
    <VAccordionItem title="Does it work with Nuxt?" default-open>
      Yes. The package is SSR-safe and ships as ESM.
    </VAccordionItem>
    <VAccordionItem title="Is there a Tailwind preset?">
      No. The tokens are custom properties, which any framework can read.
    </VAccordionItem>
  </VAccordion>
</template>

Exemples

Variantes

variant définit la décoration du groupe : flat (par défaut) ne dessine rien, outlined ajoute un fond surélevé, une bordure et des coins arrondis.

vue

Flat, the default

Nothing is drawn around the group, which lets it sit on the surface behind it.

No background, no border

Reach for it when the page already provides the frame.

Outlined

A raised background, a border and rounded corners, so the group reads as a card.

Its own surface

Reach for it when the accordion has to stand apart from what surrounds it.

<script setup lang="ts">
import { VAccordion, VAccordionItem } from 'vectis-ui'
</script>

<template>
  <VAccordion>
    <VAccordionItem title="Flat, the default" default-open>
      Nothing is drawn around the group, which lets it sit on the surface behind it.
    </VAccordionItem>
    <VAccordionItem title="No background, no border">
      Reach for it when the page already provides the frame.
    </VAccordionItem>
  </VAccordion>

  <VAccordion variant="outlined">
    <VAccordionItem title="Outlined" default-open>
      A raised background, a border and rounded corners, so the group reads as a card.
    </VAccordionItem>
    <VAccordionItem title="Its own surface">
      Reach for it when the accordion has to stand apart from what surrounds it.
    </VAccordionItem>
  </VAccordion>
</template>

Une section à la fois

Un groupe ne garde qu'une section ouverte par défaut. multiple permet d'en garder plusieurs ouvertes en même temps. VSideNavigation a le défaut et la prop inverses, exclusive : une barre latérale laisse d'ordinaire plusieurs sections ouvertes.

vue

How long does delivery take?

Two working days in France, five anywhere else in Europe.

Do you ship outside Europe?

Yes, to twenty-eight countries. The rate is shown at checkout.

Can I change the address after ordering?

Until the parcel is handed to the carrier, from the order page.

What can I return?

Anything unworn, within thirty days of delivery.

Who pays for the return?

We do, once per order. The label is in your account.

When is the refund issued?

Within three working days of the parcel reaching the warehouse.

<script setup lang="ts">
import { VAccordion, VAccordionItem } from 'vectis-ui'
</script>

<template>
  <VAccordion>
    <VAccordionItem title="How long does delivery take?" default-open>
      Two working days in France, five anywhere else in Europe.
    </VAccordionItem>
    <VAccordionItem title="Do you ship outside Europe?">
      Yes, to twenty-eight countries. The rate is shown at checkout.
    </VAccordionItem>
    <VAccordionItem title="Can I change the address after ordering?">
      Until the parcel is handed to the carrier, from the order page.
    </VAccordionItem>
  </VAccordion>

  <VAccordion variant="outlined" multiple>
    <VAccordionItem title="What can I return?" default-open>
      Anything unworn, within thirty days of delivery.
    </VAccordionItem>
    <VAccordionItem title="Who pays for the return?" default-open>
      We do, once per order. The label is in your account.
    </VAccordionItem>
    <VAccordionItem title="When is the refund issued?">
      Within three working days of the parcel reaching the warehouse.
    </VAccordionItem>
  </VAccordion>
</template>

Sous-titres et icônes

icon place une icône avant le titre et subtitle ajoute une seconde ligne en dessous. Les slots #icon et #subtitle acceptent du balisage plutôt que du texte simple.

vue

NotificationsEmail and in-app alerts

Choose which events reach you, and where.

AvailabilityWorking hours and time zone

The hours during which your team can be reached.

DocumentsContracts and invoices

Everything signed or billed on this account.

<script setup lang="ts">
import { VAccordion, VAccordionItem } from 'vectis-ui'
import { description, notifications, schedule } from 'vectis-ui/icons'
</script>

<template>
  <VAccordion variant="outlined">
    <VAccordionItem
      :icon="notifications"
      title="Notifications"
      subtitle="Email and in-app alerts"
      default-open
    >
      Choose which events reach you, and where.
    </VAccordionItem>
    <VAccordionItem :icon="schedule" title="Availability" subtitle="Working hours and time zone">
      The hours during which your team can be reached.
    </VAccordionItem>
    <VAccordionItem :icon="description" title="Documents" subtitle="Contracts and invoices">
      Everything signed or billed on this account.
    </VAccordionItem>
  </VAccordion>
</template>

Compact

compact réduit chaque rembourrage de 4px, le texte et les icônes gardant leur taille.

vue

RuntimeNode 20.11

The oldest version the package is tested against.

Package managerpnpm 11

Any manager works. The repository itself uses pnpm.

Module formatESM only

There is no CommonJS build, and none is planned.

<script setup lang="ts">
import { VAccordion, VAccordionItem } from 'vectis-ui'
</script>

<template>
  <VAccordion variant="outlined" compact>
    <VAccordionItem title="Runtime" subtitle="Node 20.11" default-open>
      The oldest version the package is tested against.
    </VAccordionItem>
    <VAccordionItem title="Package manager" subtitle="pnpm 11">
      Any manager works. The repository itself uses pnpm.
    </VAccordionItem>
    <VAccordionItem title="Module format" subtitle="ESM only">
      There is no CommonJS build, and none is planned.
    </VAccordionItem>
  </VAccordion>
</template>

Icônes d'ouverture et de fermeture

expandIcon remplace le chevron. Ajouter collapseIcon échange les deux icônes à l'ouverture, au lieu de faire pivoter la première.

vue

Where do these two icons come from?

From the icon set wired into the application, since both are given here as names.

And without a collapse icon?

The expand icon stays in place and is rotated when the section opens.

<script setup lang="ts">
import { VAccordion, VAccordionItem } from 'vectis-ui'
</script>

<template>
  <VAccordion variant="outlined" expand-icon="add" collapse-icon="remove">
    <VAccordionItem title="Where do these two icons come from?" default-open>
      From the icon set wired into the application, since both are given here as names.
    </VAccordionItem>
    <VAccordionItem title="And without a collapse icon?">
      The expand icon stays in place and is rotated when the section opens.
    </VAccordionItem>
  </VAccordion>
</template>

Sections désactivées

disabled empêche l'ouverture d'une section et la grise. Le clavier l'enjambe.

vue

Personal details

Your name, your address and how we may contact you.

Payment methods

Available once your email address has been confirmed.

Delivery preferences

Available once a payment method has been added.

Privacy

What we store, and for how long.

<script setup lang="ts">
import { VAccordion, VAccordionItem } from 'vectis-ui'
</script>

<template>
  <VAccordion variant="outlined">
    <VAccordionItem title="Personal details" default-open>
      Your name, your address and how we may contact you.
    </VAccordionItem>
    <VAccordionItem title="Payment methods" disabled>
      Available once your email address has been confirmed.
    </VAccordionItem>
    <VAccordionItem title="Delivery preferences" disabled>
      Available once a payment method has been added.
    </VAccordionItem>
    <VAccordionItem title="Privacy"> What we store, and for how long. </VAccordionItem>
  </VAccordion>
</template>

API

Props

VAccordion
Prop	Type	Défaut
`multiple`	`boolean`	`false`
Laisse le lecteur garder plusieurs sections ouvertes à la fois. Sans lui, une seule reste ouverte et en ouvrir une referme la précédente, ce dont le navigateur se charge seul dès que tous les items partagent un même nom de `<details>`.
`variant`	`AccordionVariant'flat' \| 'outlined'`	`'flat'`
Comment le groupe est décoré. `flat` ne dessine rien et laisse l'accordéon poser sur la surface derrière lui ; `outlined` lui donne un fond surélevé, une bordure et des coins arrondis, si bien qu'il se lit comme une carte.
`expandIcon`	`IconSource`	`expand_more`
L'icône affichée sur une section fermée. C'est un chevron, qui pivote de 180° quand la section s'ouvre.
`collapseIcon`	`IconSource`	aucune
L'icône affichée sur une section ouverte. Sans elle, l'icône d'ouverture est simplement pivotée ; avec elle, les deux sont échangées.
`compact`	`boolean`	`false`
Densité réduite : chaque rembourrage perd 4px, tandis que le texte et les icônes gardent leur taille.

VAccordionItem
Prop	Type	Défaut
`title`	`string`	aucune
Le titre de la section, la ligne qui reste visible quand elle est fermée. Utilisez le slot `#title` quand le titre demande du balisage plutôt que du texte simple.
`subtitle`	`string`	aucune
Une seconde ligne sous le titre, pour une courte explication ou un statut. Le slot `#subtitle` la remplace quand du balisage est nécessaire.
`icon`	`IconSource`	aucune
Une icône avant le titre. Le slot `#icon` la remplace.
`defaultOpen`	`boolean`	`false`
Rend la section déjà ouverte. Seule sa valeur initiale est lue : le navigateur possède l'état ensuite, donc changer cette prop plus tard ne refermera pas une section que le lecteur a ouverte.
`disabled`	`boolean`	`false`
Rend la section inerte. Elle ne peut plus être ouverte, le clavier l'enjambe, et elle se grise par les tokens de couleur.
`v-model:open`	`boolean \| null`	`null`
Si la section est ouverte, quand vous voulez la piloter ou l'observer. Non liée, le navigateur garde cet état pour lui et `defaultOpen` n'en donne que la valeur initiale.

Slots

VAccordion
Slot	Type
`default`	`{}`
Les `VAccordionItem` qui composent le groupe.

VAccordionItem
Slot	Type
`default`	`{}`
Le contenu révélé quand la section est ouverte.
`title`	`{}`
Un titre fait de balisage, qui remplace la prop `title`.
`subtitle`	`{}`
Un sous-titre fait de balisage, qui remplace la prop `subtitle`.
`icon`	`{}`
Du contenu libre avant le titre, qui prend la place de `icon`.

Types

Les types que les tables ci-dessus nomment, écrits comme la librairie les déclare. Ceux qui portent export s'importent depuis vectis-ui pour typer votre propre code ; les autres décrivent la forme de ce qu'un slot fournit.

export interface BuiltinIcon {
  name: string
  paths: readonly [string] | readonly [string, string]
}

export type IconRender =
  | { path: string; viewBox?: string }
  | { component: Component; props?: Record<string, unknown> }
  | { src: string }
  | { text: string; class?: string }
  | { class: string }

export type IconSource = string | BuiltinIcon | IconRender