summaryrefslogtreecommitdiffstats
path: root/server
diff options
context:
space:
mode:
authorMarc Englund <marc@vaadin.com>2015-09-28 14:11:07 +0300
committerVaadin Code Review <review@vaadin.com>2016-10-17 12:32:29 +0000
commit53f990042418c66939292189879c296a85b654dd (patch)
treee19a2a913df7da154306b7cbff0cbfa8533b39f6 /server
parentb49b8c2fc5112c21aaf4d3562bdbfa8eb3fee9a9 (diff)
downloadvaadin-framework-53f990042418c66939292189879c296a85b654dd.tar.gz
vaadin-framework-53f990042418c66939292189879c296a85b654dd.zip
Add "valo-menu-hover" stylename to make responsive menu appear w/o adding code (#19019)
Adding the optional "valo-menu-hover" style to the "valo-menu" element will make the menu appear on hover - i.e when mousing over on desktop, when tapping on touch devices (which also triggers hover). Change-Id: I4ee83cdd0e4198e02782cfcda945193305c41152
Diffstat (limited to 'server')
-rw-r--r--server/src/main/java/com/vaadin/ui/themes/ValoTheme.java26
1 files changed, 23 insertions, 3 deletions
diff --git a/server/src/main/java/com/vaadin/ui/themes/ValoTheme.java b/server/src/main/java/com/vaadin/ui/themes/ValoTheme.java
index a808996206..df9621bf27 100644
--- a/server/src/main/java/com/vaadin/ui/themes/ValoTheme.java
+++ b/server/src/main/java/com/vaadin/ui/themes/ValoTheme.java
@@ -1032,15 +1032,13 @@ public class ValoTheme {
* Set the <em><b>primary</b></em> style name of a Label or a Button to this
* style name to create an application logo. The logo is designed to be
* placed inside a {@link #MENU_PART} layout.
- * </p>
*
* <p>
* The text content of the logo should be very short, since the logo area
* only shows approximately three letters. Using one of the
* {@link FontAwesome} icons is a good way to quickly create a logo for your
* application.
- * </p>
- * </p>
+ * <p>
*
* <h4>Example</h4>
*
@@ -1052,4 +1050,26 @@ public class ValoTheme {
*/
public static final String MENU_LOGO = "valo-menu-logo";
+ /**
+ * Add this style name to your {@link #UI_WITH_MENU responsive}
+ * {@link #MENU_ROOT valo menu} element to make it appear automatically on
+ * hover - without adding any code.
+ * <p>
+ * The menu will appear on mouse over on desktop, or when tapping on touch
+ * devices.
+ * <p>
+ * <h4>Example</h4>
+ *
+ * <pre>
+ * HorizontalLayout menu = new HorizontalLayout();
+ * Responsive.makeResponsive(menu);
+ * menu.addStyleName(ValoTheme.UI_WITH_MENU);
+ *
+ * CssLayout menuArea = new CssLayout();
+ * menuArea.setPrimaryStyleName(ValoTheme.MENU_ROOT);
+ * menuArea.addStyleName(ValoTheme.MENU_APPEAR_ON_HOVER);
+ * menu.addComponent(menuArea);
+ * </pre>
+ */
+ public static final String MENU_APPEAR_ON_HOVER = "valo-menu-hover";
}