Skip to main content

 

 

 

 

Template:OutSystems/Documentation_KB/Breadcrumb_New_Layout

 

 

Template:OutSystems/OSLanguageSwitcher

 

従来のWebアプリにのみ適用されます

 

 

OutSystems

アコーディオン

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

Accordion UIパターンの使用方法

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

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

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

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

  3. 関連するコンテンツ(例: FAQ)を[Accordion Item]プレースホルダに追加します。

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

デモ

プロパティ

アコーディオン

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



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

アコーディオンアイテム

プロパティ 説明
IsOpen(Boolean型):オプション Trueに設定すると、描画時にAccordion Itemを開きます。Falseに設定すると、Accordion Itemを閉じます。これがデフォルト値です。
IsDisable(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?