Style in Blazor Diagram Component

12 Dec 20247 minutes to read

How to customize the connector endpoint handle

To customize the visual appearance of the connector endpoint handle in a diagram, apply the following CSS code:

<style>
    .e-diagram-endpoint-handle {
        fill: red;
        stroke: green;
    }
</style>

You can download a complete working sample from GitHub

How to customize the connector endpoint handle when it is connected

To enhance the visual appearance of the connector endpoint handle when it is in a connected state, apply the following CSS code:

<style>
    .e-diagram-endpoint-handle.e-connected {
    fill: red;
    stroke: green;
   }
</style>

You can download a complete working sample from GitHub

How to customize the connector endpoint handle when it disable

To customize the visual appearance of the connector endpoint handle when it is in a disabled state, apply the following CSS code to your Blazor application:

<style>
   .e-diagram-endpoint-handle.e-disabled {
    fill: red;
    opacity: 1;
    stroke: green;
   }
</style>

You can download a complete working sample from GitHub

How to customize the bezier connector handle

To customize the appearance of the Bezier connector handle, apply the following CSS code to your Blazor application:

<style>
  .e-diagram-bezier-handle {
    fill: red;
    stroke: green;
  }
</style>

You can download a complete working sample from GitHub

How to customize the bezier connector line

To customize the appearance of the Bezier connector line, apply the following CSS code to your Blazor diagram:

<style>
 .e-diagram-bezier-line {
  stroke: red;
}
</style>

You can download a complete working sample from GitHub

How to customize the resize handle

To customize the appearance of the resize handle, apply the following CSS code to your Blazor application:

<style>
    .e-diagram-resize-handle {
        fill: white;
        opacity: 1;
        stroke: white;
    }
</style>

You can download a complete working sample from GitHub

How to customize the selector pivot line

To customize the appearance of the selector pivot line, apply the following CSS properties:

<style>
  .e-diagram-pivot-line {
    stroke: red;
  }
</style>

You can download a complete working sample from GitHub

How to customize the selector border

To customize the appearance of the selector border, apply the following CSS styles:

<style>
 .e-diagram-border {
    stroke: red;
  }
</style>

You can download a complete working sample from GitHub

How to customize the rotate handle

To customize the appearance of the rotation handle, apply the following CSS code to your Blazor diagram:

<style>
.e-diagram-rotate-handle {
    fill: red;
    stroke: green;
  }
</style>

You can download a complete working sample from GitHub

How to customize the symbol palette while hovering over a symbol

To customize the visual appearance of symbols in the symbol palette during mouse hover interactions, apply the following CSS code to your Blazor Diagram component:

<style>
.e-symbolpalette .e-symbol-hover:hover {
    background: red;
  }
</style>

You can download a complete working sample from GitHub

How to customize the symbol palette when symbol is selected

To customize the visual appearance of the symbol palette when a symbol is selected, apply the following CSS code to enhance the user interface:

<style>
.e-symbolpalette .e-symbol-selected {
    background: blue;
  }
</style>

You can download a complete working sample from GitHub

How to customize the ruler

To customize the visual appearance of the ruler properties, apply the following CSS code to your Blazor diagram:

<style>
.e-diagram .e-ruler {
    background-color: red;
    font-size: 13px;
  }
</style>

You can download a complete working sample from GitHub

How to customize the ruler overlap

To customize the visual appearance of the ruler overlap properties, apply the following CSS code to your Blazor diagram component:

<style>
.e-diagram .e-ruler-overlap {
    background-color: red;
  }
</style>

You can download a complete working sample from GitHub

How to customize the text edit

To customize the appearance of the text edit properties, apply the following CSS code to your Blazor application:

<style>
 .e-diagram .e-diagram-text-edit {
    background: white;
    border-color: red;
    border-style: dashed;
    border-width: 1px;
    box-sizing: content-box;
    color: black;
    min-width: 50px;
  }
</style>

You can download a complete working sample from GitHub

How to customize the text edit on selection

To customize the appearance of the text edit control when selected, apply the following CSS properties:

<style>
 .e-diagram-text-edit::selection {
    background: red;
    color: green;
  }
</style>

You can download a complete working sample from GitHub

How to customize the highlighter

To customize the appearance of the highlighter, you can use the following CSS code:

<style>
.e-diagram-highlighter {
  stroke:red;
  stroke-width: 7;
}
</style>

You can download a complete working sample from GitHub

How to customize the diagram background color

To customize the background color of the diagram, apply the following CSS rule:

<style>
  .e-diagram {
      background-color: green;
  }
</style>

You can download a complete working sample from GitHub

How to customize the overview resize handle

To customize the appearance of the overview resize handle, apply the following CSS code to your Blazor application:

<style>
    .overviewresizer
    {
          fill:blue;
    }
</style>

You can download a complete working sample from GitHub

How to customize the helper

To customize the appearance of the helper element, apply the following CSS rules:

<style>
   .e-diagram-helper {
      stroke: red;
      stroke-width: 5px;
  }

</style>

You can download a complete working sample from GitHub

How to customize the grid

To customize the visual appearance of the diagram grid, apply the following CSS styles:

<style>
     .e-diagram-thin-grid {
       stroke: red;
   }

</style>

You can download a complete working sample from GitHub

To customize the appearance of the thick grid lines in your diagram, apply the following CSS code:

<style>
     .e-diagram-thick-grid {
       stroke: red;
   }

</style>

You can download a complete working sample from GitHub

How to customize the symbol palette symbols background color

To customize the background color of symbols in the symbol palette, apply the following CSS code:

<style>
     .e-symbol-draggable {
       stroke: red;
   }

</style>

You can download a complete working sample from GitHub

How to customize the style of orthogonal segment thumb

To customize the visual appearance of the Orthogonal segment thumb, apply the following CSS code to your stylesheet:

<style>
     .e-diagram-ortho-segment-handle {
       stroke: red;
       stroke-width: 1px;
       fill: green;
   }
</style>

You can download a complete working sample from GitHub

How to customize the bezier and straight segment thumb

To customize the visual appearance of Bezier and Straight connector segments, apply the following CSS code:

<style>
  .e-diagram-bezier-segment-handle {
    fill: red;
    stroke: green;
  }
</style>

You can download a complete working sample from GitHub