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

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
Released
2019-02-16
Maturity
STABLE
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)
Online