CRUD
- Usage
- Styling
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