アコーディオン

コンテンツを表示・非表示できる折りたたみ式コンポーネント

アコーディオンはコンテンツのセクションを展開・折りたたみできます。段階的な情報開示や情報整理のためにアコーディオンを使用してください。

単一のアコーディオン

I am an Accordion.

ここには、コードなどの他のコンポーネントを含む、あらゆるコンテンツを入れられます:

HelloWorld.java

 class HelloWorld {
     public static void main(String[] args) {
         System.out.println("Hello, World!");
     }
 }

Accordion example

<Accordion title="I am an Accordion.">
  ここには、コードなどの他のコンポーネントを含む、あらゆるコンテンツを入れられます:

   ```java HelloWorld.java
    class HelloWorld {
        public static void main(String[] args) {
            System.out.println("Hello, World!");
        }
    }
  ```
</Accordion>

アコーディオングループ

<AccordionGroup> を使って、関連するアコーディオンをまとめます。これにより、各アコーディオンを個別に展開・折りたたみできる、一体感のあるセクションを作成できます。

Getting started

アコーディオン内に他のコンポーネントを配置できます。

HelloWorld.java

class HelloWorld {
    public static void main(String[] args) {
        System.out.println("Hello, World!");
    }
}

Advanced features

アイコンを追加して、視認性と一覧性を高めましょう。

Troubleshooting

関連するコンテンツをグループ化して整理します。

Accordion Group Example

<AccordionGroup>
  <Accordion title="Getting started">
    アコーディオン内に他のコンポーネントを配置できます。

    ```java HelloWorld.java
    class HelloWorld {
        public static void main(String[] args) {
            System.out.println("Hello, World!");
        }
    }
    ```
  </Accordion>

  <Accordion title="Advanced features" icon="alien-8bit">
    アイコンを追加して、視認性と一覧性を高めましょう。
  </Accordion>

  <Accordion title="Troubleshooting">
    関連するコンテンツをグループ化して整理します。
  </Accordion>
</AccordionGroup>

プロパティ

title · string · required

アコーディオンのプレビューに表示されるタイトル。

description · string

アコーディオンのプレビューで、タイトルの下に表示される詳細。

defaultOpen · boolean · default: "false"

アコーディオンをデフォルトで開いた状態にするかどうか。

icon · string

表示するアイコン。

オプション:

• Font Awesome icon の名前
• Lucide icon の名前
• 中括弧で囲んだ JSX 互換の SVG コード
• 外部でホストされているアイコンへの URL
• プロジェクト内のアイコンファイルへのパス

カスタム SVG アイコンの場合:

1. SVGR converter を使って SVG を変換します。
2. SVG コードを SVG の入力フィールドに貼り付けます。
3. JSX の出力フィールドから完全な <svg>...</svg> 要素をコピーします。
4. JSX 互換の SVG コードを中括弧で囲みます: icon={<svg ...> ... </svg>}。
5. 必要に応じて height と width を調整します。

iconType · string

Font Awesome のアイコンスタイル。Font Awesome のアイコンでのみ使用されます。

オプション: regular, solid, light, thin, sharp-solid, duotone, brands。