Layout Top Menu
メニューが上部に固定されたカスタムレイアウトです。
ナビゲーション構造が複雑ではない単純なアプリケーションの場合に便利です。
使用方法
プレースホルダに必要なコンテンツを入力します。
入力パラメータ
入力名 | 説明 | 型 | 必須 | デフォルト値 |
---|---|---|---|---|
ExtendedClass | このブロックにカスタムスタイルクラスを追加します。 | Text | False | なし |
DeviceConfiguration | アプリケーションがスマホ、タブレット、デスクトップで表示されるときに設定されるデフォルト値を変更するための構成。 | DeviceConfig | False | なし |
レイアウトおよびクラス
レスポンシブ動作
このレイアウトには、デフォルトのレスポンシブ動作が含まれています。タブレットは、デスクトップと同じ動作です。しかし、スマホではコンテンツが縦に分割され、[Title]プレースホルダと[Actions]プレースホルダが全幅になります。
モバイルの場合もメニューが調整され、ナビゲーションがサイドバーに移動し、ハンバーガーアイコンでこれを切り替えることができます。
モバイル端末およびタブレットの場合:
高度な設定
以下にウィジェットの高度なユースケースをいくつか示します。
レスポンシブなブレークポイントをカスタマイズする
- Commonフローに移動します。
- レイアウトをダブルクリックして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; }