Vaadin WC API reference

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.