Board

package com.vaadin.demo.component.board; import com.vaadin.flow.component.board.Board; import com.vaadin.flow.component.board.Row; import com.vaadin.flow.component.html.Div; import com.vaadin.flow.router.Route; @Route("board-nested") public class BoardNested extends Div { public BoardNested() { // tag::snippet[] Row rootRow = new Row(); rootRow.add(new ExampleStatistics(), 2); Row nestedRow = new Row( new ExampleIndicator("Current users", "745", "+33.7"), new ExampleIndicator("Conversion rate", "18%", "+3.9")); rootRow.addNestedRow(nestedRow); Board board = new Board(); board.add(rootRow); // end::snippet[] add(board); this.setClassName("board-nested"); } }

package com.vaadin.demo.component.board; import com.vaadin.flow.component.Component; import com.vaadin.flow.component.Tag; @Tag("example-indicator") public class ExampleIndicator extends Component { public ExampleIndicator(String title, String current, String change) { this.getElement().setAttribute("title", title) .setAttribute("current", current) .setAttribute("change", change); } public ExampleIndicator(String title, String current) { this.getElement().setAttribute("title", title).setAttribute("current", current); } }

package com.vaadin.demo.component.board; import com.vaadin.flow.component.Component; import com.vaadin.flow.component.Tag; @Tag("example-statistics") public class ExampleStatistics extends Component { }

import React from 'react'; import { Board } from '@vaadin/react-components-pro/Board.js'; import { BoardRow } from '@vaadin/react-components-pro/BoardRow.js'; import boardStyles from './board-styles'; import ExampleIndicator from './ExampleIndicator'; import ExampleStatistics from './ExampleStatistics'; function Example() { return ( // tag::snippet[] <Board className="board-nested"> <BoardRow> <div {...{ 'board-cols': 2 }}> <ExampleStatistics {...{ 'board-cols': 2 }} /> </div> <BoardRow {...{ 'board-cols': 1 }}> <ExampleIndicator current="745" change={+33.7} title="Current users" /> <ExampleIndicator current="18%" change={+3.9} title="Conversion rate" /> </BoardRow> </BoardRow> </Board> // end::snippet[] ); }

import '@vaadin/icons'; import React, { useMemo } from 'react'; import { Icon } from '@vaadin/react-components/Icon.js'; import { VerticalLayout } from '@vaadin/react-components/VerticalLayout.js'; // tag::snippet[] function ExampleIndicator({ title = 'Unknown', current = '0', change = 0 }) { let theme; let icon; let sign; if (change === 0) { theme = ''; icon = 'circle-thin'; sign = '±'; } else if (change < 0) { theme = 'error'; icon = 'arrow-down'; sign = '-'; } else { theme = 'success'; icon = 'arrow-up'; sign = '+'; } return ( <VerticalLayout className="example-indicator"> <div className="title">{title}</div> <div className="current">{current}</div> <span className={`icon badge`} {...{ theme: `badge ${theme}` }}> <Icon icon={`vaadin:${icon}`} /> <span> {sign} {Math.abs(change).toFixed(2)}% </span> </span> </VerticalLayout> ); } // end::snippet[] export default ExampleIndicator;

import React, { useEffect } from 'react'; import { useSignal } from '@vaadin/hilla-react-signals'; import { getServiceHealth } from 'Frontend/demo/domain/DataService'; import type ServiceHealth from 'Frontend/generated/com/vaadin/demo/domain/ServiceHealth'; // tag::snippet[] function ExampleStatistics() { const serviceHealth = useSignal<ServiceHealth[]>([]); useEffect(() => { getServiceHealth().then((health) => { serviceHealth.value = health; }); }, []); return ( <div className="statistics"> <header className="title">Service health</header> <section className="legend"> <label> <span className="level excellent"></span> Excellent </label> <label> <span className="level ok"></span> Ok </label> <label> <span className="level failing"></span> Failing </label> </section> <div className="table"> <table> <thead> <tr> <th></th> <th>City</th> <th>Input</th> <th>Output</th> </tr> </thead> <tbody> {serviceHealth.value.map(({ id, city, input, output }) => ( <tr key={id}> <td> <span className="level ok" /> </td> <td>{city}</td> <td className="number">{input}</td> <td className="number">{output}</td> </tr> ))} </tbody> </table> </div> </div> ); } // end::snippet[] export default ExampleStatistics;

import '@vaadin/board'; import './example-indicator'; import './example-statistics'; import { html, LitElement } from 'lit'; import { customElement } from 'lit/decorators.js'; import { applyTheme } from 'Frontend/generated/theme'; @customElement('board-nested') export class Example extends LitElement { connectedCallback() { super.connectedCallback(); this.classList.add('board-nested'); } protected override createRenderRoot() { const root = super.createRenderRoot(); // Apply custom theme (only supported if your app uses one) applyTheme(root); return root; } protected override render() { return html` <!-- tag::snippet[] --> <vaadin-board> <vaadin-board-row> <example-statistics board-cols="2"></example-statistics> <vaadin-board-row board-cols="1"> <example-indicator current="745" change="+33.7" title="Current users" ></example-indicator> <example-indicator current="18%" change="+3.9" title="Conversion rate" ></example-indicator> </vaadin-board-row> </vaadin-board-row> </vaadin-board> <!-- end::snippet[] --> `; } }

import '@vaadin/icon'; import '@vaadin/icons'; import '@vaadin/vertical-layout'; import { css, html, LitElement } from 'lit'; import { customElement, property } from 'lit/decorators.js'; import { applyTheme } from 'Frontend/generated/theme'; @customElement('example-indicator') export class ExampleIndicator extends LitElement { static override styles = css` .title { margin: 0; font-size: var(--lumo-font-size-xxs); font-weight: 700; color: var(--lumo-contrast-50pct); } .current { font-size: var(--lumo-font-size-m); font-weight: 700; } .icon { font-size: var(--lumo-font-size-xxs); } .icon vaadin-icon { --vaadin-icon-width: var(--lumo-font-size-xxs); --vaadin-icon-height: var(--lumo-font-size-xxs); } @media (min-width: 1024px) { .title { font-size: var(--lumo-font-size-xxs); } .current { font-size: var(--lumo-font-size-xl); } .icon { font-size: var(--lumo-font-size-m); } .icon vaadin-icon { --vaadin-icon-width: var(--lumo-font-size-xs); --vaadin-icon-height: var(--lumo-font-size-xs); } } `; @property() title = 'Unknown'; @property() current = '0'; @property({ type: Number }) change = 0; protected override createRenderRoot() { const root = super.createRenderRoot(); // Apply custom theme (only supported if your app uses one) applyTheme(root); return root; } protected override render() { let theme; let icon; let sign; if (this.change === 0) { theme = ''; icon = 'circle-thin'; sign = '±'; } else if (this.change < 0) { theme = 'error'; icon = 'arrow-down'; sign = '-'; } else { theme = 'success'; icon = 'arrow-up'; sign = '+'; } return html` <vaadin-vertical-layout> <div class="title">${this.title}</div> <div class="current">${this.current}</div> <span class="icon" theme="badge ${theme}"> <vaadin-icon icon="vaadin:${icon}"></vaadin-icon> <span>${sign}${Math.abs(this.change).toFixed(2)}%</span> </span> </vaadin-vertical-layout> `; } }

import { css, html, LitElement } from 'lit'; import { customElement, state } from 'lit/decorators.js'; import { repeat } from 'lit/directives/repeat.js'; import { getServiceHealth } from 'Frontend/demo/domain/DataService'; import type ServiceHealth from 'Frontend/generated/com/vaadin/demo/domain/ServiceHealth'; @customElement('example-statistics') export class ExampleStatistics extends LitElement { static override styles = css` :host { display: flex; flex-direction: column; font-size: var(--lumo-font-size-s); } .level { display: flex; justify-content: center; align-items: center; } .level::before { content: ''; width: var(--lumo-font-size-xxs); height: var(--lumo-font-size-xxs); border-radius: 50%; } .excellent::before { background-color: var(--lumo-success-color); } .ok::before { background-color: var(--lumo-primary-color); } .failing::before { background-color: var(--lumo-error-color); } .legend { display: flex; } .legend label { display: flex; align-items: center; margin-inline-end: var(--lumo-space-m); } .legend .level { margin-inline-end: var(--lumo-space-s); } .title { font-size: var(--lumo-font-size-l); font-weight: 700; } .table { overflow: auto; flex-grow: 1; } .table table { width: 100%; margin-block-start: var(--lumo-space-s); } .table .number { text-align: end; } .table th, .table td { white-space: nowrap; } `; @state() private serviceHealth: ServiceHealth[] = []; protected override async firstUpdated() { this.serviceHealth = await getServiceHealth(); } protected override render() { return html` <header class="title">Service health</header> <section class="legend"> <label> <span class="level excellent"></span> Excellent </label> <label> <span class="level ok"></span> Ok </label> <label> <span class="level failing"></span> Failing </label> </section> <div class="table"> <table> <thead> <tr> <th></th> <th>City</th> <th>Input</th> <th>Output</th> </tr> </thead> <tbody> ${repeat( this.serviceHealth, ({ id }) => id, ({ city, input, output }) => html` <tr> <td> <span class="level ok"></span> </td> <td>${city}</td> <td class="number">${input}</td> <td class="number">${output}</td> </tr> ` )} </tbody> </table> </div> `; } }

package com.vaadin.demo.component.board; import com.vaadin.flow.component.board.Board; import com.vaadin.flow.component.html.Div; import com.vaadin.flow.component.splitlayout.SplitLayout; import com.vaadin.flow.router.Route; @Route("board-column-wrapping") public class BoardColumnWrapping extends Div { public BoardColumnWrapping() { // tag::snippet[] Board board = new Board(); board.addRow(createCell("Cell 1"), createCell("Cell 2"), createCell("Cell 3"), createCell("Cell 4")); SplitLayout splitLayout = new SplitLayout(board, new Div()); // end::snippet[] addClassName("board-column-wrapping"); add(splitLayout); } private static Div createCell(String text) { Div div = new Div(); div.setText(text); div.addClassNames("cell", "color"); return div; } }

import React from 'react'; import { SplitLayout } from '@vaadin/react-components/SplitLayout.js'; import { Board } from '@vaadin/react-components-pro/Board.js'; import { BoardRow } from '@vaadin/react-components-pro/BoardRow.js'; import boardStyles from './board-styles'; function Example() { return ( // tag::snippet[] <SplitLayout className="board-column-wrapping"> <Board style={{ width: '100%' }}> <BoardRow className="row"> <div className="cell color">Cell 1</div> <div className="cell color">Cell 2</div> <div className="cell color">Cell 3</div> <div className="cell color">Cell 4</div> </BoardRow> </Board> <div></div> </SplitLayout> // end::snippet[] ); }

import '@vaadin/board'; import '@vaadin/split-layout'; import { html, LitElement } from 'lit'; import { customElement } from 'lit/decorators.js'; import { applyTheme } from 'Frontend/generated/theme'; @customElement('board-column-wrapping') export class Example extends LitElement { connectedCallback() { super.connectedCallback(); this.classList.add('board-column-wrapping'); } protected override createRenderRoot() { const root = super.createRenderRoot(); // Apply custom theme (only supported if your app uses one) applyTheme(root); return root; } protected override render() { return html` <!-- tag::snippet[] --> <vaadin-split-layout> <vaadin-board style="width: 100%"> <vaadin-board-row class="row"> <div class="cell color">Cell 1</div> <div class="cell color">Cell 2</div> <div class="cell color">Cell 3</div> <div class="cell color">Cell 4</div> </vaadin-board-row> </vaadin-board> <div></div> </vaadin-split-layout> <!-- end::snippet[] --> `; } }

package com.vaadin.demo.component.board; import com.vaadin.flow.component.board.Board; import com.vaadin.flow.component.board.Row; import com.vaadin.flow.component.html.Div; import com.vaadin.flow.router.Route; @Route("board-column-span") public class BoardColumnSpan extends Div { public BoardColumnSpan() { // tag::snippet[] Board board1 = createBoard1(); Board board2 = createBoard2(); Board board3 = createBoard3(); // end::snippet[] addClassName("board-column-span"); add(board1, board2, board3); } private static Board createBoard1() { Row row1 = new Row(); row1.add(createCell("Span 2"), 2); row1.add(createCell("Span 1")); row1.add(createCell("Span 1")); Row row2 = new Row(); row2.add(createCell("Span 1")); row2.add(createCell("Span 2"), 2); row2.add(createCell("Span 1")); Row row3 = new Row(); row3.add(createCell("Span 1")); row3.add(createCell("Span 1")); row3.add(createCell("Span 2"), 2); Board board = new Board(); board.add(row1, row2, row3); return board; } private static Board createBoard2() { Row row1 = new Row(); row1.add(createCell("Span 3"), 3); row1.add(createCell("Span 1")); Row row2 = new Row(); row2.add(createCell("Span 1")); row2.add(createCell("Span 3"), 3); Board board = new Board(); board.add(row1, row2); return board; } private static Board createBoard3() { Row row1 = new Row(); row1.add(createCell("Span 2"), 2); row1.add(createCell("Span 1")); Row row2 = new Row(); row2.add(createCell("Span 1")); row2.add(createCell("Span 2"), 2); Board board = new Board(); board.add(row1, row2); return board; } private static Div createCell(String text) { Div div = new Div(); div.setText(text); div.addClassNames("cell"); return div; } }

import React from 'react'; import { Board } from '@vaadin/react-components-pro/Board.js'; import { BoardRow } from '@vaadin/react-components-pro/BoardRow.js'; import boardStyles from './board-styles'; function Example() { return ( <> {/* tag::snippet[] */} <Board className="board-column-span"> <BoardRow> <div className="cell" {...{ 'board-cols': '2' }}> Span 2 </div> <div className="cell">Span 1</div> <div className="cell">Span 1</div> </BoardRow> <BoardRow> <div className="cell">Span 1</div> <div className="cell" {...{ 'board-cols': '2' }}> Span 2 </div> <div className="cell">Span 1</div> </BoardRow> <BoardRow> <div className="cell">Span 1</div> <div className="cell">Span 1</div> <div className="cell" {...{ 'board-cols': '2' }}> Span 2 </div> </BoardRow> </Board> <Board className="board-column-span"> <BoardRow> <div className="cell" {...{ 'board-cols': '3' }}> Span 3 </div> <div className="cell">Span 1</div> </BoardRow> <BoardRow> <div className="cell">Span 1</div> <div className="cell" {...{ 'board-cols': '3' }}> Span 3 </div> </BoardRow> </Board> <Board className="board-column-span"> <BoardRow> <div className="cell" {...{ 'board-cols': '2' }}> Span 2 </div> <div className="cell">Span 1</div> </BoardRow> <BoardRow> <div className="cell">Span 1</div> <div className="cell" {...{ 'board-cols': '2' }}> Span 2 </div> </BoardRow> </Board> {/* end::snippet[] */} </> ); }

import '@vaadin/board'; import { html, LitElement } from 'lit'; import { customElement } from 'lit/decorators.js'; import { applyTheme } from 'Frontend/generated/theme'; @customElement('board-column-span') export class Example extends LitElement { connectedCallback() { super.connectedCallback(); this.classList.add('board-column-span'); } protected override createRenderRoot() { const root = super.createRenderRoot(); // Apply custom theme (only supported if your app uses one) applyTheme(root); return root; } protected override render() { return html` <!-- tag::snippet[] --> <vaadin-board> <vaadin-board-row> <div class="cell" board-cols="2">Span 2</div> <div class="cell">Span 1</div> <div class="cell">Span 1</div> </vaadin-board-row> <vaadin-board-row> <div class="cell">Span 1</div> <div class="cell" board-cols="2">Span 2</div> <div class="cell">Span 1</div> </vaadin-board-row> <vaadin-board-row> <div class="cell">Span 1</div> <div class="cell">Span 1</div> <div class="cell" board-cols="2">Span 2</div> </vaadin-board-row> </vaadin-board> <vaadin-board> <vaadin-board-row> <div class="cell" board-cols="3">Span 3</div> <div class="cell">Span 1</div> </vaadin-board-row> <vaadin-board-row> <div class="cell">Span 1</div> <div class="cell" board-cols="3">Span 3</div> </vaadin-board-row> </vaadin-board> <vaadin-board> <vaadin-board-row> <div class="cell" board-cols="2">Span 2</div> <div class="cell">Span 1</div> </vaadin-board-row> <vaadin-board-row> <div class="cell">Span 1</div> <div class="cell" board-cols="2">Span 2</div> </vaadin-board-row> </vaadin-board> <!-- end::snippet[] --> `; } }

package com.vaadin.demo.component.board; import com.vaadin.flow.component.board.Board; import com.vaadin.flow.component.html.Div; import com.vaadin.flow.component.splitlayout.SplitLayout; import com.vaadin.flow.router.Route; @Route("board-breakpoints") public class BoardBreakpoints extends Div { public BoardBreakpoints() { // tag::snippet[] Board board = new Board(); // styles are defined separately, check the board.css snippet board.addRow(createCell("Cell 1"), createCell("Cell 2"), createCell("Cell 3"), createCell("Cell 4")); SplitLayout splitLayout = new SplitLayout(board, new Div()); // end::snippet[] addClassName("board-breakpoints"); add(splitLayout); } private Div createCell(String text) { Div div = new Div(); div.setText(text); div.addClassNames("cell"); return div; } }

/**************************** * board basic ****************************/ .basic-board, :host(.basic-board) { --board-border: 1px solid var(--lumo-contrast-10pct); --vaadin-board-width-small: 200px; --vaadin-board-width-medium: 400px; } .basic-board vaadin-board-row:not(:last-child), :host(.basic-board) vaadin-board-row:not(:last-child) { border-block-end: var(--board-border); } .basic-board example-indicator, :host(.basic-board) example-indicator { padding: var(--lumo-space-m); } .basic-board example-indicator:not(:nth-child(2n)), :host(.basic-board) example-indicator:not(:nth-child(2n)) { border-inline-end: var(--board-border); } @media (min-width: 1024px) { .basic-board, :host(.basic-board) { --vaadin-board-width-small: 300px; --vaadin-board-width-medium: 400px; } .basic-board example-indicator:not(:last-child), :host(.basic-board) example-indicator:not(:last-child) { border-inline-end: var(--board-border); } } /**************************** * board nested ****************************/ .board-nested, :host(.board-nested) { --board-border: 1px solid var(--lumo-contrast-10pct); --vaadin-board-width-small: 150px; --vaadin-board-width-medium: 220px; } .board-nested example-statistics, :host(.board-nested) example-statistics { padding-inline-end: var(--lumo-space-m); border-inline-end: var(--board-border); } .board-nested example-indicator, :host(.board-nested) example-indicator { padding: var(--lumo-space-s); } .board-nested example-indicator:first-child, :host(.board-nested) example-indicator:first-child { border-block-end: var(--board-border); } @media (min-width: 1024px) { .board-nested example-indicator, :host(.board-nested) example-indicator { padding: var(--lumo-space-m); } .board-nested, :host(.board-nested) { --vaadin-board-width-small: 300px; --vaadin-board-width-medium: 400px; } } /**************************** * board-column-wrapping ****************************/ .board-column-wrapping, :host(.board-column-wrapping) { --vaadin-board-width-small: 150px; --vaadin-board-width-medium: 220px; --board-blue-10: #0090c0; --board-blue-20: #006c90; --board-blue-30: #00506b; --board-blue-40: #003e53; } @media (min-width: 1024px) { .board-column-wrapping, :host(.board-column-wrapping) { --vaadin-board-width-small: 300px; --vaadin-board-width-medium: 400px; } } .board-column-wrapping .cell, :host(.board-column-wrapping) .cell { padding: 1em 0.3em; text-align: center; color: white; white-space: nowrap; } @media (min-width: 1024px) { .board-column-wrapping .cell, :host(.board-column-wrapping) .cell { padding: 1em; } } .board-column-wrapping .color:nth-child(1), :host(.board-column-wrapping) .color:nth-child(1) { background: var(--board-blue-40); } .board-column-wrapping .color:nth-child(2), :host(.board-column-wrapping) .color:nth-child(2) { background: var(--board-blue-30); } .board-column-wrapping .color:nth-child(3), :host(.board-column-wrapping) .color:nth-child(3) { background: var(--board-blue-20); } .board-column-wrapping .color:nth-child(4), :host(.board-column-wrapping) .color:nth-child(4) { background: var(--board-blue-10); } /**************************** * board-column-span ****************************/ .board-column-span, :host(.board-column-span) { --vaadin-board-width-small: 150px; --vaadin-board-width-medium: 220px; --board-blue-10: #0090c0; --board-blue-20: #006c90; --board-blue-30: #00506b; --board-blue-40: #003e53; --board-inner-border: 1px dashed white; } @media (min-width: 1024px) { .board-column-span, :host(.board-column-span) { --vaadin-board-width-small: 300px; --vaadin-board-width-medium: 400px; } } .board-column-span vaadin-board, :host(.board-column-span) vaadin-board { padding: var(--lumo-space-m) 0; } .board-column-span .cell, :host(.board-column-span) .cell { padding: 1em 0.3em; text-align: center; color: white; white-space: nowrap; background: var(--board-blue-20); } @media (min-width: 1024px) { .board-column-span .cell, :host(.board-column-span) .cell { padding: 1em; } } .board-column-span .color:nth-child(1), :host(.board-column-span) .color:nth-child(1) { background: var(--board-blue-40); } .board-column-span .color:nth-child(2), :host(.board-column-span) .color:nth-child(2) { background: var(--board-blue-30); } .board-column-span .color:nth-child(3), :host(.board-column-span) .color:nth-child(3) { background: var(--board-blue-20); } .board-column-span .color:nth-child(4), :host(.board-column-span) .color:nth-child(4) { background: var(--board-blue-10); } .board-column-span .cell[board-cols='3'], :host(.board-column-span) .cell[board-cols='3'] { background: var(--board-blue-40); } .board-column-span .cell[board-cols='2'], :host(.board-column-span) .cell[board-cols='2'] { background: var(--board-blue-30); } .board-column-span .cell:not(:last-child), :host(.board-column-span) .cell:not(:last-child) { border-inline-end: var(--board-inner-border); } .board-column-span vaadin-board-row:not(:last-child) .cell, :host(.board-column-span) vaadin-board-row:not(:last-child) .cell { border-block-end: var(--board-inner-border); } /**************************** * board-breakpoints ****************************/ .board-breakpoints, :host(.board-breakpoints) { --vaadin-board-width-small: 150px; --vaadin-board-width-medium: 220px; } @media (min-width: 1024px) { .board-breakpoints, :host(.board-breakpoints) { --vaadin-board-width-small: 300px; --vaadin-board-width-medium: 400px; } } .board-breakpoints vaadin-board-row.large > .cell, :host(.board-breakpoints) /* tag::breakpoint[] */ /* should be added to frontend/theme/[my-theme]/styles.css */ vaadin-board-row.large > .cell { background: var(--lumo-success-color-10pct); color: var(--lumo-success-color); } /* end::breakpoint[] */ .board-breakpoints vaadin-board-row.medium > .cell, :host(.board-breakpoints) /* tag::breakpoint[] */ vaadin-board-row.medium > .cell { background: var(--lumo-primary-color-10pct); color: var(--lumo-primary-color); } /* end::breakpoint[] */ .board-breakpoints vaadin-board-row.small > .cell, :host(.board-breakpoints) /* tag::breakpoint[] */ vaadin-board-row.small > .cell { background: var(--lumo-error-color-10pct); color: var(--lumo-error-color); } /* end::breakpoint[] */ .board-breakpoints .cell, :host(.board-breakpoints) .cell { padding: 1em 0.3em; text-align: center; color: white; white-space: nowrap; } @media (min-width: 1024px) { .board-breakpoints .cell, :host(.board-breakpoints) .cell { padding: 1em; } }

import React from 'react'; import { SplitLayout } from '@vaadin/react-components/SplitLayout.js'; import { Board } from '@vaadin/react-components-pro/Board.js'; import { BoardRow } from '@vaadin/react-components-pro/BoardRow.js'; import boardStyles from './board-styles'; function Example() { // tag::snippet[] return ( <SplitLayout className="board-breakpoints"> <Board style={{ width: '100%' }}> <BoardRow> <div className="cell">Cell 1</div> <div className="cell">Cell 2</div> <div className="cell">Cell 3</div> <div className="cell">Cell 4</div> </BoardRow> </Board> <div></div> </SplitLayout> ); // end::snippet[] }

import '@vaadin/board'; import '@vaadin/split-layout'; import { html, LitElement } from 'lit'; import { customElement } from 'lit/decorators.js'; import { applyTheme } from 'Frontend/generated/theme'; @customElement('board-breakpoints') export class Example extends LitElement { connectedCallback() { super.connectedCallback(); this.classList.add('board-breakpoints'); } protected override createRenderRoot() { const root = super.createRenderRoot(); // Apply custom theme (only supported if your app uses one) applyTheme(root); return root; } // tag::snippet[] protected override render() { return html` <vaadin-split-layout> <vaadin-board style="width: 100%"> <!-- styles are defined separately, check the board.css snippet --> <vaadin-board-row> <div class="cell">Cell 1</div> <div class="cell">Cell 2</div> <div class="cell">Cell 3</div> <div class="cell">Cell 4</div> </vaadin-board-row> </vaadin-board> <div></div> </vaadin-split-layout> `; } // end::snippet[] }

/**************************** * board basic ****************************/ .basic-board, :host(.basic-board) { --board-border: 1px solid var(--lumo-contrast-10pct); --vaadin-board-width-small: 200px; --vaadin-board-width-medium: 400px; } .basic-board vaadin-board-row:not(:last-child), :host(.basic-board) vaadin-board-row:not(:last-child) { border-block-end: var(--board-border); } .basic-board example-indicator, :host(.basic-board) example-indicator { padding: var(--lumo-space-m); } .basic-board example-indicator:not(:nth-child(2n)), :host(.basic-board) example-indicator:not(:nth-child(2n)) { border-inline-end: var(--board-border); } @media (min-width: 1024px) { .basic-board, :host(.basic-board) { --vaadin-board-width-small: 300px; --vaadin-board-width-medium: 400px; } .basic-board example-indicator:not(:last-child), :host(.basic-board) example-indicator:not(:last-child) { border-inline-end: var(--board-border); } } /**************************** * board nested ****************************/ .board-nested, :host(.board-nested) { --board-border: 1px solid var(--lumo-contrast-10pct); --vaadin-board-width-small: 150px; --vaadin-board-width-medium: 220px; } .board-nested example-statistics, :host(.board-nested) example-statistics { padding-inline-end: var(--lumo-space-m); border-inline-end: var(--board-border); } .board-nested example-indicator, :host(.board-nested) example-indicator { padding: var(--lumo-space-s); } .board-nested example-indicator:first-child, :host(.board-nested) example-indicator:first-child { border-block-end: var(--board-border); } @media (min-width: 1024px) { .board-nested example-indicator, :host(.board-nested) example-indicator { padding: var(--lumo-space-m); } .board-nested, :host(.board-nested) { --vaadin-board-width-small: 300px; --vaadin-board-width-medium: 400px; } } /**************************** * board-column-wrapping ****************************/ .board-column-wrapping, :host(.board-column-wrapping) { --vaadin-board-width-small: 150px; --vaadin-board-width-medium: 220px; --board-blue-10: #0090c0; --board-blue-20: #006c90; --board-blue-30: #00506b; --board-blue-40: #003e53; } @media (min-width: 1024px) { .board-column-wrapping, :host(.board-column-wrapping) { --vaadin-board-width-small: 300px; --vaadin-board-width-medium: 400px; } } .board-column-wrapping .cell, :host(.board-column-wrapping) .cell { padding: 1em 0.3em; text-align: center; color: white; white-space: nowrap; } @media (min-width: 1024px) { .board-column-wrapping .cell, :host(.board-column-wrapping) .cell { padding: 1em; } } .board-column-wrapping .color:nth-child(1), :host(.board-column-wrapping) .color:nth-child(1) { background: var(--board-blue-40); } .board-column-wrapping .color:nth-child(2), :host(.board-column-wrapping) .color:nth-child(2) { background: var(--board-blue-30); } .board-column-wrapping .color:nth-child(3), :host(.board-column-wrapping) .color:nth-child(3) { background: var(--board-blue-20); } .board-column-wrapping .color:nth-child(4), :host(.board-column-wrapping) .color:nth-child(4) { background: var(--board-blue-10); } /**************************** * board-column-span ****************************/ .board-column-span, :host(.board-column-span) { --vaadin-board-width-small: 150px; --vaadin-board-width-medium: 220px; --board-blue-10: #0090c0; --board-blue-20: #006c90; --board-blue-30: #00506b; --board-blue-40: #003e53; --board-inner-border: 1px dashed white; } @media (min-width: 1024px) { .board-column-span, :host(.board-column-span) { --vaadin-board-width-small: 300px; --vaadin-board-width-medium: 400px; } } .board-column-span vaadin-board, :host(.board-column-span) vaadin-board { padding: var(--lumo-space-m) 0; } .board-column-span .cell, :host(.board-column-span) .cell { padding: 1em 0.3em; text-align: center; color: white; white-space: nowrap; background: var(--board-blue-20); } @media (min-width: 1024px) { .board-column-span .cell, :host(.board-column-span) .cell { padding: 1em; } } .board-column-span .color:nth-child(1), :host(.board-column-span) .color:nth-child(1) { background: var(--board-blue-40); } .board-column-span .color:nth-child(2), :host(.board-column-span) .color:nth-child(2) { background: var(--board-blue-30); } .board-column-span .color:nth-child(3), :host(.board-column-span) .color:nth-child(3) { background: var(--board-blue-20); } .board-column-span .color:nth-child(4), :host(.board-column-span) .color:nth-child(4) { background: var(--board-blue-10); } .board-column-span .cell[board-cols='3'], :host(.board-column-span) .cell[board-cols='3'] { background: var(--board-blue-40); } .board-column-span .cell[board-cols='2'], :host(.board-column-span) .cell[board-cols='2'] { background: var(--board-blue-30); } .board-column-span .cell:not(:last-child), :host(.board-column-span) .cell:not(:last-child) { border-inline-end: var(--board-inner-border); } .board-column-span vaadin-board-row:not(:last-child) .cell, :host(.board-column-span) vaadin-board-row:not(:last-child) .cell { border-block-end: var(--board-inner-border); } /**************************** * board-breakpoints ****************************/ .board-breakpoints, :host(.board-breakpoints) { --vaadin-board-width-small: 150px; --vaadin-board-width-medium: 220px; } @media (min-width: 1024px) { .board-breakpoints, :host(.board-breakpoints) { --vaadin-board-width-small: 300px; --vaadin-board-width-medium: 400px; } } .board-breakpoints vaadin-board-row.large > .cell, :host(.board-breakpoints) /* tag::breakpoint[] */ /* should be added to frontend/theme/[my-theme]/styles.css */ vaadin-board-row.large > .cell { background: var(--lumo-success-color-10pct); color: var(--lumo-success-color); } /* end::breakpoint[] */ .board-breakpoints vaadin-board-row.medium > .cell, :host(.board-breakpoints) /* tag::breakpoint[] */ vaadin-board-row.medium > .cell { background: var(--lumo-primary-color-10pct); color: var(--lumo-primary-color); } /* end::breakpoint[] */ .board-breakpoints vaadin-board-row.small > .cell, :host(.board-breakpoints) /* tag::breakpoint[] */ vaadin-board-row.small > .cell { background: var(--lumo-error-color-10pct); color: var(--lumo-error-color); } /* end::breakpoint[] */ .board-breakpoints .cell, :host(.board-breakpoints) .cell { padding: 1em 0.3em; text-align: center; color: white; white-space: nowrap; } @media (min-width: 1024px) { .board-breakpoints .cell, :host(.board-breakpoints) .cell { padding: 1em; } }