|
38 | 38 | vaadin-grid-pro.max-height { |
39 | 39 | max-height: 250px; |
40 | 40 | } |
| 41 | + |
| 42 | + vaadin-grid-pro[theme~="no-row-borders"] { |
| 43 | + --vaadin-grid-row-border-width: 0px; |
| 44 | + } |
| 45 | + |
| 46 | + vaadin-grid-pro[theme~="column-borders"] { |
| 47 | + --vaadin-grid-column-border-width: 1px; |
| 48 | + } |
41 | 49 | </style> |
42 | 50 | </head> |
43 | 51 | <body> |
|
67 | 75 | <vaadin-select id="textAlign" label="Text Align"></vaadin-select> |
68 | 76 | </div> |
69 | 77 |
|
70 | | - <div class="control-group"> |
71 | | - <vaadin-checkbox-group label="Theme Variants"> |
| 78 | + <div class="control-group theme-variants"> |
| 79 | + <vaadin-checkbox-group label="Built-In Variants"> |
72 | 80 | <vaadin-checkbox value="no-border" label="No Border"></vaadin-checkbox> |
73 | | - <vaadin-checkbox value="no-row-borders" label="No Row Border"></vaadin-checkbox> |
74 | | - <vaadin-checkbox value="column-borders" label="Column Borders"></vaadin-checkbox> |
75 | 81 | <vaadin-checkbox value="row-stripes" label="Row Stripes"></vaadin-checkbox> |
76 | 82 | <vaadin-checkbox value="wrap-cell-content" label="Wrap Cell Content"></vaadin-checkbox> |
77 | 83 | <vaadin-checkbox value="highlight-editable-cells" label="Highlight Editable Cells"></vaadin-checkbox> |
78 | 84 | <vaadin-checkbox value="highlight-read-only-cells" label="Highlight Read-Only Cells"></vaadin-checkbox> |
79 | 85 | </vaadin-checkbox-group> |
| 86 | + <vaadin-checkbox-group label="Custom Variants"> |
| 87 | + <vaadin-checkbox value="no-row-borders" label="No Row Border"></vaadin-checkbox> |
| 88 | + <vaadin-checkbox value="column-borders" label="Column Borders"></vaadin-checkbox> |
| 89 | + </vaadin-checkbox-group> |
80 | 90 | </div> |
81 | 91 |
|
82 | 92 | <div class="control-group"> |
@@ -257,7 +267,7 @@ <h4>Details for ${model.item.name}</h4> |
257 | 267 | }); |
258 | 268 |
|
259 | 269 | // Theme Controls |
260 | | - document.querySelectorAll('[label="Theme Variants"] vaadin-checkbox').forEach((control) => { |
| 270 | + document.querySelectorAll('.theme-variants vaadin-checkbox').forEach((control) => { |
261 | 271 | control.addEventListener('checked-changed', (e) => { |
262 | 272 | if (e.detail.value) { |
263 | 273 | grid.setAttribute('theme', `${grid.getAttribute('theme') || ''} ${control.value}`.trim()); |
|
0 commit comments