最近のアクセス:
抽象エディターを使用する方法: レスポンシブテーブル内のセルの非表示

レスポンシブ Web アプリケーションでは、レスポンシブテーブルの列が固定されず、画面のサイズに応じて変わる可能性があります。 
たとえば、スマートフォンの画面では 1 列しか表示できませんが、タブレットやデスクトップでは、より多くの情報をユーザーへ表示できます。
この設定は、Web 抽象エディターを使用して行うことができます。Web 抽象エディターは、レスポンシブテーブルの [ Responsive Sizes ] プロパティ (X Evolution 3) から開くことができます。

次の例について検討してみましょう。携帯電話の画面に表示されるのは 1 つの列のみです。タブレットおよびデスクトップの画面には、2 つの列がユーザーへ表示されます。
イメージ:25480.png
イメージ:25482.png

左側のメニューが表示されるのは、画面サイズが極小でない場合のみです。

このような設計を行うにはどうすればよいでしょうか。

レスポンシブテーブルのプロパティの [ Responsive Sizes ] ボタンをクリックすると設定できます。 
画面サイズは [ サイズ ] コンボボックスで選択します。非表示にする列に属するセルを選択する場合は、 [ 表示 ] を設定する必要があります。
この場合、次の図に示すように、 [ 極小 ] サイズについてのみ設定を使用できます:
イメージ:25483.png
この例では、グリッドを使用してメニューが表示され、極小サイズのデバイスではメニューが非表示になるように設定されます。
小サイズの画面やワイドスクリーンの場合は、 [ 表示 ] を True に設定する必要があります。このように設定しないと、小さい方のサイズから値が継承されます。
イメージ:25484.png

参考情報

レスポンシブ Web アプリケーションを設計する方法: フォーム内のエレメントの非表示
レスポンシブ Web アプリケーションを設計する方法: グリッド内の列の非表示
RWA でのレイアウトの調整







サブページ
Created: 15/01/07 22:50 by Admin Last update: 21/05/21 03:34 by Admin
カテゴリ
Powered by GXwiki 3.0