Styling And Appearance in Blazor Diagram Component

7 Jul 20222 minutes to read

To modify the Diagram appearance, you need to override the default CSS of the Diagram. Please find the list of CSS classes in the Diagram.

CSS class Purpose
.e-diagram-endpoint-handle Customize the connector endpoint handle.
.e-diagram-endpoint-handle.e-connected Customize the connector endpoint handle when connected.
.e-diagram-endpoint-handle.e-disabled Customize the connector endpoint handle when disabled.
.e-diagram-bezier-handle Customize the bezier connector handle.
.e-diagram-bezier-line Customize the bezier connector line.
.e-diagram-resize-handle Customize the resize handle.
.e-diagram-pivot-line Customize the selector pivot line.
.e-diagram-border Customize the selector border.
.e-diagram-rotate-handle Customize the rotate handle.
.e-symbolpalette .e-symbol-hover:hover Customize the symbol palette while hovering.
.e-symbolpalette .e-symbol-selected Customize the symbol palette when selected.
.e-diagram .e-ruler Customize the ruler.
.e-diagram .e-ruler-overlap Customize the ruler overlap.
.e-diagram .e-diagram-text-edit Customize the text edit.
.e-diagram-text-edit::selection Customize the text edit on selection.