Layout Side Menu
横にメニューがあるカスタムレイアウトです。
ナビゲーションが複雑なアプリケーションの場合に便利で、横の領域を使用してアプリケーションを効率化することができます。
使用方法
プレースホルダに必要なコンテンツを入力します。
入力パラメータ
| 入力名 | 説明 | 型 | 必須 | デフォルト値 |
|---|---|---|---|---|
| ExtendedClass | このブロックにカスタムスタイルクラスを追加します。Text | False | なし | |
| DeviceConfiguration | アプリケーションがスマホ、タブレット、デスクトップで表示されるときに設定されるデフォルト値を変更するための構成。 | DeviceConfig | False | なし |
レイアウトおよびクラス
レスポンシブ動作
このレイアウトには、デフォルトのレスポンシブ動作が含まれています。タブレットは、デスクトップと同じ動作です。しかし、スマホではコンテンツが縦に分割され、［Title］プレースホルダと［Actions］プレースホルダが全幅になります。
モバイルの場合もメニューが調整され、ナビゲーションサイドバーが非表示になり、ハンバーガーアイコンでこれを切り替えることができます。
高度な設定
以下にウィジェットの高度なユースケースをいくつか示します。
レスポンシブなブレークポイントをカスタマイズする
- Common Webフローに移動します。
- レイアウトをダブルクリックしてWidget Treeを開きます。
- LayoutTopMenuパラメータに移動します。
- DeviceConfigurationの「プラスアイコン」を切り替えます。
- カスタムブレークポイント（ピクセル単位）を設定します。以下の例では、デバイス幅が200pxのときにのみ、スマホのブレークポイントが設定されます。
-
パブリッシュしてテストします。
コンテンツの最大幅をカスタマイズする
- Themesに移動します。
- ［Grid］セクションのMax. Widthパラメータでカスタム幅（デフォルト値は1280px）を設定します。
-
パブリッシュしてテストします。
デバイスの互換性
Internet Explorerで「position: sticky」の代わりに「position: fixed」を使用する固有のCSSを作成しました。これは、「sticky」がInternet Explorerではサポートされていないためです。
注記
Internet Explorer 10および11で、ポリフィルCSS変数の読み込み時間の遅さによって発生するちらつきの原因となる特定の動作をいくつか追加しました。JavaScriptエラーがあった場合、これによって画面が白く表示されます。
この動作を上書きするには、CSSテーマに以下のコードスニペットを追加します。
.ie10,
.ie11 {
display: block;
}