Directory

← Back

Material

Material Theme for Vaadin 7 or 8

Author

Rating

Popularity

100+

A Vaadin Theme based on the Material Design by Google, with a few small transitions. Heavily inspired by Angular and Materialize.

Further Information to get you started can be found in the Wiki

Notes:

  • Variables can be found here
  • I recommend to read some of the Material Design guidelines before you start using the Theme.
  • The Theme is not a complete Implementation of Material Design
  • If you are working with Vaadin Designer 1 or 2

You need help, miss a feature or found a bug? Create an issue on Github!

Sample code

$mat-background-color: #fafafa; // #fafafa for a light and #303030 for a dark theme
$v-focus-color: #00BCD4; // (You can find colors at materialpalette.com) $v-focus-color is supposed to be your accent color
// Note: " ... Using colors from the Material Design palette is optional. ... "
@import "../material/material.scss"; 

@mixin mytheme {
  @include material;

  // Insert your own theme rules here
}
//flat Button
Button button = new Button("Click Me");
button.addStyleName(MaterialTheme.BUTTON_FLAT);

//flat primary Button
Button button = new Button("Click Me");
button.addStyleName(MaterialTheme.BUTTON_FLAT + " " + MaterialTheme.BUTTON_PRIMARY);

//flat friendly Button
Button button = new Button("Click Me");
button.addStyleName(MaterialTheme.BUTTON_FLAT + " " + MaterialTheme.BUTTON_FRIENDLY);

//flat danger Button
Button button = new Button("Click Me");
button.addStyleName(MaterialTheme.BUTTON_FLAT + " " + MaterialTheme.BUTTON_DANGER);

//flat round Button
Button button = new Button("Click Me");
button.addStyleName(MaterialTheme.BUTTON_FLAT + " " + MaterialTheme.BUTTON_ROUND);

//flat round primary Button
Button button = new Button("Click Me");
button.addStyleName(MaterialTheme.BUTTON_FLAT + " " + MaterialTheme.BUTTON_ROUND + " " + MaterialTheme.BUTTON_PRIMARY);

//flat round friendly Button
Button button = new Button("Click Me");
button.addStyleName(MaterialTheme.BUTTON_FLAT + " " + MaterialTheme.BUTTON_ROUND + " " + MaterialTheme.BUTTON_FRIENDLY);

//flat round danger Button
Button button = new Button("Click Me");
button.addStyleName(MaterialTheme.BUTTON_FLAT + " " + MaterialTheme.BUTTON_ROUND + " " + MaterialTheme.BUTTON_DANGER);

//flat border Button
Button button = new Button("Click Me");
button.addStyleName(MaterialTheme.BUTTON_FLAT + " " + MaterialTheme.BUTTON_BORDER);

//flat border primary Button
Button button = new Button("Click Me");
button.addStyleName(MaterialTheme.BUTTON_FLAT + " " + MaterialTheme.BUTTON_BORDER + " " + MaterialTheme.BUTTON_PRIMARY);

//flat border friendly Button
Button button = new Button("Click Me");
button.addStyleName(MaterialTheme.BUTTON_FLAT + " " + MaterialTheme.BUTTON_BORDER + " " + MaterialTheme.BUTTON_FRIENDLY);

//flat border danger Button
Button button = new Button("Click Me");
button.addStyleName(MaterialTheme.BUTTON_FLAT + " " + MaterialTheme.BUTTON_BORDER + " " + MaterialTheme.BUTTON_DANGER);

//flat round border Button
Button button = new Button("Click Me");
button.addStyleName(MaterialTheme.BUTTON_FLAT + " " + MaterialTheme.BUTTON_ROUND + " " + MaterialTheme.BUTTON_BORDER);

//flat round border primary Button
Button button = new Button("Click Me");
button.addStyleName(MaterialTheme.BUTTON_FLAT + " " + MaterialTheme.BUTTON_ROUND + " " + MaterialTheme.BUTTON_BORDER + " " + MaterialTheme.BUTTON_PRIMARY);

//flat round border friendly Button
Button button = new Button("Click Me");
button.addStyleName(MaterialTheme.BUTTON_FLAT + " " + MaterialTheme.BUTTON_ROUND + " " + MaterialTheme.BUTTON_BORDER + " " + MaterialTheme.BUTTON_FRIENDLY);

//flat round border danger Button
Button button = new Button("Click Me");
button.addStyleName(MaterialTheme.BUTTON_FLAT + " " + MaterialTheme.BUTTON_ROUND + " " + MaterialTheme.BUTTON_BORDER + " " + MaterialTheme.BUTTON_DANGER);

//flat floating-action Button
Button button = new Button();
button.setIcon(VaadinIcons.PLUS);
button.addStyleName(MaterialTheme.BUTTON_FLAT + " " + MaterialTheme.BUTTON_FLOATING_ACTION);

//flat floating-action friendly Button
Button button = new Button();
button.setIcon(VaadinIcons.PLUS);
button.addStyleName(MaterialTheme.BUTTON_FLAT + " " + MaterialTheme.BUTTON_FLOATING_ACTION + " " + MaterialTheme.BUTTON_FRIENDLY);

//flat floating-action danger Button
Button button = new Button();
button.setIcon(VaadinIcons.PLUS);
button.addStyleName(MaterialTheme.BUTTON_FLAT + " " + MaterialTheme.BUTTON_FLOATING_ACTION + " " + MaterialTheme.BUTTON_DANGER);
HorizontalLayout card0 = new HorizontalLayout();
card0.addStyleName(MaterialTheme.CARD_0);

HorizontalLayout card1 = new HorizontalLayout();
card1.addStyleName(MaterialTheme.CARD_1);

HorizontalLayout card2 = new HorizontalLayout();
card2.addStyleName(MaterialTheme.CARD_2);

HorizontalLayout card3 = new HorizontalLayout();
card3.addStyleName(MaterialTheme.CARD_3);

HorizontalLayout card4 = new HorizontalLayout();
card4.addStyleName(MaterialTheme.CARD_4);

HorizontalLayout card5 = new HorizontalLayout();
card5.addStyleName(MaterialTheme.CARD_5);

HorizontalLayout hoverable = new HorizontalLayout();
hoverable.addStyleName(MaterialTheme.CARD_HOVERABLE);
// TextFields
TextField textStandard = new TextField("Standard TextField");

TextField textBorderless = new TextField("Borderless TextField");
textBorderless.addStyleName("borderless");

TextField textFloating = new TextField("Floating TextField");
textFloating.addStyleName("floating");

// ComboBoxes
ComboBox<String> comboStandard = new ComboBox<>("Standard ComboBox", Arrays.asList("One", "Two", "Three"));

ComboBox<String> comboBorderless = new ComboBox<>("Borderless ComboBox", Arrays.asList("One", "Two", "Three"));
comboBorderless.addStyleName("borderless");

ComboBox<String> comboFloating = new ComboBox<>("Floating ComboBox", Arrays.asList("One", "Two", "Three"));
comboFloating.addStyleName("floating");

// DateFields
DateField dateStandard = new DateField("Standard DateField");

DateField dateBorderless = new DateField("Borderless DateField");
dateBorderless.addStyleName("borderless");

DateField dateFloating = new DateField("Floating DateField");
dateFloating.addStyleName("floating");
    
// Button
Button button = new Button("Click Me");
button.addStyleName(null);

//primary Button
Button button = new Button("Click Me");
button.addStyleName(MaterialTheme.BUTTON_PRIMARY);

//friendly Button
Button button = new Button("Click Me");
button.addStyleName(MaterialTheme.BUTTON_FRIENDLY);

//danger Button
Button button = new Button("Click Me");
button.addStyleName(MaterialTheme.BUTTON_DANGER);

//borderless Button
Button button = new Button("Click Me");
button.addStyleName(MaterialTheme.BUTTON_BORDERLESS);

//borderless primary Button
Button button = new Button("Click Me");
button.addStyleName(MaterialTheme.BUTTON_BORDERLESS + " " + MaterialTheme.BUTTON_PRIMARY);

//borderless friendly Button
Button button = new Button("Click Me");
button.addStyleName(MaterialTheme.BUTTON_BORDERLESS + " " + MaterialTheme.BUTTON_FRIENDLY);

//borderless danger Button
Button button = new Button("Click Me");
button.addStyleName(MaterialTheme.BUTTON_BORDERLESS + " " + MaterialTheme.BUTTON_DANGER);

//round Button
Button button = new Button("Click Me");
button.addStyleName(MaterialTheme.BUTTON_ROUND);

//round primary Button
Button button = new Button("Click Me");
button.addStyleName(MaterialTheme.BUTTON_ROUND + " " + MaterialTheme.BUTTON_PRIMARY);

//round friendly Button
Button button = new Button("Click Me");
button.addStyleName(MaterialTheme.BUTTON_ROUND + " " + MaterialTheme.BUTTON_FRIENDLY);

//round danger Button
Button button = new Button("Click Me");
button.addStyleName(MaterialTheme.BUTTON_ROUND + " " + MaterialTheme.BUTTON_DANGER);

//border Button
Button button = new Button("Click Me");
button.addStyleName(MaterialTheme.BUTTON_BORDER);

//border primary Button
Button button = new Button("Click Me");
button.addStyleName(MaterialTheme.BUTTON_BORDER + " " + MaterialTheme.BUTTON_PRIMARY);

//border friendly Button
Button button = new Button("Click Me");
button.addStyleName(MaterialTheme.BUTTON_BORDER + " " + MaterialTheme.BUTTON_FRIENDLY);

//border danger Button
Button button = new Button("Click Me");
button.addStyleName(MaterialTheme.BUTTON_BORDER + " " + MaterialTheme.BUTTON_DANGER);

//round border Button
Button button = new Button("Click Me");
button.addStyleName(MaterialTheme.BUTTON_ROUND + " " + MaterialTheme.BUTTON_BORDER);

//round border primary Button
Button button = new Button("Click Me");
button.addStyleName(MaterialTheme.BUTTON_ROUND + " " + MaterialTheme.BUTTON_BORDER + " " + MaterialTheme.BUTTON_PRIMARY);

//round border friendly Button
Button button = new Button("Click Me");
button.addStyleName(MaterialTheme.BUTTON_ROUND + " " + MaterialTheme.BUTTON_BORDER + " " + MaterialTheme.BUTTON_FRIENDLY);

//round border danger Button
Button button = new Button("Click Me");
button.addStyleName(MaterialTheme.BUTTON_ROUND + " " + MaterialTheme.BUTTON_BORDER + " " + MaterialTheme.BUTTON_DANGER);

//floating-action Button
Button button = new Button();
button.setIcon(VaadinIcons.PLUS);
button.addStyleName(MaterialTheme.BUTTON_FLOATING_ACTION);

//floating-action friendly Button
Button button = new Button();
button.setIcon(VaadinIcons.PLUS);
button.addStyleName(MaterialTheme.BUTTON_FLOATING_ACTION + " " + MaterialTheme.BUTTON_FRIENDLY);

//floating-action danger Button
Button button = new Button();
button.setIcon(VaadinIcons.PLUS);
button.addStyleName(MaterialTheme.BUTTON_FLOATING_ACTION + " " + MaterialTheme.BUTTON_DANGER);

Compatibility

(Loading compatibility data...)

Was this helpful? Need more help?
Leave a comment or a question below. You can also join the chat on Discord or ask questions on StackOverflow.

Version

  • fixes style issues for v-colorpicker
  • v-tabsheet style improvements
  • v-checkbox style improvements
  • v-grid style improvements
  • v-inline-datefield style improvements
  • v-accordion style improvements
Released
2017-06-25
Maturity
BETA
License
Apache License 2.0

Compatibility

Framework
Vaadin 7.3+
Vaadin 8.0+
Browser
Firefox
Google Chrome
Microsoft Edge

Material - Vaadin Add-on Directory

Material Theme for Vaadin 7 or 8 Material - Vaadin Add-on Directory
A Vaadin Theme based on the Material Design by Google, with a few small transitions. Heavily inspired by Angular and Materialize. Further Information to get you started can be found in the [Wiki](https://github.com/appreciated/material/wiki/) Notes: * [Variables](https://github.com/appreciated/material/wiki/Variables) can be found here * I recommend to read some of the Material Design guidelines before you start using the Theme. * The Theme is not a complete Implementation of Material Design * If you are working with [Vaadin Designer 1 or 2](https://github.com/appreciated/material/blob/master/README.md#working-with-vaadin-designer-1-or-2) [You need help, miss a feature or found a bug? Create an issue on Github!](https://github.com/appreciated/material/issues)
Source Code
Issue Tracker
Github
Material Design - Cards
Material Design - Buttons
Wiki
Material Design - Guidelines
Discussion Forum

Material version 0.5
null

Material version 0.5.1
- removed unused variables

Material version 0.5.2
- added classes for cards and hoverable cards

Material version 0.5.3
- correct margin bug inside of panels

Material version 0.5.4
-tabsheet caption fix

Material version 0.5.5
- style "borderless" has no border anymore - introduced "floating" as a new style for most input fields - fixed windows top margin bug

Material version 0.5.6
- fixes bug #5: Active button style on mobile devices (Thanks @milomirtopic for reporting) - added borderless error / success label - NOTE: style "action" renamed to "floating-action"

Material version 0.5.7
* Fixes Issue #6 - Default ComboBox border always has focus * Fixes Issue #7 - Issue #5 should also be applied to card-hoverable

Material version 0.5.8
- Introduced new Button variation "border”

Material version 0.5.9
- Introduced new variable $mat-background-color which is kind of similar to $v-background-color in the standard valo. It changes the appearance of the most components, and can be used to set a dark Material theme (Take a look at the updated example) - v-slider handle size decreased - Buttons inside of raised elements now keep their own elevation, it is up to the developer to use the correct buttons in a specific environment styles (See https://material.io/guidelines/components/buttons.html#buttons-style / Flat Buttons)

Material version 0.6.0
null

Material version 0.6.1
- Class "MaterialTheme" added to add styles easier (similar to the class "ValoTheme"). To see how to use them take a look at the code examples. - __Button style "elevated" renamed to "floating"__

Material version 0.6.2
- changed the h1, h2 ... font sizes to mimic the material guidelines

Material version 0.6.3
bump Vaadin Version

Material version 0.7.0
NOTICE: - the Default button styles were reverted - Buttons are now by default raised again - The Code Examples and the images are currently not up-to-date, I will update them later.

Material version 0.7.1
NOTICE: Buttons are now by default raised again - fixes hover effect on buttons inside a v-component-group - fixes text color in session v-notification - fixes inconsistent v-button padding

Material version 0.7.2
NOTICE: Buttons are now by default raised again - added centered ripple effect to buttons

Material version 0.7.3
NOTICE: - Buttons are now by default raised again - Ripple effect on buttons was introduced Feature: - Added possiblity to add v-datefields, v-textfield and v-filterselect with a custom color ("custom") Fixes: - Style issues in v-reconnect-dialog - Style issues in v-filterselect inside of a group

Material version 0.7.4
NOTICE: - Buttons are now by default raised again - Ripple effect on buttons was introduced Feature: - Added possiblity to add v-datefields, v-textfield and v-filterselect with a custom color ("custom")

Material version 0.7.5
NOTICE: - Buttons are now by default raised again - Ripple effect on buttons was introduced Feature: - Added possiblity to add v-datefields, v-textfield and v-filterselect with a custom color ("custom")

Material version 0.7.6
NOTICE: - Buttons are now by default raised again - Ripple effect on buttons and v-menubar was introduced Feature: - Added possiblity to add all buttons, v-menubar, v-datefields, v-textfield and v-filterselect with a custom color by adding the new style ("custom")

Material version 0.7.7
NOTICE: - Buttons are now by default raised again - Ripple effect on buttons and v-menubar was introduced Feature: - Added possiblity to add all buttons, v-menubar, v-datefields, v-textfield and v-filterselect with a custom color by adding the new style ("custom")

Material version 0.7.8
NOTICES: - Buttons are now by default raised again - Ripple effect on buttons and v-menubar was introduced Feature: - Added possiblity to add all buttons, v-menubar, v-datefields, v-textfield and v-filterselect with a custom color by adding the new style ("custom")

Material version 0.7.9
NOTICES: - Buttons are now by default raised again - Ripple effect for buttons, v-upload and v-menubar was introduced Changelog: - Added possiblity to add all buttons, v-menubar, v-datefields, v-textfield and v-filterselect with a custom color by adding the new style ("custom") - Added all buttons styles for the Upload Component (an exception is floating-action which need to be renamed another name -> floating-action-upload)

Material version 0.8.1
NOTICES: - Buttons are now by default raised again - Ripple effect for buttons, v-upload and v-menubar was introduced Changelog: - material styling for v-tooltip added - material styling for the datepicker added

Material version 0.8.2
NOTICES: - Buttons are now by default raised again - Ripple effect for buttons, v-upload and v-menubar was introduced Changelog: - v-button borderless hover style fix - style fixes for accordion - style fixes for twin-col - v-button mobile style fix - improved styling on colorpicker popup - fixes v-button with "icon-align-top" - fixes text alignment on v-button and v-upload with a width > default

Material version 0.8.3
NOTICES: - Buttons are now by default raised again - Ripple effect for buttons, v-upload and v-menubar was introduced Changelog: - v-textfield floating and custom focus fixes - v-datefield custom style improvement - v-textfield and v-datefield removed focus on read only - v-menubar improved styling

Material version 0.8.4
NOTICES: - Buttons are now by default raised again - Ripple effect for buttons, v-upload and v-menubar was introduced Changelog: - ripple fix for default v-button and v-upload floating-action - floating-action v-disabled elevation fix - v-upload v-disabled style fixes - v-button v-disabled style fixes

Material version 0.8.5
NOTICES: - Buttons are now by default raised again - Ripple effect for buttons, v-upload and v-menubar was introduced - v-grid styling added Changelog: - v-table style fixes - v-grid support added

Material version 0.8.6
- fixes style issues for v-colorpicker - v-tabsheet style improvements - v-checkbox style improvements - v-grid style improvements - v-inline-datefield style improvements - v-accordion style improvements

Material version 0.8.7
- fixes for v-grid styles

Material version 0.8.8
- fixes for Issue #14 (wrong font-color in .v-tooltip) Thank you for reporting!

Material version 0.8.9
- fixes #15 by removing a styling issue for the valo menu - overall improvements for the valo menu by adding ripple effects and shadows - adds the proposed styling #16 enhancement for the v-grid by adding a border to last-frozen and a shadow for the grid header - added new elevation shadow level 0.5 (stylename="z-depth-0-5" card stylename="card-0-5") - added new elevation to the VaadinTheme class

Material version 0.9.0
- v-grid focus styling fixes - v-grid material checkbox styling added

Material version 0.9.1
- Fixes Issue #17: The shadow of the Valo Menu is visible when the menu is closed - Fixes Issue #18: Text Areas scroll is not working

Material version 0.9.2
- overflow fixes for twincol select and select - increased shadow visibility for the mobile valo-menu

Material version 1.0.0
Special thanks @Dinu Mihnea Additions: - v-datefield button ripple - v-component-group variations flat and material - border-radius for v-tabsheet - v-radiobutton animation - shadow to v-table header - String constants for new styles - a reusable ripple style - ripple effect for v-filter-select button, v-datefield button and v-tab-sheet tabs - Merged pull request #22 Added more modern looking loading spinner Further Improvements: - v-accordion border - v-slider styling Fixes: - v-checkbox style issues - v-grid header shadow when using frozen columns - margin on borderless v-component-group - v-immediate upload - ripple style issues - v-datefield color style - Merged pull request #21 Fixes overflow issues in twin-col-select

Material version 1.0.2
- added missing constant for InlineDateField - fixing v-button link style - v-label-spinner animation adapted to the new loading animation - updated loading animation (increased size and decreased default spinner speed) - a borderless v-table will now have no shadows in footer and header - the loading indicator when switching the views on the default v-tabsheet is now visible again - v-grid header style improvement when a scrollbar is visible - v-grid removed shadow in a borderless grid - borderless v-grid overflow issue fixed

Material version 1.0.3
Thanks again @DinuMihnea Fixes Issue #24 improved hover background-color style on v-button Fixes Issue #23 v-filter-select readonly focus issue

Material version 1.0.4
Thanks @DinuMihnea for the finding! - fixes issue #25 | Grid horizontal scrollbar not properly displayed

Material version 1.0.5
- improved the calculation to determine an appropriate color for the ripple effect - v-grid background issues in dark theme fixed - added variable scrollbar color for chrome - fixed hover button transparency

Material version 1.0.6
- allow progressbar to scale with unit size - allow v-grid multiselect checkboxes to scale with the unit size

Material version 1.0.7
Additions: - added height animation for v-accordion - cursor: pointer for buttons and the styles "card-hoverable" and "ripple" Fixes: - fixes for style issue in .v-datefield .floating - fixes for style issue in .v-filterselect .custom and .error - fixes for style issue in .v-window-bottom-toolbar - fixes style issue for .v-accordion - fixes style issue with large vertical and horizontal splitpanel - fixes style issue with borderless menubar with only one item

Material version 1.0.8
- fixes vertical caption alignment issue for v-upload 1.0.7: Additions: - added height animation for v-accordion - cursor: pointer for buttons and the styles "card-hoverable" and "ripple" Fixes style issues: - .v-datefield .floating - .v-filterselect .custom and .error - .v-window-bottom-toolbar - .v-accordion - large vertical and horizontal splitpanel - borderless menubar with only one item

Material version 1.0.9
- fixes issue #28 Selection Mode Grid - fixes style issue for v-button icon align right - v-panel padding corrected - v-grid and v-table can now be customized via variables - refactored variables - improved focus color in grid - improve visibility of borderless button hover effect on v-panel - v-panel background color fix - improved icon positioning for buttons with icon

Material version 1.1.0
- fixes style issue for v-button with icons - added additional button style "no-border-radius" - added support for button style "icon-only" with reduced padding

Material version 1.1.1
Fixes Issue #31 - Grid scrollbars in IE11

Material version 1.1.2
Fixes for Issue #30

Material version 1.1.3
* added new progressbar style progressbar-indeterminate (by DinuMihnea) * added icons to notifications (by DinuMihnea) * fixes issue #34 - in some cases the overflow in the grid is wrong calculated Thank you @DinuMihnea

Material version 1.1.4

Material version 1.1.5
- styling for valo menu improved

Material version 1.1.6
- fixes styling issue of component groups with a textfield and a button - fixing some grid styling issues that occur since Vaadin 8.1.7 in the checkboxes - fix #36 | It is not possible to remove the grid header without removing the drop shadow thanks @evrenism for reporting

Material version 1.1.7
- fixes issue #37 | "floating-action" does not scale with v-unit-size - fixes issue #38 | Accordion styling is broken bug

Material version 1.1.8
Fixes issue #39 | improve support for SVG icons for buttons with the "floating-action" style - thanks for reporting @evrenism

Material version 1.2.0
Issues closed: - #45 Hamburger menu for column hiding in grid is not visible | Thanks for reporting @OSchwark - #42 Deactivate Ink effects | Thanks for reporting @TiBiscuit07 - #41 Upload Non-immediate mode component style broken | Thanks for reporting @galcyurio Styling improvements: - improved grid sidebar styling

Online