DashboardWidget

Description

A Widget component for use with the Dashboard component

<vaadin-dashboard-widget widget-title="Title">
  <span slot="header-content">Header</span>
  <div>Content</div>
</vaadin-dashboard-widget>

You can configure the item by using slot names.

Slot name	Description
`header-content`	A slot for the widget header content.

<vaadin-dashboard-widget widget-title="Title">
  <span slot="header-content">Header</span>
  <div>Content</div>
</vaadin-dashboard-widget>

The following shadow DOM parts are available for styling:

Part name	Description
`header`	The header of the widget
`title`	The title of the widget
`content`	The content of the widget
`move-button`	The move button
`remove-button`	The remove button
`resize-button`	The resize 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
`resize-shrink-width-button`	The shrink width button when in resize mode
`resize-grow-width-button`	The grow width button when in resize mode
`resize-shrink-height-button`	The shrink height button when in resize mode
`resize-grow-height-button`	The grow height button when in resize mode
`resize-apply-button`	The apply button when in resize mode

The following custom properties are available:

Custom Property	Description
`--vaadin-dashboard-widget-colspan`	colspan of the widget
`--vaadin-dashboard-widget-rowspan`	rowspan of the widget
`--vaadin-dashboard-widget-background`	widget background
`--vaadin-dashboard-widget-border-radius`	widget corner radius
`--vaadin-dashboard-widget-border-width`	widget border width
`--vaadin-dashboard-widget-border-color`	widget border color
`--vaadin-dashboard-widget-shadow`	widget shadow (non edit mode)
`--vaadin-dashboard-widget-padding`	padding around widget content
`--vaadin-dashboard-widget-title-wrap`	widget title wrap

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.
`resize-mode`	Set when the element is being resized.
`resizing`	Set when the element is being resized.
`dragging`	Set when the element is being dragged.
`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.

Type: string | null | undefined

The title of the widget.

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