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パラメータをデバイスに応じて変更する
-
ResponsiveTableパターンをページにドラッグします。
-
ResponsiveBehaviourパラメータを「
If(IsPhone(), Entities.ResponsiveTableRecords.ExpandableRows, Entities.ResponsiveTableRecords.ScrollabeRows)」に設定します。IsPhoneサーバーアクションを条件として使用し、スマホ用のプロパティを設定します。必要に応じて、IsTabletアクションを使用することやFalse文とTrue文を逆にすることもできます。
-
パブリッシュしてテストします。
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);
}