Docs
アコーディオン

アコーディオン

インタラクティブな見出しの垂直スタックで、それぞれの見出しでコンテンツのセクションが表示されます。

DocsAPI Reference

インストール

次のコマンドを実行します:

npx shadcn-ui@latest add accordion

tailwind.config.jsを更新します

次のアニメーションをtailwind.config.jsファイルに追加します:

tailwind.config.js
/** @type {import('tailwindcss').Config} */
module.exports = {
  theme: {
    extend: {
      keyframes: {
        "accordion-down": {
          from: { height: "0" },
          to: { height: "var(--radix-accordion-content-height)" },
        },
        "accordion-up": {
          from: { height: "var(--radix-accordion-content-height)" },
          to: { height: "0" },
        },
      },
      animation: {
        "accordion-down": "accordion-down 0.2s ease-out",
        "accordion-up": "accordion-up 0.2s ease-out",
      },
    },
  },
}

使用方法

import {
  Accordion,
  AccordionContent,
  AccordionItem,
  AccordionTrigger,
} from "@/components/ui/accordion"
<Accordion type="single" collapsible>
  <AccordionItem value="item-1">
    <AccordionTrigger>アクセスできますか?</AccordionTrigger>
    <AccordionContent>
      はい。WAI-ARIAデザインパターンに準拠しています。
    </AccordionContent>
  </AccordionItem>
</Accordion>