Docs

Documentation versions (currently viewingVaadin 24)

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

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)

Editor header

vaadin-crud::part(header)

Editor title

vaadin-crud > [slot="header"]

Editor form

vaadin-crud-form

Editor toolbar

vaadin-crud::part(toolbar)

New item button

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

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"]

Edit Dialog

Edit dialog element

vaadin-crud-dialog-overlay

Buttons

vaadin-crud-dialog-overlay > vaadin-button

Save button

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

Cancel button

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

Delete button

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

See Dialog selectors for details on styling the dialog