Skip to main content

 

 

 

 

Template:OutSystems/Documentation_KB/Breadcrumb_New_Layout

 

 

Template:OutSystems/OSLanguageSwitcher

 

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

 

 

OutSystems

Accordionのリファレンス

レイアウトおよびクラス

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?