アコーディオン

911 views

アコーディオンコンテナ

アコーディオンコンテナは、折りたたみ可能なセクションを作成するためのインターフェースコンポーネントです。ユーザーが見出しをクリックすると、その見出しに関連する内容が展開され、もう一度クリックすると折りたたまれる仕組みです。以下に、アコーディオンコンテナの使い所について具体的な例を挙げて説明します。

アコーディオンコンテナの使い所

FAQセクション

例: ウェブサイトのFAQ（よくある質問）ページで、各質問とその回答をアコーディオンコンテナにまとめます。
使い所の利点:
- 質問と回答が見やすく整理される。
- ページのスクロールを減らし、ユーザーが簡単に情報を見つけられる。
製品詳細情報

例: 商品ページで、製品の詳細情報（仕様、レビュー、Q&Aなど）をアコーディオンコンテナにまとめます。
使い所の利点:
- 製品の詳細情報が整理され、ユーザーが必要な情報を簡単に見つけられる。
- ページがすっきりして、ユーザー体験が向上する。
サービス説明

例: 企業のサービス紹介ページで、各サービスの詳細説明をアコーディオンコンテナにまとめます。
使い所の利点:
- 各サービスの説明を整理して表示できる。
- ユーザーが関心のあるサービスのみを展開して読むことができる。

アコーディオンコンテナは、情報を整理し、ユーザーが必要な部分だけを展開して表示できるようにするための非常に便利なコンポーネントです。FAQセクション、製品詳細情報、サービス説明など、様々な場面で使われます。これにより、ページの可読性が向上し、ユーザーエクスペリエンスが改善されます。

アコーディオンとは、タイトルバーをクリック（またはマウスオーバー）すると、コンテンツ部分が開閉するブロックのことです。

コンポーネントを配置すると、デフォルトで以下のコードが定義されます。

<c-accordion [alwaysOpen]=”true” data-comp-id=”accordion-container.1″ id=”accordion-container.1”>

単独では意味を成しませんが次のアコーディオン・アイテムの器となります。

アコーディオンアイテム

アコーディオンアイテムは、ユーザーがクリックすると詳細が表示され、もう一度クリックすると非表示になるインターフェース要素です。これにより、ページ上の情報を整理し、必要に応じて詳細情報を表示することができます。以下に、アコーディオンアイテムの使い所について具体的な例を挙げて説明します。

アコーディオンアイテムの使い所

トピックの詳細表示

例: 学習リソースのページで、各トピックの詳細説明をアコーディオンアイテムにまとめます。
使い所の利点:
- 学習リソースの各トピックを整理して表示できる。
- ユーザーが関心のあるトピックのみを展開して読むことができる。

アコーディオンアイテムは、情報を整理し、ユーザーが必要な部分だけを展開して表示できるようにするための便利なコンポーネントです。学習リソースなど、様々な場面で使われます。これにより、ページの可読性が向上し、ユーザーエクスペリエンスが改善されます。

アコーディオンブロックに表示する内容を定義します。

配置すると、デフォルトで以下のコードが定義されます。ボタンを表示する［アコーディオンアイテムヘッダ］と説明文を表示する［コンテナ］というコンポーネントが配置されます。

<c-accordion-item #item0=”cAccordionItem” [visible]=”true” data-comp-id=”accordion-item.1″ id=”accordion-item.1″>

<ng-template cTemplateId=”accordionHeaderTemplate”>

<button cAccordionButton (click)=”item0.toggleItem()” [collapsed]=”!item0.visible” data-comp-id=”accordion-item-header.1″>

<mat-label>

Accordion Button

</mat-label>

</button>

</ng-template>

<ng-template cTemplateId=”accordionBodyTemplate”>

<c-container class=”accordion-body” data-comp-id=”c-container.1″></c-container>

</ng-template>

</c-accordion-item>

<c-accordion> タグに対応します。

初期状態ですと複数のアコーディオンが同時にオープン、クローズされるのですが

<c-accordion-item #item0=”cAccordionItem” [visible]=”true” data-comp-id=”accordion-item.2″ id=”accordion-item.2″>

<ng-template cTemplateId=”accordionHeaderTemplate”>

<button cAccordionButton (click)=”item0.toggleItem()” [collapsed]=”!item0.visible” data-comp-id=”accordion-item-header.2″>

それぞれのアコーディオンアイテムの赤文字の数値をユニークにすることで各アコーディオンアイテムが独立して動くようになります。

アコーディオンコンテナは以下のプロパティがあります。

プロパティ	内容
Accordion Item Id	識別用のコードです。HTML 内で “id” の値として定義されます。
Fluid	可変幅のコンテナ(ウィンドウサイズを変えても常に画面いっぱいに広がる)を指定します。ここにチェックを入れると幅が 100% になります。
Class	任意のクラスを定義することができます。

アコーディオンアイテムは以下のプロパティがあります。

プロパティ	内容
Accordion Id	識別用のコードです。HTML 内で “id” の値として定義されます。
Accordion Item Ref #	アコーディオンコンテナに上で配置されるアイテムの識別値です。項目を複数配置する場合は、この値がユニークになるように設定してください。上記の赤文字部分に反映されます。
Fluid	可変幅のコンテナ(ウィンドウサイズを変えても常に画面いっぱいに広がる)を指定します。ここにチェックを入れると幅が 100% になります。
Visible	デフォルトでコンテナを表示させるかどうか指定します。
Class	任意のクラスを定義することができます。

アコーディオンアイテムヘッダは以下のプロパティがあります。

プロパティ	内容
Data	Magic プログラムで定義された［ボタン］コントロールを指定します。歯車ボタンをクリックするとコントロール一覧が表示されます。ここから選択することができます。
Id	識別用のコードです。HTML 内で “id” の値として定義されます。［アウトライン］タブ上で表示されます。
Non Magic Control	Magic xpa のコントロールではないが、操作したことをMagicエンジンに通知する必要がある場合に設定します。前のコンポーネントがMagicコントロールであった場合、そのコンポーネントからフォーカスを移した時に［コントロール後／コントロール検証／項目更新］のロジックユニットが実行されるようになります。 ⁂［Data］にコントロールが設定されている場合、このプロパティは機能しません。
Disabled	ボタンの機能を無効にする場合に指定します。空白以外を指定すると無効になります。歯車ボタンをクリックするとダイログが表示されます。ここで、表示するテキストを入力したり、Angular関数を選択することができます。
Label	ボタンに表示するテキストを指定します。歯車ボタンをクリックするとダイログが表示されます。ここで、表示するテキストを入力したり、Angular関数を選択することができます。
Label Type	ボタンのラベルタイプを指定します。以下から指定できます。 Label Only …… テキストのみ Label and Icon …… テキストとアイコン Icon Only …… アイコンのみ
icon	表示するアイコンを指定します。歯車ボタンをクリックするとダイログが表示されます。ここで、表示するアイコンを選択することができます。
Icon Color	アイコンの色を指定します。以下から指定できます。 Default Red Green Blue
Label Color	ボタンのラベルの色を指定します。以下から指定できます。 Default Red Green Blue
Class	任意のクラスを定義することができます。

アコーディオン

アコーディオンコンテナ

アコーディオンコンテナの使い所

FAQセクション

製品詳細情報

サービス説明

アコーディオンアイテム

アコーディオンアイテムの使い所

トピックの詳細表示

アコーディオン