0. Introduction
This post should be used with last post
1. ComboBox Styling
Following again the idea of Niels Nachname
1.0 Assign the Vaaadin Theme (For instance Lumo)
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 | html { /* Example global custom CSS property definition */ /* 1. FORM FIELDS */ /* 1.1 enabled */ --ximo-field-color: black; --ximo-field-background-color: white; --ximo-field-font-weight: bold; --ximo-field-opacity: 1.0; --ximo-field-border-radius: 10px; --ximo-field-border-width: 1px 2px 2px 1px; --ximo-field-border-style: solid; --ximo-field-border-color: salmon; --ximo-field-margin-right: 15px; /* 1.2 disabled */ --ximo-field-disabled-color: gray; --ximo-field-disabled-background-color: white; --ximo-field-disabled-font-weight: bold; --ximo-field-disabled-opacity: 0.8; --ximo-field-disabled-border-radius: 10px; --ximo-field-disabled-border-width: 1px 2px 2px 1px; --ximo-field-disabled-border-style: solid; --ximo-field-disabled-border-color: thistle; --ximo-field-disabled-margin-right: 15px; /* 2. COMBOBOX */ /* 1.1 App Selector*/ --ximo-combo-color: maroon;; --ximo-combo-font-weight: bold; --ximo-combo-background-image: linear-gradient(to bottom right, lightpink, white); --ximo-combo-border-radius: 10px; --ximo-combo-border: 2px; --ximo-combo-border-bottom-style: solid; --ximo-combo-border-bottom-width: medium; --ximo-combo-border-bottom-color: saddlebrown; } |
1.2 Create a file called for instance "my-textfield-styles.css" in the "frontend/styles" folder of your project with this info. The styles are redirected to intermediate variables. This file has been created yet in the previous post. Here is a copy
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 | [part="input-field"]{ background-color: var(--my-background-color, 'auto'); color: var(--my-color, 'auto'); font-size: var(--my-font-size, 'auto'); font-weight: var(--my-font-weight, 'auto'); background-image: var(--my-background-image, 'auto'); border: var(--my-border, 'auto'); opacity: var(--my-opacity, 'auto'); border-radius: var(--my-border-radius, 'auto'); border-width: var(--my-border-width, 'auto'); border-style: var(--my-border-style, 'auto'); border-color: var(--my-border-color, 'auto'); border-bottom-style: var(--my-border-bottom-style, 'auto'); border-bottom-width: var(--my-border-bottom-width, 'auto'); border-bottom-color: var(--my-border-bottom-color, 'auto'); margin-right: var(--my-margin-right, 'auto'); } [part="input-field"][disabled] { background-color: var(--my-background-color, 'auto'); --lumo-disabled-text-color: var(--my-color, 'auto'); font-size: var(--my-font-size, 'auto'); font-weight: var(--my-font-weight, 'auto'); background-image: var(--my-background-image, 'auto'); border: var(--my-border, 'auto'); opacity: var(--my-opacity, 'auto'); border-radius: var(--my-border-radius, 'auto'); border-width: var(--my-border-width, 'auto'); border-style: var(--my-border-style, 'auto'); border-color: var(--my-border-color, 'auto'); border-bottom-style: var(--my-border-bottom-style, 'auto'); border-bottom-width: var(--my-border-bottom-width, 'auto'); border-bottom-color: var(--my-border-bottom-color, 'auto'); margin-right: var(--my-margin-right, 'auto'); } |
1.3 Create a file called for instance "current-combobox-styles.css" in the "frontend/styles" folder of your project with this info. These are the styles definitively assigned to ComboBoxes. You should assign the classes "my-combobox-app" or "my-combobox-opt" or none of them to the ComboBox.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 | /* general style for all combos */ [part="text-field"]{ --my-color: var(--ximo-combo-color); --my-font-size: 110%; --my-font-weight: var(--ximo-combo-font-weight); --my-background-image: var(--ximo-combo-background-image); --my-border-radius: var(--ximo-combo-border-radius); --my-border: var(--ximo-combo-border); --my-border-bottom-style: var(--ximo-combo-border-bottom-style); --my-border-bottom-width: var(--ximo-combo-border-bottom-width); --my-border-bottom-color: var(--ximo-combo-border-bottom-color); } /* explicid for a combo that has been assigned the class "my-combobox-app" */ :host(.my-combobox-app) [part="text-field"]{ --my-font-size: 110%; } /* explicid for a combo that has been assigned the class "my-combobox-opt" */ :host(.my-combobox-opt) [part="text-field"]{ --my-font-size: 100%; --my-margin-right: 10px; } |
1.4 The class that holds the form should have a reference to all the "css" files, using @CssImport
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 | @PageTitle("MainView") @Route("mainview") //... other stuff .... //General Vaadin theme @Theme(value = Lumo.class) //(1) //@ see https://vaadin.com/forum/thread/17197360/17863614 from Niels Nachname @CssImport(value="styles/my-textfield-styles.css", themeFor="vaadin-text-field") // (2) Select only Text fields @CssImport("./styles/shared-styles.css") // (3) General variable setting @CssImport("./styles/current-textfields-styles.css") // (4) Applied style to TextFields using previous variables @CssImport(value="styles/my-comboboxstyles.css" , themeFor="vaadin-combo-box") //(2A) Select only for Combos @CssImport("./styles/current-combobox-styles.css") // (4B) Applied style to ComboBox using previous variables public class MainView extends VerticalLayout implements RouterLayout { private TextField myTF=new TextField(); private ComboBox myCmb01=new ComboBox<>(); private ComboBox myCmb02=new ComboBox<>(); private ComboBox myCmb03=new ComboBox<>(); public MainView() { myTF.setClassName("my-textfield"); //Important //myCmb01.setClassName("my-textfield"); --> No set classname for MyCmb01 as gets general CSS of [part="text-field"] myCmb02.setClassName("my-combobox-app"); // See current-combobox-styles.css myCmb03.setClassName("my-combobox-opt"); // See current-combobox-styles.css } //...other stuff |
No hay comentarios:
Publicar un comentario