125k

Accordion

PreviousNext

垂直方向に積み重ねられたインタラクティブな見出しのセットで、それぞれがコンテンツのセクションを表示します。

BaseRadixReact Aria

通常配送（5～7日）、速達配送（2～3日）、翌日配送をご用意しています。海外へのご注文は送料無料です。

import {
  Accordion,
  AccordionContent,

インストール

pnpm dlx shadcn@latest add accordion

使い方

import {
  Accordion,
  AccordionContent,
  AccordionItem,
  AccordionTrigger,
} from "@/components/ui/accordion"
<Accordion defaultExpandedKeys={["item-1"]}>
  <AccordionItem id="item-1">
    <AccordionTrigger>Is it accessible?</AccordionTrigger>
    <AccordionContent>
      Yes. It adheres to the WAI-ARIA design pattern.
    </AccordionContent>
  </AccordionItem>
</Accordion>

構成

次の構成で Accordion を作成します。

Accordion
├── AccordionItem
│   ├── AccordionTrigger
│   └── AccordionContent
└── AccordionItem
    ├── AccordionTrigger
    └── AccordionContent

基本

一度に 1 つの項目を表示する基本的なアコーディオンです。デフォルトでは最初の項目が開きます。

ログインページで「パスワードをお忘れですか？」をクリックし、メールアドレスを入力してください。パスワードをリセットするためのリンクをお送りします。リンクの有効期限は24時間です。

import {
  Accordion,
  AccordionContent,

複数

allowsMultipleExpanded プロパティを使うと、複数の項目を同時に開けます。

通知の受け取り方法を管理します。更新情報のメール通知や、モバイル端末へのプッシュ通知を有効にできます。

import {
  Accordion,
  AccordionContent,

無効

AccordionItem の isDisabled プロパティを使うと、個別の項目を無効にできます。

import {
  Accordion,
  AccordionContent,

境界線

項目に境界線を追加するには、Accordion に border を、AccordionItem に border-b last:border-b-0 を追加します。

月額プランと年額プランをご用意しています。請求は各サイクルの開始時に行われ、いつでも解約できます。すべてのプランに自動バックアップ、24時間365日のサポート、チームメンバー数無制限が含まれます。

import {
  Accordion,
  AccordionContent,

カード

Accordion を Card コンポーネントで囲みます。

サブスクリプションと請求
アカウント、プラン、お支払い、解約に関するよくある質問です。

スターター（月額9ドル）、プロフェッショナル（月額29ドル）、エンタープライズ（月額99ドル）の3つのプランをご用意しています。各プランではストレージ容量が増え、APIアクセス、優先サポート、チームコラボレーション機能をご利用いただけます。

import {
  Accordion,
  AccordionContent,

RTL

shadcn/ui で RTL サポートを有効にするには、RTL 構成ガイドを参照してください。

انقر على 'نسيت كلمة المرور' في صفحة تسجيل الدخول، أدخل عنوان بريدك الإلكتروني، وسنرسل لك رابطًا لإعادة تعيين كلمة المرور. سينتهي صلاحية الرابط خلال 24 ساعة.

"use client"

import * as React from "react"

API リファレンス

React Aria のドキュメントで詳細を確認できます。