Skip to content

docs: Dashboard Aura style variants and props #4887

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 10 commits into from
Dec 4, 2025
Merged

docs: Dashboard Aura style variants and props #4887

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
676bd51
dashboard props
sissbruecker Dec 3, 2025
1881ca8
update styling page
sissbruecker Dec 3, 2025
b1f944f
update example styles
sissbruecker Dec 3, 2025
29d09a4
fix prop name
sissbruecker Dec 3, 2025
c5d0c9a
improve column sizing
sissbruecker Dec 4, 2025
ad4f80e
use vaadin color palette
sissbruecker Dec 4, 2025
73ccc95
add --vaadin-dashboard-header-gap
sissbruecker Dec 4, 2025
2d943be
add colspan and rowspan
sissbruecker Dec 4, 2025
4cc8be5
add property that also apply to section
sissbruecker Dec 4, 2025
15fb707
Merge branch 'main' into docs/dashboard-aura-styling-section
sissbruecker Dec 4, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion articles/components/dashboard/index.adoc
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,7 @@ A component for building static dashboard layouts and dynamic, user-configurable
:commercial-feature: Dashboard
include::{articles}/_commercial-banner.adoc[opts=optional]

[.example.tall]
[.example.tall,themes="lumo,aura"]
--
ifdef::flow[]
[source,java]
Expand Down
130 changes: 92 additions & 38 deletions articles/components/dashboard/styling.adoc
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,15 +9,21 @@ order: 50

The following style variants can be applied to the Dashboard to change its appearance:

[cols="2,2,3"]
[cols="1,2,1"]
|===
| Flow `DashboardVariant` | `theme` attribute | Description
| Variant | Description | Supported by

| `LUMO_SHADED_BACKGROUND` | `shaded-background` | Applies shading to the dashboard background.
| `shaded-background`
| Applies shading to the dashboard background.
| Lumo

| `LUMO_ELEVATED_WIDGETS` | `elevated-widgets` | Makes the widgets appear elevated above the dashboard surface.
| `elevated-widgets`
| Makes the widgets appear elevated above the dashboard surface.
| Lumo

| `LUMO_FLAT_WIDGETS` | `flat-widgets` | A flat, borderless widget style.
| `flat-widgets`
| A flat, borderless widget style.
| Lumo

|===

Expand All @@ -32,72 +38,120 @@ include::{root}/frontend/demo/component/dashboard/dashboard-variants.ts[render,p

include::../_styling-section-theming-props.adoc[tag=style-properties]

[cols="1,2,1"]
=== Layout Properties

[cols="3,1"]
|===
| Feature | Property | Default Value
| Property | Supported by

|Minimum column width
|`--vaadin-dashboard-col-min-width`
|`25rem`
|Aura, Lumo

|Maximum column width
|`--vaadin-dashboard-col-min-width`
|`1fr`
|`--vaadin-dashboard-col-max-width`
|Aura, Lumo

|Maximum column count
|`--vaadin-dashboard-col-max-count`
|
|Aura, Lumo

|Minimum row height
|`--vaadin-dashboard-row-min-height`
|`12rem`
|Aura, Lumo

|`--vaadin-dashboard-widget-rowspan`
|Aura, Lumo

|`--vaadin-dashboard-widget-colspan`
|Aura, Lumo

|Dashboard padding (around contents)
|`--vaadin-dashboard-padding`
|`--lumo-space-m`
|Aura, Lumo

|Widget gap
|`--vaadin-dashboard-gap`
|`--lumo-space-m`
|Aura, Lumo

|===


=== Widget Properties

[cols="3,1"]
|===
| Property | Supported by

|Widget background
|`--vaadin-dashboard-widget-background`
|`--lumo-base-color`
|Aura, Lumo

|Widget corner radius
|`--vaadin-dashboard-widget-border-radius`
|`--lumo-border-radius-l`
|Aura, Lumo

|Widget border width
|`--vaadin-dashboard-widget-border-width`
|`--1px`
|Aura, Lumo

|Widget border color
|`--vaadin-dashboard-widget-border-color`
|`--lumo-contrast-20pct`
|Aura, Lumo

|Widget shadow (non-editable)
|`--vaadin-dashboard-widget-shadow`
|`0 0 0 0 transparent`
|Aura, Lumo

|Widget content padding
|`--vaadin-dashboard-widget-padding`
|`0px`
|Lumo

|`--vaadin-dashboard-widget-header-padding`
|Aura

|`--vaadin-dashboard-widget-header-gap`
|Aura

|`--vaadin-dashboard-widget-title-color`
|Aura

|`--vaadin-dashboard-widget-title-font-size`
|Aura

|`--vaadin-dashboard-widget-title-font-weight`
|Aura

|`--vaadin-dashboard-widget-title-line-height`
|Aura

|Widget title wrapping
|`--vaadin-dashboard-widget-title-wrap`
|`wrap`
|Aura, Lumo

|Drop target / resize box background color
|`--vaadin-dashboard-drop-target-background-color`
|`--lumo-primary-color-10pct`
|Lumo

|Drop target / resize box border
|`--vaadin-dashboard-drop-target-border`
|`--1px dashed var(--lumo-primary-color-50pct)`
|Lumo

|===

=== Section Properties

[cols="3,1"]
|===
| Property | Supported by

|`--vaadin-dashboard-section-border-radius`
|Aura

|`--vaadin-dashboard-widget-header-gap`
|Aura

|`--vaadin-dashboard-widget-title-color`
|Aura

|`--vaadin-dashboard-widget-title-font-size`
|Aura

|`--vaadin-dashboard-widget-title-font-weight`
|Aura

|`--vaadin-dashboard-widget-title-line-height`
|Aura

|`--vaadin-dashboard-widget-title-wrap`
|Aura, Lumo

|===


include::../_styling-section-intros.adoc[tag=selectors]
Expand Down
4 changes: 2 additions & 2 deletions frontend/themes/docs/dashboard.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
.dashboard-widget-content {
--stripe-color: var(--vaadin-background-container-strong);
height: 100%;
background: repeating-linear-gradient(45deg, var(--lumo-contrast-5pct), var(--lumo-contrast-5pct) 10px, transparent 10px, transparent 20px) var(--lumo-contrast-5pct);
border-radius: var(--lumo-border-radius-m);
background: repeating-linear-gradient(45deg, var(--stripe-color), var(--stripe-color) 10px, transparent 10px, transparent 20px) var(--stripe-color);
}

.dashboard-widget-content.small {
Expand Down