Docs

Docs

CRUD

Styling API reference for the CRUD component.

CSS Selectors

The following CSS selectors can be used in stylesheets to target the various parts and states of the component. See the Styling documentation for more details on how to style components.

Root element

vaadin-crud

Grid

Grid element

vaadin-crud > vaadin-grid

Grid element, non-Flow

vaadin-crud > vaadin-crud-grid

Edit button in grid

vaadin-crud-edit

Edit button icon

vaadin-crud-edit::part(icon)::before

Toolbar below grid

vaadin-crud::part(toolbar)

See Grid selectors for details on styling the grid

Toolbar

Toolbar

vaadin-crud::part(toolbar)

New item button

vaadin-crud > vaadin-button[slot="new-button"]

Editor

Editor header

vaadin-crud::part(header)

Editor footer

vaadin-crud::part(footer)

Editor title

vaadin-crud > [slot="header"]

Editor form

vaadin-crud-form

Save button

vaadin-crud > vaadin-button[slot="save-button"]

Cancel button

vaadin-crud > vaadin-button[slot="cancel-button"]

Delete button

vaadin-crud > vaadin-button[slot="delete-button"]

Side/Bottom Edit Panel

CRUD with editor on the side

vaadin-crud[editor-position="aside"]

CRUD with editor at the bottom

vaadin-crud[editor-position="bottom"]

Editor panel

vaadin-crud::part(editor)

Editor scroller (content above toolbar)

vaadin-crud::part(scroller)

Edit Dialog

Modality curtain (backdrop)

vaadin-crud::part(backdrop)

Dialog surface

vaadin-crud::part(overlay)

Content area

vaadin-crud::part(content)