Vaadin WC API reference

DashboardSection

View as MD

Description

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
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.

Properties

sectionTitle

Type: string | null | undefined

The title of the section

Methods

focus

Type: (options?: FocusOptions | undefined) => void