アコーディオン
Accordion UIパターンを使用すると、ユーザーがコンテンツをクリックして展開したり非表示にしたりすることができます。
Accordion UIパターンの使用方法
-
Service Studioのツールボックスで
Accordion
を検索します。Accordionウィジェットが表示されます。
-
ツールボックスから、Accordionウィジェットをアプリケーション画面のメインコンテンツ領域にドラッグします。
注記: デフォルトで、Accordionウィジェットには3つのAccordion Itemウィジェットが含まれています。必要に応じてAccordion Itemを追加または削除することができます。
-
関連するコンテンツ(例: FAQ)を[Accordion Item]プレースホルダに追加します。
-
これらの手順を実行してモジュールをパブリッシュした後、アプリでパターンをテストできます。
デモ
プロパティ
アコーディオン
プロパティ | 説明 |
---|---|
MultipleItems (Boolean型): オプション | Trueに設定すると、複数のAccordion Itemを同時に開くことができます。Falseに設定すると、一度に1つのAccordion Itemのみを開くことができます。これがデフォルト値です。 |
ExtendedClass(Text型):オプション | Accordion UIパターンにカスタムスタイルクラスを追加します。CSSを使用して、アプリケーションのカスタムスタイルクラスを定義します。 例
|
アコーディオンアイテム
プロパティ | 説明 |
---|---|
IsOpen(Boolean型):オプション | Trueに設定すると、描画時にAccordion Itemを開きます。Falseに設定すると、Accordion Itemを閉じます。これがデフォルト値です。 |
IsDisable(Boolean型):オプション | Trueに設定すると、Accordion Itemをクリックできません。Falseに設定すると、Accordion Itemをクリックできます。これがデフォルト値です。 |
ExtendedClass(Text型):オプション | Accordion Item UIパターンにカスタムスタイルクラスを追加します。CSSを使用して、アプリケーションのカスタムスタイルクラスを定義します。 例
|