Skip to main content

 

 

 

 

Template:OutSystems/Documentation_KB/Breadcrumb_New_Layout

 

 

Template:OutSystems/OSLanguageSwitcher

 

Applies only to Traditional Web Apps

 

 

OutSystems

アコーディオン

ヘッダーをクリックすることにより、上下に階層化されたコンテンツを展開します。

Accordionは、最初にコンテンツの一部を表示し、コンテンツを展開すると詳細が表示されるようにして情報を整理する必要がある場合に使用します。

使用方法

画面にアコーディオンブロックを追加します。次に、ブロック内にアコーディオンアイテムを追加してコンテンツを作成します。

  1. アコーディオンをプレビューにドラッグします。
  2. 必要な数のアコーディオンアイテムをドラッグします。
  3. プレースホルダに必要なコンテンツを設定します。

  4. パブリッシュしてテストします。

デモ

入力パラメータ

アコーディオン

入力名 説明 必須 デフォルト値
MultipleItems 複数のアコーディオンアイテムを開き、Section Expandableの効果を持たせることができます。 Boolean False False
ExtendedClass このブロックにカスタムスタイルクラスを追加します。Text False なし

アコーディオンアイテム

入力名 説明 必須 デフォルト値
IsOpen Trueの場合、描画時にアコーディオンアイテムが開きます。 Boolean False False
IsDisable アコーディオンアイテムをクリックできないようにします。 Boolean False False
ExtendedClass このブロックにカスタムスタイルクラスを追加します。Text False なし

レイアウトおよびクラス

CSSセレクタ

要素 CSSクラス 説明
.accordion-item .accordion-item.is--open AccordionItemが開いている場合
.accordion-item accordion-item-content.is--expanded AccordionItemが開いている場合
.accordion-item .accordion-item.is--closed AccordionItemが閉じている場合
.accordion-item accordion-item-content.is--collapsed AccordionItemが閉じている場合
.accordion-item .accordion-item.is--disabled IsDisabledパラメータがTrueの場合

高度なユースケース

ListRecordsを持つアコーディオンを使用する

  1. Accordionパターンをプレビューにドラッグします。
  2. [Content]プレースホルダに、ListRecordsウィジェットをドラッグします。
  3. ListRecordsウィジェットに、AccordionItemパターンをドラッグします。
  4. AccordionItemパターンで、Expressionを使用して必要なデータベースコンテンツを表示します。
  5. パブリッシュしてテストします。

矢印の位置を左に変更する

カスタムCSSを使用して、AccordionItemの矢印の位置を変更することができます。これをアプリケーションで実行するには、CSSをコピーしてテーマ内に配置する必要があります。

.accordion-item .accordion-item-header {
    flex-direction: row-reverse;
}

.accordion-item .accordion-item-title {
    padding-left: var(--space-base);
}

アコーディオンアイテムの間にマージンを追加する

アコーディオンアイテムの間にマージンを追加するには、カスタムCSSを使用する必要があります。これをアプリケーションで実行するには、CSSをコピーしてテーマ内に配置する必要があります。

.accordion {
    background-color: transparent;
}

.accordion-item {
    background-color: var(--color-neutral-0);
    border-bottom-width: var(--border-size-s);
}

.accordion-item:not(:last-child) {
    margin-bottom: var(--space-base);
}

注記

ListRecordsのLine Separatorは[None]にする必要があります。

  • Was this article helpful?