Trace:
Differences
This shows you the differences between two versions of the page.
| Next revision | Previous revision | ||
|
vaadin:responsive [2018/02/06 11:52] admin created |
vaadin:responsive [2020/08/05 12:42] cduncan |
||
|---|---|---|---|
| Line 1: | Line 1: | ||
| ~~NOTRANS~~ | ~~NOTRANS~~ | ||
| - | ~~Title: Responsive layout mode~~ | + | ~~Title: Responsive Layout Mode~~ |
| - | Our VaadinApp application frame has built-in responsive support. It changes padding/margin/font-size and menu position dynamically - based on the current browser or device size. | + | Our VaadinApp application frame has built-in responsive support. It changes padding/margin/font size and menu position dynamically - based on the current browser or device size. |
| If you want to know the current mode, simply check the launcher parameter **Application.config.layoutMode**. The value will be a string with following possible values: **Mini, Small, Full**. There is also an enum in WebMenu with the name LayoutMode. | If you want to know the current mode, simply check the launcher parameter **Application.config.layoutMode**. The value will be a string with following possible values: **Mini, Small, Full**. There is also an enum in WebMenu with the name LayoutMode. | ||
| - | The Mini mode is used on smartphones because it shows the application menu as small bar at the top of the browser. You can show or hide the menu items with a button. | + | The mini mode is used on smartphones because it shows the application menu as small bar at the top of the browser. You can show or hide the menu items with a button. |
| - | The Small mode hides the text and only shows icons if available. If no icon is available, a shortened text will be shown instead of the full text. | + | The small mode hides the text and only shows icons if available. If no icon is available, a shortened text will be shown instead of the full text. |
| - | The Full mode ist the standard mode for desktop browsers. | + | The full mode ist the standard mode for desktop browsers. |
| Line 27: | Line 27: | ||
| </file> | </file> | ||
| | | ||
| - | The VaadinApp also adds extra stylesheets to the menu and screen area, like small. | + | The VaadinApp also adds extra stylesheets to the menu and screen area. |
| <file html> | <file html> | ||
| - | <div class="v-verticallayout v-layout v-vertical v-widget useroptions v-verticallayout-useroptions small v-verticallayout-small shutter_p1_cc1 v-verticallayout-shutter_p1_cc1 v-has-width" id="Shutter_P1_CC1" style="width: 100%;"> | + | <div class="v-verticallayout v-layout v-vertical v-widget useroptions v-verticallayout-useroptions small |
| + | v-verticallayout-small shutter_p1_cc1 v-verticallayout-shutter_p1_cc1 v-has-width" | ||
| + | id="Shutter_P1_CC1" style="width: 100%;"> | ||
| </file> | </file> | ||
| This style information could help you to create a unique user experience. | This style information could help you to create a unique user experience. | ||
| - | Simply check the style information in different layout modes, with Developer tools of your browser. | + | Simply check the style information in different layout modes with developer tools of your browser. |