Skip to main content

 

 

 

 

Template:OutSystems/Documentation_KB/Breadcrumb_New_Layout

 

 

Template:OutSystems/OSLanguageSwitcher

 

Applies only to Traditional Web Apps

 

 

OutSystems

ResponsiveTable

論理的な整理された方法で情報を表示します。

ResponsiveTableは、スキャンや読み取りを行いやすい論理的な整理された方法で情報を表示するために使用します。エンドユーザーが情報の表示をカスタマイズできるように、ソートなどのインタラクションを許可する必要があります。

使用方法

  1. ResponsiveTableパターンをプレビューにドラッグします。

  2. 変更するTableウィジェットを[Content]プレースホルダにドラッグします。

  3. 必須の値を設定します。

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

入力パラメータ

入力名 説明 必須 デフォルト値
ResponsiveBehavior TableRecordsのレスポンシブ動作。 ResponsiveTableRecords Identifier Yes なし

レイアウトおよびクラス

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の矢印の色を変更する

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

  1. 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;
}
  1. 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?