Skip to content zachleat Project

🚾Web Component Star Search

A searchable catalog of standalone web components.

<vaadin-dashboard-section>

A section component for use with the Dashboard component

Category
Layout
Built with
Lit
Library
Vaadin
Author
Vaadin
Package
@vaadin/dashboard
Component size
12.7 kB JS (minified + gzipped, JS includes dependencies beyond the library)
Library size
19.9 kB JS (shared by every Vaadin component, loaded once per page)
Popular
2 out of 5
Downloads
22,622/week · jsDelivr 2,381 hits/month (whole @vaadin/dashboard package)
Latest stable version
25.3.2
Last published
Component last changed
(in 25.3.0)
License
Vaadin Commercial License Pro

A section component for use with the Dashboard component

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

Example

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

Styling

The following shadow DOM parts are available for styling:

Part name Description
header The header of the section
title The title of the section
button Set on all the buttons (move, remove and others)
move-button The move button
remove-button The remove button
move-backward-button The move backward button when in move mode
move-forward-button The move forward button when in move mode
move-apply-button The apply button when in move mode

The following state attributes are available for styling:

Attribute Description
selected Set when the element is selected.
focused Set when the element is focused.
move-mode Set when the element is being moved.
editable Set when the element is editable.
first-child Set when the element is the first child of the parent.
last-child Set when the element is the last child of the parent.

See Styling Components documentation.

Attributes