Documentation

Trace:

Differences

This shows you the differences between two versions of the page.

Link to this comparison view

Both sides previous revision Previous revision
vaadin:responsive [2018/02/06 12:53]
admin
vaadin:responsive [2020/07/03 19:05] (current)
cduncan Edited for English grammar (capitalization, punctuation, correct verb conjugation)
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>
Line 37: Line 37:
 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.
This website uses cookies for visitor traffic analysis. By using the website, you agree with storing the cookies on your computer.More information