com.vaadin.ui.themes.ValoTheme Maven / Gradle / Ivy
/*
* Copyright (C) 2000-2024 Vaadin Ltd
*
* This program is available under Vaadin Commercial License and Service Terms.
*
* See for the full
* license.
*/
package com.vaadin.ui.themes;
import com.vaadin.icons.VaadinIcons;
import com.vaadin.navigator.Navigator;
import com.vaadin.ui.Button;
import com.vaadin.ui.VerticalLayout;
import com.vaadin.ui.Notification.Type;
/**
*
* Additional style names which can be used with the Valo theme.
*
*
*
* These styles are only available if the
* $v-included-additional-styles Sass list variable contains the
* name of the component for that additional style name (e.g.
* button, textfield, table).
*
*
*
* Most of these additional style names can be included individually into your
* custom theme using the component specific Sass mixins, in which case you can
* also define the style names yourself. See the Valo theme Sass API
* documentation for additional information.
*
*
* TODO link to Sass API documentation
*
* @since 7.3
* @author Vaadin Ltd
*/
public class ValoTheme {
public static final String THEME_NAME = "valo";
/***************************************************************************
*
* Notification styles
*
**************************************************************************/
/**
* Styles the notification to look like {@link Type#TRAY_NOTIFICATION},
* without setting the position and delay. Can be combined with any other
* Notification style.
*/
public static final String NOTIFICATION_TRAY = "tray";
/**
* Styles the notification to look like {@link Type#WARNING_MESSAGE},
* without setting the position and delay. Can be combined with any other
* Notification style.
*/
public static final String NOTIFICATION_WARNING = "warning";
/**
* Styles the notification to look like {@link Type#ERROR_MESSAGE}, without
* setting the position and delay. Can be combined with any other
* Notification style.
*/
public static final String NOTIFICATION_ERROR = "error";
/**
* Styles the notification to look like a system notification. Can be
* combined with any other Notification style.
*/
public static final String NOTIFICATION_SYSTEM = "system";
/**
* Styles the notification to span the entire width of the viewport. Can be
* combined with any other Notification style.
*/
public static final String NOTIFICATION_BAR = "bar";
/**
* Smaller padding and font size for the notification. Can be combined with
* any other Notification style.
*/
public static final String NOTIFICATION_SMALL = "small";
/**
* Adds a close button to the notification to imply that the user must click
* on the notification to dismiss it. Use in combination with an infinite
* delay (-1). Can be combined with any other Notification
* style.
*/
public static final String NOTIFICATION_CLOSABLE = "closable";
/**
* Success notification style. Adds a border around the notification and an
* icon next to the title. Can be combined with any other Notification
* style.
*/
public static final String NOTIFICATION_SUCCESS = "success";
/**
* Failure notification style. Adds a border around the notification and an
* icon next to the title. Can be combined with any other Notification
* style.
*/
public static final String NOTIFICATION_FAILURE = "failure";
/**
* Styles the notification to look like {@link Type#ERROR_MESSAGE}, without
* setting the position and delay and without the close button. Can be
* combined with any other Notification style.
*/
public static final String NOTIFICATION_CRITICAL_ERROR = "critical-error";
/**
* Styles the notification to be dark variant. Can be combined with any
* other Notification style.
*/
public static final String NOTIFICATION_DARK = "dark";
/***************************************************************************
*
* Label styles
*
**************************************************************************/
/**
* Header style for main application headings. Can be combined with any
* other Label style.
*/
public static final String LABEL_H1 = "h1";
/**
* Header style for different sections in the application. Can be combined
* with any other Label style.
*/
public static final String LABEL_H2 = "h2";
/**
* Header style for different sub-sections in the application. Can be
* combined with any other Label style.
*/
public static final String LABEL_H3 = "h3";
/**
* Header style for different sub-sections in the application. Can be
* combined with any other Label style.
*/
public static final String LABEL_H4 = "h4";
/**
* A utility style that can be combined with the {@link #LABEL_H1},
* {@link #LABEL_H2}, {@link #LABEL_H3} and {@link #LABEL_H4} styles to
* remove the default margins from the header.
*/
public static final String LABEL_NO_MARGIN = "no-margin";
/**
* Tiny font size. Suitable for additional/supplementary UI text. Can be
* combined with any other Label style.
*/
public static final String LABEL_TINY = "tiny";
/**
* Small font size. Suitable for additional/supplementary UI text. Can be
* combined with any other Label style.
*/
public static final String LABEL_SMALL = "small";
/**
* Large font size. Suitable for important/prominent UI text. Can be
* combined with any other Label style.
*/
public static final String LABEL_LARGE = "large";
/**
* Huge font size. Suitable for important/prominent UI text. Can be combined
* with any other Label style.
*/
public static final String LABEL_HUGE = "huge";
/**
* Lighter font weight. Suitable for additional/supplementary UI text. Can
* be combined with any other Label style.
*/
public static final String LABEL_LIGHT = "light";
/**
* Bolder font weight. Suitable for important/prominent UI text. Can be
* combined with any other Label style.
*/
public static final String LABEL_BOLD = "bold";
/**
* Colored text. Can be combined with any other Label style.
*/
public static final String LABEL_COLORED = "colored";
/**
* Success badge style. Adds a border around the label and an icon next to
* the text. Suitable for UI notifications that need to in the direct
* context of some component. Can be combined with any other Label style.
*/
public static final String LABEL_SUCCESS = "success";
/**
* Failure badge style. Adds a border around the label and an icon next to
* the text. Suitable for UI notifications that need to in the direct
* context of some component. Can be combined with any other Label style.
*/
public static final String LABEL_FAILURE = "failure";
/**
* Spinner style. Add this style name to an empty Label to create a spinner.
*
* Example:
*
*
*
* Label spinner = new Label();
* spinner.addStyleName(ValoTheme.LABEL_SPINNER);
*
*/
public static final String LABEL_SPINNER = "spinner";
/***************************************************************************
*
* Button styles
*
**************************************************************************/
/**
* Primary action button (e.g. the button that should get activated when the
* user presses the enter key in a form). Use sparingly, only
* one default button per view should be visible. Can be combined with any
* other Button style.
*/
public static final String BUTTON_PRIMARY = "primary";
/**
* A prominent button that can be used instead of the
* {@link #BUTTON_PRIMARY} for primary actions when the action is considered
* safe for the user (i.e. does not cause any data loss or any other
* irreversible action). Can be combined with any other Button style.
*/
public static final String BUTTON_FRIENDLY = "friendly";
/**
* A prominent button that can be used when the action is considered
* unsafe for the user (i.e. it causes data loss or some other
* irreversible action). Can be combined with any other Button style.
*/
public static final String BUTTON_DANGER = "danger";
/**
* Borderless button. Can be combined with any other Button style.
*/
public static final String BUTTON_BORDERLESS = "borderless";
/**
* Borderless button with a colored caption text. Can be combined with any
* other Button style.
*/
public static final String BUTTON_BORDERLESS_COLORED = "borderless-colored";
/**
* "Quiet" button, which looks like {@link #BUTTON_BORDERLESS} until you
* hover over it with the mouse. Can be combined with any other Button
* style.
*/
public static final String BUTTON_QUIET = "quiet";
/**
* Makes the button look like the Link component. Can be combined with any
* other Button style.
*/
public static final String BUTTON_LINK = "link";
/**
* Tiny size button. Can be combined with any other Button style.
*/
public static final String BUTTON_TINY = "tiny";
/**
* Small size button. Can be combined with any other Button style.
*/
public static final String BUTTON_SMALL = "small";
/**
* Large size button. Can be combined with any other Button style.
*/
public static final String BUTTON_LARGE = "large";
/**
* Huge size button. Can be combined with any other Button style.
*/
public static final String BUTTON_HUGE = "huge";
/**
* Align the icon to the right side of the button caption. Can be combined
* with any other Button style.
*/
public static final String BUTTON_ICON_ALIGN_RIGHT = "icon-align-right";
/**
* Stack the icon on top of the button caption. Can be combined with any
* other Button style.
*/
public static final String BUTTON_ICON_ALIGN_TOP = "icon-align-top";
/**
* Only show the icon in the button, and size the button to a square shape.
*/
public static final String BUTTON_ICON_ONLY = "icon-only";
/***************************************************************************
*
* Link styles
*
**************************************************************************/
/**
* Small size link.
*/
public static final String LINK_SMALL = "small";
/**
* Large size link.
*/
public static final String LINK_LARGE = "large";
/***************************************************************************
*
* TextField styles
*
**************************************************************************/
/**
* Tiny size text field. Can be combined with any other TextField style.
*/
public static final String TEXTFIELD_TINY = "tiny";
/**
* Small size text field. Can be combined with any other TextField style.
*/
public static final String TEXTFIELD_SMALL = "small";
/**
* Large size text field. Can be combined with any other TextField style.
*/
public static final String TEXTFIELD_LARGE = "large";
/**
* Huge size text field. Can be combined with any other TextField style.
*/
public static final String TEXTFIELD_HUGE = "huge";
/**
* Removes the border and background from the text field. Can be combined
* with any other TextField style.
*/
public static final String TEXTFIELD_BORDERLESS = "borderless";
/**
* Align the text inside the field to the right. Can be combined with any
* other TextField style.
*/
public static final String TEXTFIELD_ALIGN_RIGHT = "align-right";
/**
* Align the text inside the field to center. Can be combined with any other
* TextField style.
*/
public static final String TEXTFIELD_ALIGN_CENTER = "align-center";
/**
* Move the default caption icon inside the text field. Can be combined with
* any other TextField style.
*
* Note: Does not apply in FormLayout
*
* Note: TextFields with inlined icons in Grid header need to be wrapped
* into e.g. HorizontalLayout
*/
public static final String TEXTFIELD_INLINE_ICON = "inline-icon";
/***************************************************************************
*
* TextArea styles
*
**************************************************************************/
/**
* Tiny size text area. Can be combined with any other TextArea style.
*/
public static final String TEXTAREA_TINY = "tiny";
/**
* Small size text area. Can be combined with any other TextArea style.
*/
public static final String TEXTAREA_SMALL = "small";
/**
* Large size text area. Can be combined with any other TextArea style.
*/
public static final String TEXTAREA_LARGE = "large";
/**
* Huge size text area. Can be combined with any other TextArea style.
*/
public static final String TEXTAREA_HUGE = "huge";
/**
* Removes the border and background from the text area. Can be combined
* with any other TextArea style.
*/
public static final String TEXTAREA_BORDERLESS = "borderless";
/**
* Align the text inside the area to the right. Can be combined with any
* other TextArea style.
*/
public static final String TEXTAREA_ALIGN_RIGHT = "align-right";
/**
* Align the text inside the area to center. Can be combined with any other
* TextArea style.
*/
public static final String TEXTAREA_ALIGN_CENTER = "align-center";
/***************************************************************************
*
* DateField styles
*
**************************************************************************/
/**
* Tiny size date field. Can be combined with any other DateField style.
*/
public static final String DATEFIELD_TINY = "tiny";
/**
* Small size date field. Can be combined with any other DateField style.
*/
public static final String DATEFIELD_SMALL = "small";
/**
* Large size date field. Can be combined with any other DateField style.
*/
public static final String DATEFIELD_LARGE = "large";
/**
* Huge size date field. Can be combined with any other DateField style.
*/
public static final String DATEFIELD_HUGE = "huge";
/**
* Removes the border and background from the date field. Can be combined
* with any other DateField style.
*/
public static final String DATEFIELD_BORDERLESS = "borderless";
/**
* Align the text inside the field to the right. Can be combined with any
* other DateField style.
*/
public static final String DATEFIELD_ALIGN_RIGHT = "align-right";
/**
* Align the text inside the field to center. Can be combined with any other
* DateField style.
*/
public static final String DATEFIELD_ALIGN_CENTER = "align-center";
/***************************************************************************
*
* ComboBox styles
*
**************************************************************************/
/**
* Tiny size combo box. Can be combined with any other ComboBox style.
*/
public static final String COMBOBOX_TINY = "tiny";
/**
* Small size combo box. Can be combined with any other ComboBox style.
*/
public static final String COMBOBOX_SMALL = "small";
/**
* Large size combo box. Can be combined with any other ComboBox style.
*/
public static final String COMBOBOX_LARGE = "large";
/**
* Huge size combo box. Can be combined with any other ComboBox style.
*/
public static final String COMBOBOX_HUGE = "huge";
/**
* Removes the border and background from the combo box. Can be combined
* with any other ComboBox style.
*/
public static final String COMBOBOX_BORDERLESS = "borderless";
/**
* Align the text inside the combo box to the right. Can be combined with
* any other TextField style.
*/
public static final String COMBOBOX_ALIGN_RIGHT = "align-right";
/**
* Align the text inside the combo box to center. Can be combined with any
* other TextField style.
*/
public static final String COMBOBOX_ALIGN_CENTER = "align-center";
/***************************************************************************
*
* CheckBox styles
*
**************************************************************************/
/**
* Small size check box. Can be combined with any other CheckBox style.
*/
public static final String CHECKBOX_SMALL = "small";
/**
* Large size check box. Can be combined with any other CheckBox style.
*/
public static final String CHECKBOX_LARGE = "large";
/***************************************************************************
*
* RadioButtonGroup/CheckBoxGroup styles
*
**************************************************************************/
/**
* Small size option group. Can be combined with any other
* RadioButtonGroup/CheckBoxGroup style.
*/
public static final String OPTIONGROUP_SMALL = "small";
/**
* Large size option group. Can be combined with any other
* RadioButtonGroup/CheckBoxGroup style.
*/
public static final String OPTIONGROUP_LARGE = "large";
/**
* Display the options horizontally in a row (by default the items are
* stacked vertically).
*/
public static final String OPTIONGROUP_HORIZONTAL = "horizontal";
/***************************************************************************
*
* Slider styles
*
**************************************************************************/
/**
* Hide the indicator bar from the slider. Can be combined with any other
* Slider style.
*/
public static final String SLIDER_NO_INDICATOR = "no-indicator";
/***************************************************************************
*
* ProgressBar styles
*
**************************************************************************/
/**
* Make the progress bar indicator appear as a dot which progresses over the
* progress bar track (instead of a growing bar).
*/
public static final String PROGRESSBAR_POINT = "point";
/***************************************************************************
*
* MenuBar styles
*
**************************************************************************/
/**
* Small size menu bar. Can be combined with any other MenuBar style.
*/
public static final String MENUBAR_SMALL = "small";
/**
* Borderless menu bar. Can be combined with any other MenuBar style.
*/
public static final String MENUBAR_BORDERLESS = "borderless";
/***************************************************************************
*
* Table and TreeTable styles
*
**************************************************************************/
/**
* Remove the alternating row colors. Can be combined with any other
* Table/TreeTable style.
*/
public static final String TABLE_NO_STRIPES = "no-stripes";
/**
* See {@link #TABLE_NO_STRIPES}.
*/
public static final String TREETABLE_NO_STRIPES = TABLE_NO_STRIPES;
/**
* Remove the vertical divider lines between the table columns. Can be
* combined with any other Table/TreeTable style.
*/
public static final String TABLE_NO_VERTICAL_LINES = "no-vertical-lines";
/**
* See {@link #TABLE_NO_VERTICAL_LINES}.
*/
public static final String TREETABLE_NO_VERTICAL_LINES = TABLE_NO_VERTICAL_LINES;
/**
* Remove the horizontal divider lines between the table rows. Can be
* combined with any other Table/TreeTable style.
*/
public static final String TABLE_NO_HORIZONTAL_LINES = "no-horizontal-lines";
/**
* See {@link #TABLE_NO_HORIZONTAL_LINES}.
*/
public static final String TREETABLE_NO_HORIZONTAL_LINES = TABLE_NO_HORIZONTAL_LINES;
/**
* Hide the table column headers (effectively the same as
* {@code ColumnHeaderMode.HIDDEN}). Can be combined with any other
* Table/TreeTable style.
*/
public static final String TABLE_NO_HEADER = "no-header";
/**
* See {@link #TABLE_NO_HEADER}.
*/
public static final String TREETABLE_NO_HEADER = TABLE_NO_HEADER;
/**
* Remove the outer border of the table. Can be combined with any other
* Table/TreeTable style.
*/
public static final String TABLE_BORDERLESS = "borderless";
/**
* See {@link #TABLE_BORDERLESS}.
*/
public static final String TREETABLE_BORDERLESS = TABLE_BORDERLESS;
/**
* Reduce the white space inside the table cells. Can be combined with any
* other Table/TreeTable style.
*/
public static final String TABLE_COMPACT = "compact";
/**
* See {@link #TABLE_COMPACT}.
*/
public static final String TREETABLE_COMPACT = TABLE_COMPACT;
/**
* Small font size and reduced the white space inside the table cells. Can
* be combined with any other Table/TreeTable style.
*/
public static final String TABLE_SMALL = "small";
/**
* See {@link #TABLE_SMALL}.
*/
public static final String TREETABLE_SMALL = TABLE_SMALL;
/***************************************************************************
*
* DragAndDropWrapper styles
*
**************************************************************************/
/**
* Hide the "box drag hints" (i.e. the style which gets applied when the
* drag is in the middle/center area of the drag target).
*/
public static final String DRAG_AND_DROP_WRAPPER_NO_BOX_DRAG_HINTS = "no-box-drag-hints";
/**
* Hide the "vertical drag hints" (i.e. the style which gets applied when
* the drag is in the top/bottom part of the drag target).
*/
public static final String DRAG_AND_DROP_WRAPPER_NO_VERTICAL_DRAG_HINTS = "no-vertical-drag-hints";
/**
* Hide the "horizontal drag hints" (i.e. the style which gets applied when
* the drag is in the left/right part of the drag target).
*/
public static final String DRAG_AND_DROP_WRAPPER_NO_HORIZONTAL_DRAG_HINTS = "no-horizontal-drag-hints";
/***************************************************************************
*
* Panel styles
*
**************************************************************************/
/**
* Remove borders and the background color of the panel. Can be combined
* with any other Panel style.
*/
public static final String PANEL_BORDERLESS = "borderless";
/**
* Show a divider between the panel caption and content when the content
* area is scrolled. Suitable with the {@link #PANEL_BORDERLESS} style. Can
* be combined with any other Panel style.
*/
public static final String PANEL_SCROLL_INDICATOR = "scroll-divider";
/**
* Inset panel style. Can be combined with any other Panel style.
*/
public static final String PANEL_WELL = "well";
/***************************************************************************
*
* SplitPanel styles
*
**************************************************************************/
/**
* Make the split handle wider.
*/
public static final String SPLITPANEL_LARGE = "large";
/***************************************************************************
*
* TabSheet styles
*
**************************************************************************/
/**
* Adds a border around the whole component as well as around individual
* tabs in the tab bar. Can be combined with any other TabSheet style.
*/
public static final String TABSHEET_FRAMED = "framed";
/**
* Center the tabs inside the tab bar. Works best if all the tabs fit
* completely in the tab bar (i.e. no tab bar scrolling). Can be combined
* with any other TabSheet style.
*/
public static final String TABSHEET_CENTERED_TABS = "centered-tabs";
/**
* Give equal amount of space to all tabs in the tab bar (.i.e expand ratio
* == 1 for all tabs). The tab captions will be truncated if they do not fit
* in to the tab. Tab scrolling will be disabled when this style is applied
* (all tabs will be visible at the same time). Can be combined with any
* other TabSheet style.
*/
public static final String TABSHEET_EQUAL_WIDTH_TABS = "equal-width-tabs";
/**
* Add a small amount of padding around the tabs in the tab bar, so that
* they don't touch the outer edges of the component. Can be combined with
* any other TabSheet style.
*/
public static final String TABSHEET_PADDED_TABBAR = "padded-tabbar";
/**
* Reduce the whitespace around the tabs in the tab bar. Can be combined
* with any other TabSheet style.
*/
public static final String TABSHEET_COMPACT_TABBAR = "compact-tabbar";
/**
* Display tab icons on top of the tab captions (by default the icons are
* place on the left side of the caption). Can be combined with any other
* TabSheet style.
*/
public static final String TABSHEET_ICONS_ON_TOP = "icons-on-top";
/**
* Only the selected tab has the close button visible. Does not prevent
* closing the tab programmatically, it only hides the button from the end
* user. Can be combined with any other TabSheet style.
*/
public static final String TABSHEET_ONLY_SELECTED_TAB_IS_CLOSABLE = "only-selected-closable";
/***************************************************************************
*
* Accordion styles
*
**************************************************************************/
/**
* Remove the outer border from the accordion. Can be combined with any
* other Accordion style.
*/
public static final String ACCORDION_BORDERLESS = "borderless";
/***************************************************************************
*
* Window and related styles
*
**************************************************************************/
/**
* Add this style to any layout component (e.g. CssLayout, VerticalLayout or
* HorizontalLayout) and place it inside the root layout of the window to
* create a toolbar area for the window. You can then place any other
* components inside the toolbar layout, e.g. a MenuBar.
*/
public static final String WINDOW_TOP_TOOLBAR = "v-window-top-toolbar";
/**
* Add this style to any layout component (e.g. CssLayout, VerticalLayout or
* HorizontalLayout) and place it inside the root layout of the window to
* create a toolbar area for the window. You can then place any other
* components inside the toolbar layout, e.g. a MenuBar.
*/
public static final String WINDOW_BOTTOM_TOOLBAR = "v-window-bottom-toolbar";
/***************************************************************************
*
* FormLayout styles
*
**************************************************************************/
/**
* Removes the borders and background from any direct child field components
* (TextField, TextArea, DateField, ComboBox) in the layout. Reduces the
* spacing between the form rows and adds separator lines between them.
*/
public static final String FORMLAYOUT_LIGHT = "light";
/***************************************************************************
*
* Layout styles
*
**************************************************************************/
/**
* Make a layout look like the Panel component (resembles visually a card).
* Add an additional v-panel-caption style name to any layout
* inside the card layout to make it look like a Panel's caption.
*/
public static final String LAYOUT_CARD = "card";
/**
* Make a layout look like the {@link #PANEL_WELL} style. Add an additional
* v-panel-caption style name to any layout inside the card
* layout to make it look like a Panel's caption.
*/
public static final String LAYOUT_WELL = "well";
/**
* Make a HorizontalLayout wrap contained components to a new line when the
* isn't enough space.
*/
public static final String LAYOUT_HORIZONTAL_WRAPPING = "wrapping";
/**
*
* Add this style name to a CssLayout to create a grouped set of components,
* i.e. a row of components which are joined seamlessly together.
*
* Example:
*
*
* CssLayout group = new CssLayout();
* group.addStyleName(ValoTheme.LAYOUT_COMPONENT_GROUP);
*
* TextField field = new TextField();
* group.addComponent(field);
*
* Button button = new Button("Action");
* group.addComponent(button);
*
*/
public static final String LAYOUT_COMPONENT_GROUP = "v-component-group";
/***************************************************************************
*
* Valo menu styles
*
**************************************************************************/
/**
*
* When you use the Valo menu and wish to enable responsive features of the
* menu, you need to add this style name to the UI containing the menu.
*
*
*
* You only need to add this style name to the UI containing a Valo menu, if
* you're using the Responsive extension with the UI.
*
*
* Example:
*
*
* To enable responsivity in the Valo menu, the following example code
* should be executed in your UI containing the menu.
*
*
*
* Responsive.makeResponsive(this);
* addStyleName(ValoTheme.UI_WITH_MENU);
*
*/
public static final String UI_WITH_MENU = "valo-menu-responsive";
/**
*
* Set the primary style name of a CssLayout to this, and
* add any number of layouts with the {@link #MENU_PART} style inside it.
*
*
*
* The menu style is used to create a sidebar navigation menu for the
* application, usually action as the main navigation for the different
* sections of the application. It usually consists of at least a number of
* {@link #MENU_ITEM}s, and possibly some {@link #MENU_SUBTITLE}s and a
* {@link #MENU_TITLE}.
*
*
* Example:
*
*
* CssLayout menuArea = new CssLayout();
* menuArea.setPrimaryStyleName(ValoTheme.MENU_ROOT);
*
*/
public static final String MENU_ROOT = "valo-menu";
/**
*
* Add this style name to any layout and place it inside a layout with the
* {@link #MENU_ROOT} style to build a menu component. Use the additional
* MENU styles for individual components inside the layout.
*
*
* Example:
*
*
* CssLayout menu = new CssLayout();
* menu.addStyleName(ValoTheme.MENU_PART);
*
*/
public static final String MENU_PART = "valo-menu-part";
/**
*
* Add this style name to any layout with the {@link #MENU_PART} style name
* to make any menu items inside the menu emphasize the icons more than the
* captions. Useful on narrower viewport widths, since the menu width is
* decreased quite dramatically, making more space for the content of the
* application.
*
*
* Example:
*
*
* CssLayout menu = new CssLayout();
* menu.addStyleName(ValoTheme.MENU_PART);
* menu.addStyleName(ValoTheme.MENU_PART_LARGE_ICONS);
*
*/
public static final String MENU_PART_LARGE_ICONS = "large-icons";
/**
*
* Add this style name to any layout to make a header area for a menu
* (intended to be placed in side a {@link #MENU_PART} layout). You can add
* any components inside it, but usually you would place a Label inside.
*
*
*
* Any MenuBar component that you place inside this layout will match the
* style of the title, allowing an easy way to add a toolbar to the title
* layout.
*
*/
public static final String MENU_TITLE = "valo-menu-title";
/**
* Set the primary style name of a Label or a Button to this
* style name to create a section divider in a menu.
*/
public static final String MENU_SUBTITLE = "valo-menu-subtitle";
/**
*
* Set the primary style name of a Button to this style name
* to create a clickable menu item in the menu. Wrap the buttons in the
* layout having {@link #MENU_ITEMS} style. If the button has icon, it is
* shown on the left when menu area is wide and on top when it is narrow.
*
*
* Selected item:
*
* Add an additional style name {@link #MENU_SELECTED} to it to make it the
* selected item in the menu.
*
*
* Example:
*
*
* Button item = new Button();
* item.setPrimaryStyleName(ValoTheme.MENU_ITEM);
* item.addStyleName(ValoTheme.MENU_SELECTED);
*
*/
public static final String MENU_ITEM = "valo-menu-item";
/**
* Add this style name to the {@link #MENU_ITEM} Button to highlight it as
* selected. The text color will be white and icon blue unless overridden in
* theme.
*/
public static final String MENU_SELECTED = "selected";
/**
*
* Add a SPAN element with this style name inside a {@link #MENU_SUBTITLE}
* or {@link #MENU_ITEM} to add an additional badge indicator to the
* subtitle/item. The Label/Button needs to allow HTML content in order to
* use this style name.
*
*
* Examples:
*
*
* Button item = new Button();
* item.setPrimaryStyleName(ValoTheme.MENU_ITEM);
* item.setHtmlContentAllowed(true);
* item.setCaption("Item Caption <span class=\"" + ValoTheme.MENU_BADGE
* + "\">Badge text</span>");
*
*
*
* Label item = new Label();
* item.setPrimaryStyleName(ValoTheme.MENU_ITEM);
* item.setContentMode(ContentMode.HTML);
* item.setCaption("Item Caption <span class=\"" + ValoTheme.MENU_BADGE
* + "\">Badge text</span>");
*
*/
public static final String MENU_BADGE = "valo-menu-badge";
/**
*
* Set the primary 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.
*
*
*
* The text content of the logo should be very short, since the logo area
* only shows approximately three letters. Using one of the Vaadin Icons is
* a good way to quickly create a logo for your application. Vaadin Icons
* are included in the Valo theme.
*
*
* Example:
*
*
* Label logo = new Label(VaadinIcons.ROCKET.getHtml(), ContentMode.HTML);
* logo.setSizeUndefined();
* logo.setPrimaryStyleName(ValoTheme.MENU_LOGO);
*
*/
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.
*
*
*
* The menu will appear on mouse over on desktop, or when tapping on touch
* devices.
*
*
* Example:
*
*
* 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);
*
*/
public static final String MENU_APPEAR_ON_HOVER = "valo-menu-hover";
/**
*
* Add this style name for your menu toggle button, which will appear when
* view port is narrow. The toggle button is hidden in normal mode. Place
* the toggle button in the layout having {@link #MENU_ROOT} style name.
*
*
* Example:
*
*
* Button toggleButton = new Button("Menu");
* toggleButton.setIcon(VaadinIcons.LIST);
* toggleButton.addStyleName(ValoTheme.MENU_TOGGLE);
* toggleButton.addStyleName(ValoTheme.BUTTON_BORDERLESS);
* toggleButton.addStyleName(ValoTheme.BUTTON_SMALL);
* menu.addComponent(valoMenuToggleButton);
*
*/
public static final String MENU_TOGGLE = "valo-menu-toggle";
/**
*
* Add this style name to make menu appear when view port is narrow. This is
* useful in combination with button using {@link #MENU_TOGGLE} in order to
* programmatically showing / hiding the menu.
*
*
* Example:
*
*
* Button toggleButton = new Button("Menu", event -> {
* if (menu.getStyleName().contains(ValoTheme.MENU_VISIBLE)) {
* menu.removeStyleName(ValoTheme.MENU_VISIBLE);
* } else {
* menu.addStyleName(ValoTheme.MENU_VISIBLE);
* }
* });
*
*/
public static final String MENU_VISIBLE = "valo-menu-visible";
/**
*
* Add this style name to the wrapper of the {@link #MENU_ITEM} buttons.
*
*/
public static final String MENU_ITEMS = "valo-menuitems";
/**
*
* If you add MenuBar e.g. for user operations like logout in the layout
* using {@link #MENU_ROOT}, add this style name to it. The MenuBar will
* have more discrete style to fit the menu and it will be placed in the top
* right corner when the view port is narrow and top bar is viewed.
*
*/
public static final String MENU_USER = "user-menu";
/**
*
* When using {@link #UI_WITH_MENU} together with Navigator set this style
* as the primary style name to the view content placeholder layout. Note,
* it is in most cases useful to add {@link #SCROLLABLE} style name as well.
*
* Example: (in UI)
*
*
*
* Responsive.makeResponsive(this);
* addStyleName(ValoTheme.UI_WITH_MENU);
* VerticalLayout content = new VerticalLayout();
* content.setPrimaryStyleName(ValoTheme.NAV_CONTENT);
* content.addStyleName(ValoTheme.SCROLLABLE);
* Navigator nav = new Navigator(this, content);
* setNavigator(nav);
*
*/
public static final String NAV_CONTENT = "valo-content";
/**
* Add this stylename to enable the scrollbars in the component when content
* overflows. This is useful
*/
public static final String SCROLLABLE = "v-scrollable";
protected ValoTheme() {
}
}