Skip to main content

 

 

 

 
Language:

 

 
従来のWebアプリにのみ適用されます

 

 
 
OutSystems

Layout Side Menuのリファレンス

レイアウトおよびクラス

レスポンシブ動作

このレイアウトには、デフォルトのレスポンシブ動作が含まれています。タブレットは、デスクトップと同じ動作です。しかし、スマホではコンテンツが縦に分割され、[Title]プレースホルダと[Actions]プレースホルダが全幅になります。

モバイルの場合もメニューが調整され、ナビゲーションサイドバーが非表示になり、ハンバーガーアイコンでこれを切り替えることができます。

高度な設定

以下にウィジェットの高度なユースケースをいくつか示します。

レスポンシブなブレークポイントをカスタマイズする

1.Common Webフローに移動します。 1.レイアウトをダブルクリックしてWidget Treeを開きます。 1.LayoutTopMenuパラメータに移動します。 1.DeviceConfigurationの「プラスアイコン」を切り替えます。 1.カスタムブレークポイント(ピクセル単位)を設定します。以下の例では、デバイス幅が200pxのときにのみ、スマホのブレークポイントが設定されます。 1.パブリッシュしてテストします。

コンテンツの最大幅をカスタマイズする

1.Themesに移動します。 1.[Grid]セクションのMax. Widthパラメータでカスタム幅(デフォルト値は1280px)を設定します。 1.パブリッシュしてテストします。

デバイスの互換性

Internet Explorerで「position: sticky」の代わりに「position: fixed」を使用する固有のCSSを作成しました。これは、「sticky」がInternet Explorerではサポートされていないためです。

注記

Internet Explorer 10および11で、ポリフィルCSS変数の読み込み時間の遅さによって発生するちらつきの原因となる特定の動作をいくつか追加しました。JavaScriptエラーがあった場合、これによって画面が白く表示されます。

この動作を上書きするには、CSSテーマに以下のコードスニペットを追加します。

.ie10, .ie11 {
    display: block;
}
  • Was this article helpful?