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); }