ここでは、レスポンシブアプリケーションでメニューを表示する方法について説明します。
RWD では、メニューを表示するスペースが十分あるワイド画面の場合、Web ページの左側または右側にメニューが表示されます。しかし、小さな画面 (携帯電話の画面など) では、Web ページのコンテンツとメニューを一緒に表示するのが難しい場合があります。
そのため、極小サイズの画面 (768 ピクセル未満) では、ボタンまたは画像を使用し、ページに表示されている内容に重ねて、画面の片側にメニューをスムースに表示させることができます。メニューオプションを選択すると、メニューは非表示になり、ユーザーの選択内容に応じてページの情報が表示されます。
メニューを表示するボタンと非表示にするボタンは同じです。
GeneXus Web ラボラトリーの例では、ワイド画面の場合、画面の左側にメニューが表示されています:
携帯電話の画面で Web ページを表示する場合、ユーザーがメニューを呼び出すためのボタンが画面の右上隅にあります。
ユーザーがそのボタンをクリックすると、ページのコンテンツに重なって、左側にメニューが表示されます:
Work With for Web パターンを使用すると、多くのフィルタオプションがあるオブジェクトリストについて、この解決策を活用できます。
フィルタや並べ替えの条件を含む既定のプロンプトについても同様です。
次の例は、
LightCRM ナレッジベースの Meeting トランザクション用に自動生成されるプロンプトです。
このプロンプトの
抽象レイアウトは次の図のようになります。
次の点に注目してください:
1.右側の "FiltersContainer" という名前の
レスポンシブテーブルには、選択リスト用のさまざまなフィルタが含まれています。
FiltersContainer テーブルは、既定では小サイズおよびそれ以上の画面サイズのデバイス (768 ピクセル以上) にのみ表示されます。極小サイズの画面のデバイス (携帯電話など) には表示されません。
携帯電話の場合、ユーザーは "切り替え" ボタンを使用して FltersContainer テーブルを表示できます。
したがって、切り替えボタンは極小サイズの画面にのみ表示されます。
次の図は、この動作を実現するための
[ Responsive Sizes ] プロパティの設定方法を示しています。
2.次のコードは、クリックイベントの "Toggle" に関連付けられます:
Event 'Toggle'
if FiltersContainer.Class = StyleClass:filters-container
FiltersContainer.Class = StyleClass:filters-container + !" " + StyleClass:filters-container--visible
GridCell.Class = StyleClass:ww__grid-cell + " col-xs-12 col-sm-9 col-md-10"
BtnToggle.Class = StyleClass:ww__button-filters--hide
BtnToggle.Caption = "Hide Filters"
BtnToggle.TooltipText = "Hide Filters"
else
FiltersContainer.Class = StyleClass:filters-container
GridCell.Class = StyleClass:ww__grid-cell--expanded + " col-xs-12 col-sm-3 col-md-2"
BtnToggle.Class = StyleClass:ww__button-filters--show
BtnToggle.Caption = "Show Filters"
BtnToggle.TooltipText = "Show Filters"
endif
EndEvent
切り替えボタンのクラスが FiltersContainerの場合、FiltersContainer テーブルのクラスのリストに FiltersContainerVisible
クラスが追加されます。
クラスが FiltersContainerVisible の場合は、FiltersContainer クラスがそのクラスに関連付けられます。
これにより、ボタンをクリックするとテーブルの表示と非表示が切り替わります。
FiltersContainerVisible クラスと FiltersContainer クラスは事前定義されているクラスであり、Table クラスの子孫です。
基本的に、FiltersContainerVisible クラスと FiltersContainer クラスのプロパティは次のようになります:
.FiltersContainerVisible {
display: inherit;
}
.filters-container, .filters-container--visible {
visibility: hidden;
opacity: 0;
padding-left: 20px;
padding-right: 20px;
position: absolute;
right: -15px;
background-color: $colors.surface;
width: 100%;
}
.FiltersContainer {
display: none;
background: $colors.surface;
padding: $spacing.inset-m;
border: solid $borders.extra-small;
box-shadow: $shadows.m;
}
さらに、FiltersContainer レスポンシブテーブルでは [ Cell Class ] プロパティが "PromptAdvancedBarCell" に設定されています。このクラスの設定は次のとおりです:
.PromptAdvancedBarCell {
border-right-width: 1px;
border-right-style: solid;
border-right-color: $colors.gray01;
}
注:
- この例をカスタマイズする場合は、 [ left ] プロパティ、および FiltersContainerVisible クラスの [ z-Index ] CSS プロパティの設定の調整が必要になる場合があります。
- CSS トランジションはカスタムプロパティとして定義されます。
LightCRM は、すべての Web トランザクションに適用される WW パターンが含まれるサンプルのナレッジベースです。フィルタや並べ替えの条件を含むプロンプトは、画面のサイズに応じてメニューの表示が異なる例です。
レスポンシブ Web アプリケーションの見た目
Web 用アクショングループのコントロール
レスポンシブ Web アプリケーション