Skip to main content

 

 

 

 
Language:
 
モバイルアプリとリアクティブWebアプリにのみ適用されます
Service Studioバージョン :
 
 
OutSystems

アコーディオン

Accordion UIパターンを使用すると、ユーザーがコンテンツをクリックして展開したり非表示にしたりすることができます。

Accordion UIパターンの使用方法

  1. Service StudioのツールボックスでAccordionを検索します。

    Accordionウィジェットが表示されます。

  2. ツールボックスから、Accordionウィジェットをアプリケーション画面のメインコンテンツ領域にドラッグします。

    注記: デフォルトで、Accordionウィジェットには3つのAccordion Itemウィジェットが含まれています。必要に応じてAccordion Itemを追加または削除することができます。

  3. 関連するコンテンツを[Accordion Item]プレースホルダに追加します。この例では、FAQを追加しています。

  4. Properties]タブで(オプションの)プロパティを設定し、Accordionのルックアンドフィールをカスタマイズできます。

これらの手順を実行してモジュールをパブリッシュした後、アプリでパターンをテストできます。

プロパティ

アコーディオン

プロパティ 説明
MultipleItems (Boolean型): オプション Trueに設定すると、複数のAccordion Itemを同時に開くことができます。Falseに設定すると、一度に1つのAccordion Itemのみを開くことができます。これがデフォルト値です。
ExtendedClass(Text型): オプション Accordion UIパターンにカスタムスタイルクラスを追加します。CSSを使用して、アプリケーションのカスタムスタイルクラスを定義します。



  • 空白 - カスタムスタイルを追加しません(デフォルト値)。
  • "myclass" - 適用されるAccordion UIのスタイルに_myclass_というスタイルを追加します。
  • "myclass1" "myclass2" - 適用されるAccordion UIのスタイルに_myclass1_というスタイルと_myclass2_というスタイルを追加します。

アコーディオンアイテム

プロパティ 説明
IsExpanded(Boolean型): オプション Trueに設定すると、描画時にAccordion Itemを開きます。Falseに設定すると、Accordion Itemを閉じます。これがデフォルト値です。
UsePadding(Boolean型): オプション Trueに設定すると、コンテンツ領域にパディングが適用されます。これがデフォルト値です。Falseに設定すると、コンテンツ領域にはパディングが適用されません。
IsDisabled(Boolean型): オプション Trueに設定すると、Accordion Itemをクリックできません。Falseに設定すると、Accordion Itemをクリックできます。これがデフォルト値です。
ExtendedClass(Text型): オプション Accordion Item UIパターンにカスタムスタイルクラスを追加します。CSSを使用して、アプリケーションのカスタムスタイルクラスを定義します。



  • 空白 - カスタムスタイルを追加しません(デフォルト値)。
  • "myclass" - 適用されるAccordion Item UIのスタイルに_myclass_というスタイルを追加します。
  • "myclass1" "myclass2" - 適用されるAccordion Item UIのスタイルに_myclass1_というスタイルと_myclass2_というスタイルを追加します。
  • Was this article helpful?