アコーディオン

アコーディオンコンポーネントは関連コンテンツを折りたたみ可能なセクションで表示し、ユーザーが情報を素早く表示・非表示できるようにして、よりスリムな体験を提供します。各アコーディオンは複数のセクションを含めることができます。

アコーディオンの設定

1. アコーディオンにセクションを追加する

まず、アコーディオンの個々のセクション、または「アイテム」を作成します。各アイテムは折りたたみ可能なコンテナとして機能し、表示したいコンテンツを配置します。これがアコーディオンコンポーネントの強力な点です：テキストや画像に限定されません。任意の他のAvonniダイナミックコンポーネントをアコーディオンのセクションに直接ドラッグ＆ドロップできます。

詳細なデータ表を含めたいですか？データテーブルコンポーネントをそのままセクションにドラッグしてください。ロケーションを可視化する必要がありますか？マップコンポーネントを追加しましょう。可能性は無限大です！

新しいセクションを追加するには、「アイテムを追加」ボタンをクリックします。

2: 各セクションの外観をカスタマイズする

アイテムに適切な見た目と感触を与えます。

• バリアント： 標準の外観には「ベース」を、微妙な背景効果には「シェード」を選択してください。

• 折りたたみアイコン： セクションが展開されているか折りたたまれているかを示すアイコンを有効または無効にします。

• アイコンの位置： アイテムヘッダーの左側または右側に折りたたみアイコンを配置します。

3: 最初に開くセクションを選択する（任意）

この手順では、コンポーネントが最初に読み込まれたときにどのアコーディオンセクション（または複数のセクション）が展開されるかを制御できます。

• 一度に1つのセクションのみ開く： アコーディオンが一度に1つのセクションのみを許可するように設定されていて、ここで複数のセクションを選択した場合、最初にリストに表示されているセクションのみが最初に開かれます。

• 複数セクションを開く： デフォルトで複数のセクションを開いた状態にするには、「複数セクションの展開を許可」オプションを有効にしてください

---

スタイルプロパティ

間隔

• マージン：

  • 上： スペースを追加します 上部に アコーディオンの。

  • 右： スペースを追加します 右側に アコーディオンの。

  • 下： スペースを追加します 下に アコーディオンの。

  • 左： スペースを追加します 左側 アコーディオンの。

• パディング：

  • 上： スペースを追加します の アコーディオン、コンテンツの上。

  • 右： スペースを追加します の アコーディオン、コンテンツの右側。

  • 下： スペースを追加します の アコーディオン、コンテンツの下。

  • 左： スペースを追加します の アコーディオン、コンテンツの左側

ボーダー

サイズ

コンテンツ

なぜアコーディオンコンポーネントを使うのか？

• コンテンツを整理する： 関連情報を管理しやすいセクションにまとめ、可読性とナビゲーションを向上させます。

• スペースを節約する： 長いコンテンツを必要になるまで非表示にして、ページのごちゃごちゃを減らします。

• ユーザーエクスペリエンスを向上させる： ユーザーが情報にアクセスする明確で直感的な方法を提供します。

• 視覚的魅力を高める： コンテンツの構造化された整理されたレイアウトを作成します。

---

使用例

• よくある質問： よくある質問とその回答をコンパクトな形式で提示します。

• 製品の詳細： 「説明」「仕様」「レビュー」などのセクションに製品情報を整理します。

• ステップバイステップのガイド： 複雑なプロセスを管理しやすいステップに分解します。

• フォーム： 関連するフォームフィールドを折りたたみ可能なセクションに分けて整理します。

アコーディオンコンポーネントを活用することで、情報を簡潔かつ魅力的に提示するユーザーフレンドリーなインターフェースを作成できます。