Reddot UI Library

Docs
Accordion

Accordion

A vertically stacked set of interactive headings that each reveal a section of content.

SourceApi

Our flagship product combines cutting-edge technology with sleek design. Built with premium materials, it offers unparalleled performance and reliability.

Key features include advanced processing capabilities, and an intuitive user interface designed for both beginners and experts.

Installation

$npx shadcn@latest add https://reddot.dottools.xyz/r/accordion.json

Utilisation

import {
  Accordion,
  AccordionContent,
  AccordionItem,
  AccordionTrigger,
} from "@/components/ui/accordion"
 
export function AccordionDemo() {
  return (
    <Accordion type="single" collapsible>
      <AccordionItem value="item-1">
        <AccordionTrigger>Is it accessible?</AccordionTrigger>
        <AccordionContent>
          Yes. It adheres to the WAI-ARIA design pattern.
        </AccordionContent>
      </AccordionItem>
      <AccordionItem value="item-2">
        <AccordionTrigger>Is it styled?</AccordionTrigger>
        <AccordionContent>
          Yes. It comes with default styles that can be customized.
        </AccordionContent>
      </AccordionItem>
      <AccordionItem value="item-3">
        <AccordionTrigger>Is it animated?</AccordionTrigger>
        <AccordionContent>
          Yes. It's animated by default, but you can disable it if you prefer.
        </AccordionContent>
      </AccordionItem>
    </Accordion>
  )
}

API Reference

Accordion

PropTypeDefaultDescription
type"single" | "multiple"-Determines whether one or multiple items can be opened at the same time
collapsiblebooleanfalseWhen type is "single", allows the open item to be closed
valuestring-The controlled value of the item to expand when type is "single"
defaultValuestring-The value of the item to expand when initially rendered when type is "single"
onValueChange(value: string) => void-Event handler called when the expanded state of an item changes when type is "single"

AccordionItem

PropTypeDefaultDescription
valuestring-A unique value for the item
disabledbooleanfalseWhen true, prevents the user from interacting with the item

AccordionTrigger

Renders a button that toggles the accordion item.

AccordionContent

Contains the collapsible content for an accordion item.

Dépendances

Ce composant nécessite les dépendances suivantes :

  • @radix-ui/react-accordion

Notes

  • Ce composant UI fait partie du système de design
  • Respecte les conventions de style et d'accessibilité WAI-ARIA
  • Supporte les interactions clavier
  • Entièrement personnalisable avec CSS