Thành phần
Accordion
Accordion on Base UI: hairline items, +/- glyph, opacity-only panel, no hover effect.
Nội dung tham khảo viết bằng tiếng Anh; mục “Vietnamese” có ví dụ tiếng Việt.
Xem trước
Install
bash
npx shadcn add @eloquent/accordionUsage
tsx
import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from "@/components/ui/accordion";
<Accordion defaultValue={["who"]}>
<AccordionItem value="who">
<AccordionTrigger>Who may submit a document?</AccordionTrigger>
<AccordionContent>Any registered officer of a participating body.</AccordionContent>
</AccordionItem>
</Accordion>value and defaultValue are arrays of item values. Add multiple to let several items stay open; by default opening one closes the other.
States
| State | Treatment |
|---|---|
| Closed / open | aria-expanded, and a + or − glyph |
| Hover | None |
| Pressed | Ink fill with paper text |
| Focus | 2px ink outline, 2px offset |
| Disabled | Halftone text, cursor-not-allowed |
Keyboard
| Key | Action |
|---|---|
| Tab / Shift+Tab | Move between the triggers |
| Enter / Space | Open or close the focused item; focus stays on the trigger |
Base UI no longer moves focus between triggers with the arrow keys (it follows the updated APG guidance), so neither does this component.
Vietnamese
Ink adaptation
Upstream turns a chevron. Here the glyph swaps between + and −, so the open state is a shape and not a colour, and a hairline separates the items. Titles are Playfair 900 and bodies Source Serif. The panel fades with opacity only; there is no height animation, because brand motion is opacity and transform only. Built on Base UI Accordion.