Styling And Appearance in Blazor Diagram Component

14 Nov 20222 minutes to read

To modify the Diagram appearance, you need to override the default CSS of the Diagram. 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.