Skip to main content

 

 

 

 

Template:OutSystems/Documentation_KB/Breadcrumb_New_Layout

 

 

Template:OutSystems/OSLanguageSwitcher

 

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

 

 

OutSystems

Responsive Tableのリファレンス

レイアウトおよびクラス

CSSセレクタ

要素 CSSクラス 説明
.table-records-responsive .table-records-responsive.scrollable-row ResponsiveBehaviorパラメータがscrollableに設定されている場合
.table-records-responsive .table-records-responsive.expandable-row ResponsiveBehaviorパラメータがexpandableに設定されている場合
table tbody tr .TableRecords_ExpandedRow expandable-rowオプションを使用する場合に、行が展開されるタイミングを示します

高度なユースケース

ResponsiveBehaviorパラメータをデバイスに応じて変更する

  1. ResponsiveTableパターンをページにドラッグします。

  2. ResponsiveBehaviourパラメータを「If(IsPhone(), Entities.ResponsiveTableRecords.ExpandableRows, Entities.ResponsiveTableRecords.ScrollabeRows)」に設定します。

    IsPhoneサーバーアクションを条件として使用し、スマホ用のプロパティを設定します。必要に応じて、IsTabletアクションを使用することやFalse文とTrue文を逆にすることもできます。

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

expandable-rowの矢印の色を変更する

これを実装するには、以下のいずれかの方法を使用できます。

  • CSSエディタで以下のCSSを記述し、yourcolorを変更します。
.tablet.portrait .expandable-row .TableRecords tbody tr td:first-child:after,
.phone .expandable-row .TableRecords tbody tr td:first-child:after {
    color: yourcolor;
}

*var(--color-yourcolor)などのCSS変数を使用します。

.tablet.portrait .expandable-row .TableRecords tbody tr td:first-child:after,
.phone .expandable-row .TableRecords tbody tr td:first-child:after {
    color: var(--color-yourcolor);
}
  • Was this article helpful?