Vaadin WC API reference

DashboardLayout

View as MD

Description

A responsive, grid-based dashboard layout component

<vaadin-dashboard-layout>
  <vaadin-dashboard-widget widget-title="Widget 1"></vaadin-dashboard-widget>
  <vaadin-dashboard-widget widget-title="Widget 2"></vaadin-dashboard-widget>
  <vaadin-dashboard-section section-title="Section">
    <vaadin-dashboard-widget widget-title="Widget in Section"></vaadin-dashboard-widget>
  </vaadin-dashboard-section>
</vaadin-dashboard-layout>

Styling

The following custom properties are available:

Custom Property Description
--vaadin-dashboard-col-min-width minimum column width of the layout
--vaadin-dashboard-col-max-width maximum column width of the layout
--vaadin-dashboard-row-min-height minimum row height of the layout
--vaadin-dashboard-col-max-count maximum column count of the layout
--vaadin-dashboard-gap gap between child elements. Must be in length units (0 is not allowed, 0px is)
--vaadin-dashboard-padding space around the dashboard's outer edges. Must be in length units (0 is not allowed, 0px is)

The following state attributes are available for styling:

Attribute Description
dense-layout Set when the dashboard is in dense mode.

See Styling Components documentation.

Properties

denseLayout

Type: boolean

Whether the dashboard layout is dense.

rootHeadingLevel

Type: number | null | undefined

Root heading level for sections and widgets. Defaults to 2.

If changed to e.g. 1:

  • sections will have the attribute aria-level with value 1
  • non-nested widgets will have the attribute aria-level with value 1
  • nested widgets will have the attribute aria-level with value 2