Docs

Docs

Dashboard

Styling API reference for the Dashboard component.

Style Properties

The following style properties can be used in CSS stylesheets to customize the appearance of this component.

To apply values to these properties globally in your application UI, place them in a CSS block using the html {…​} selector. See Lumo Style Properties for more information on style properties.

Feature Property Default Value

Minimum column width

--vaadin-dashboard-col-min-width

25rem

Maximum column width

--vaadin-dashboard-col-min-width

1fr

Maximum column count

--vaadin-dashboard-col-max-count

Minimum row height

--vaadin-dashboard-row-min-height

12rem

Dashboard padding (around contents)

--vaadin-dashboard-padding

--lumo-space-m

Widget gap

--vaadin-dashboard-gap

--lumo-space-m

Widget background

--vaadin-dashboard-widget-background

--lumo-base-color

Widget corner radius

--vaadin-dashboard-widget-border-radius

--lumo-border-radius-l

Widget border width

--vaadin-dashboard-widget-border-width

--1px

Widget border color

--vaadin-dashboard-widget-border-color

--lumo-contrast-20pct

Widget shadow (non-editable)

--vaadin-dashboard-widget-shadow

0 0 0 0 transparent

Editable widget shadow

--vaadin-dashboard-widget-editable-shadow

--lumo-box-shadow-s

Selected widget shadow

--vaadin-dashboard-widget-selected-shadow

0 2px 4px -1px var(--lumo-primary-color-10pct), 0 3px 12px -1px var(--lumo-primary-color-50pct);

Drop target / resize box background color

--vaadin-dashboard-drop-target-background-color

--lumo-primary-color-10pct

Drop target / resize box border

--vaadin-dashboard-drop-target-border

--1px dashed var(--lumo-primary-color-50pct)

CSS Selectors

The following CSS selectors can be used in stylesheets to target the various parts and states of the component. See the Styling documentation for more details on how to style components.

Dashboard root element

vaadin-dashboard

Static Dashboard Layout (React & Lit)

vaadin-dashboard-layout

Widgets

Root element

vaadin-dashboard-widget

Widget States

Editable

vaadin-dashboard-widget[editable]

Focused

vaadin-dashboard-widget[focused]

Selected

vaadin-dashboard-widget[selected]

Being dragged

vaadin-dashboard-widget[dragging]

Being resized

vaadin-dashboard-widget[resizing]

Accessible move mode

vaadin-dashboard-widget[move-mode]

Accessible resize mode

vaadin-dashboard-widget[resize-mode]

Widget Parts

Header

vaadin-dashboard-widget::part(header)

Title

vaadin-dashboard-widget::part(title)

Content area

vaadin-dashboard-widget::part(content)

Drag handle / Move button

vaadin-dashboard-widget::part(move-button)

Remove button

vaadin-dashboard-widget::part(remove-button)

Resize handle / button

vaadin-dashboard-widget::part(resize-button)

Sections

Root element

vaadin-dashboard-section

Section States

Editable

vaadin-dashboard-section[editable]

Focused

vaadin-dashboard-section[focused]

Selected

vaadin-dashboard-section[selected]

Being dragged

vaadin-dashboard-section[dragging]

Accessible move mode

vaadin-dashboard-section[move-mode]

Section Parts

Header

vaadin-dashboard-section::part(header)

Title

vaadin-dashboard-section::part(title)

Drag handle / Move button

vaadin-dashboard-section::part(move-button)

Remove button

vaadin-dashboard-section::part(remove-button)

Accessible Move & Resize Modes

To target move-mode buttons on Sections, replace vaadin-dashboard-widget with vaadin-dashboard-section in the selectors below.

Move backward button

vaadin-dashboard-widget::part(move-backward-button)

Move forward button

vaadin-dashboard-widget::part(move-forward-button)

Move apply button

vaadin-dashboard-widget::part(move-apply-button)

Shrink width button

vaadin-dashboard-widget::part(resize-shrink-width-button)

Grow width button

vaadin-dashboard-widget::part(resize-grow-width-button)

Shrink height button

vaadin-dashboard-widget::part(resize-shrink-width-button)

Grow height button

vaadin-dashboard-widget::part(resize-grow-width-button)

Resize apply button

vaadin-dashboard-widget::part(resize-apply-button)