Accordion, Tab, Modal

Figmaデザインリンク:
Component

デザインに基づいてAccordion、Tab、Modalコンポーネントを構築してください。

• ピクセルパーフェクトである必要はありません。
• ソースコードは安定して動作し、最適化されている必要があります。
• コンポーネントの再利用性を優先してください。
• 各コンポーネントは、同一ページ内で複数のインスタンスを使用でき、それぞれが独立して動作する必要があります。

実装要件

1. Accordion

• Accordionは項目のリストを表示し、各項目は展開または折りたたんで詳細なコンテンツを表示できます。
• 各項目のタイトルをクリックすると、対応するコンテンツが表示/非表示になります。

2. Tab

• Tabはコンテンツを複数のセクションに分割し、各セクションは独立したタブに配置されます。
• タブを選択すると、対応するコンテンツが表示され、他のタブのコンテンツは非表示になります。
• タブのタイトルをクリックすることでタブ間を切り替えることができます。

3. Modal

• Modalはメインインターフェース上に表示されるポップアップウィンドウで、情報を表示したりユーザーの操作を要求したりします。
• Modalはボタンまたはモーダル領域外でのアクションによって開閉できます。

---