CRUD
- Usage
- Styling
CSS Selectors
The following CSS selectors can be used in stylesheets to target the various parts and states of the component.
- 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