最近のアクセス:
ページ
履歴
バックリンク
抽象エディターを使用する方法: レスポンシブテーブル内のセルの非表示
レスポンシブ Web アプリケーション
では、
レスポンシブテーブル
の列が固定されず、画面のサイズに応じて変わる可能性があります。
たとえば、スマートフォンの画面では 1 列しか表示できませんが、タブレットやデスクトップでは、より多くの情報をユーザーへ表示できます。
この設定は、
Web 抽象エディター
を使用して行うことができます。Web 抽象エディターは、レスポンシブテーブルの
[ Responsive Sizes ] プロパティ (X Evolution 3)
から開くことができます。
例
次の例について検討してみましょう。携帯電話の画面に表示されるのは 1 つの列のみです。タブレットおよびデスクトップの画面には、2 つの列がユーザーへ表示されます。
左側のメニューが表示されるのは、画面サイズが極小でない場合のみです。
このような設計を行うにはどうすればよいでしょうか。
レスポンシブテーブルのプロパティの [ Responsive Sizes ] ボタンをクリックすると設定できます。
画面サイズは [ サイズ ] コンボボックスで選択します。非表示にする列に属するセルを選択する場合は、 [ 表示 ] を設定する必要があります。
この場合、次の図に示すように、 [ 極小 ] サイズについてのみ設定を使用できます:
この例では、グリッドを使用してメニューが表示され、極小サイズのデバイスではメニューが非表示になるように設定されます。
小サイズの画面やワイドスクリーンの場合は、 [ 表示 ] を True に設定する必要があります。このように設定しないと、小さい方のサイズから値が継承されます。
参考情報
レスポンシブ Web アプリケーションを設計する方法: フォーム内のエレメントの非表示
レスポンシブ Web アプリケーションを設計する方法: グリッド内の列の非表示
RWA でのレイアウトの調整