Class NodeExpandIcon
Represents the expanded state of the node.
Namespace: Syncfusion.Blazor.Diagrams
Assembly: Syncfusion.Blazor.dll
Syntax
public class NodeExpandIcon : SfDiagramBase
Remarks
Node has different kinds of states such as Expand and Collapse state. When the user clicks ExpandIcon, all the children from the respective node will get expanded whereas CollapseIcon is clicked, then all children from the respective node will get collapsed. The following code shows, how to define NodeExpandIcon and its properties.
Examples
<SfDiagram Height="600px" Nodes="@NodeCollection">
</SfDiagram>
@code{
public ObservableCollection<DiagramNode> NodeCollection = new ObservableCollection<DiagramNode>() { };
protected override void OnInitialized()
{
// A node is created and stored in nodes collection.
DiagramNode Node = new DiagramNode()
{
// Position of the node
OffsetX = 250,
OffsetY = 250,
// Size of the node
Width = 100,
Height = 100,
Style = new NodeShapeStyle() { Fill = "#6BA5D7", StrokeColor = "white" },
ExpandIcon = new NodeExpandIcon()
{
Width = 70,
Height = 20,
Shape = IconShapes.ArrowDown,
Fill = "red",
BorderColor = "black",
BorderWidth = 2,
CornerRadius = 5
},
};
NodeCollection.Add(Node);
}
}
Constructors
NodeExpandIcon()
Represents the expanded state of the node.
Declaration
public NodeExpandIcon()
Properties
BorderColor
Gets or sets the border color of an icon.
Declaration
public string BorderColor { get; set; }
Property Value
Type | Description |
---|---|
System.String |
BorderWidth
Gets or sets the border width of an icon. By default, it is set to 1.
Declaration
public double BorderWidth { get; set; }
Property Value
Type | Description |
---|---|
System.Double |
Content
Gets or sets the custom content of an icon.
Declaration
public string Content { get; set; }
Property Value
Type | Description |
---|---|
System.String |
CornerRadius
Gets or sets the corner radius of an icon border.
Declaration
public double CornerRadius { get; set; }
Property Value
Type | Description |
---|---|
System.Double |
Remarks
CornerRadius property is used to provide a rounded border instead of a sharp one. By default, it set to 0.
Fill
Gets or sets the fill color of an Icon. By default, it is set to white.
Declaration
public string Fill { get; set; }
Property Value
Type | Description |
---|---|
System.String |
Height
Gets or sets the height of an Icon. By default, it is set to 10.
Declaration
public double Height { get; set; }
Property Value
Type | Description |
---|---|
System.Double |
HorizontalAlignment
Describes how an Icon element is horizontally positioned or stretched in the node.
Declaration
public HorizontalAlignment HorizontalAlignment { get; set; }
Property Value
Type | Description |
---|---|
HorizontalAlignment |
Remarks
The list of following options is used to defining the Horizontal Alignment of an icon |
1. Stretch - Stretches the diagram element throughout the node. |
2. Left - Aligns the diagram element at the left of the node. |
3. Right - Aligns the diagram element at the right of the node. |
4. Center - Aligns the diagram element at the center of the node. |
5. Auto - Aligns the diagram element based on the characteristics of the node. |
Margin
Sets the space around the expand icon. By default, it is set to 0 from all sides.
Declaration
public ExpandIconMargin Margin { get; set; }
Property Value
Type | Description |
---|---|
ExpandIconMargin |
Examples
ExpandIcon = new NodeExpandIcon() {
Margin = new ExpandIconMargin { Top = 0 , Left = 0, Bottom = 0, Right = 0 } ,
},
Offset
Specifies the position of an icon relative to the bounds of the node.
Declaration
public IconOffset Offset { get; set; }
Property Value
Type | Description |
---|---|
IconOffset |
Remarks
Offset values range from 0 to 1. By default, the offset values are set to X= 0.5 and Y=1. |
1. When x= 0 and y = 0, then the icon will be position at the top left corner of the node. |
2. When x= 0.5 and y = 0.5, then the icon will be position at the center of the node. |
3. When x= 1 and y = 1, then the icon will be position at the bottom right corner of the node. |
Padding
Specifies the space inside the border of an icon. By default, it is set 2 from all sides.
Declaration
public IconPadding Padding { get; set; }
Property Value
Type | Description |
---|---|
IconPadding |
Examples
ExpandIcon = new NodeExpandIcon() {
Padding = new IconPadding { Top = 0 , Left = 0, Bottom = 0, Right = 0 }
}
PathData
Defines the geometry of a path.
Declaration
public string PathData { get; set; }
Property Value
Type | Description |
---|---|
System.String |
Shape
Defines the shape information of the icon.
Declaration
public IconShapes Shape { get; set; }
Property Value
Type | Description |
---|---|
IconShapes |
Remarks
There are several shapes in the shape category of an icon such as Minus, Plus, ArrowUp, Arrow down, etc., By default, it will be None.
VerticalAlignment
Describes how an Icon element is vertically positioned or stretched in the node.
Declaration
public VerticalAlignment VerticalAlignment { get; set; }
Property Value
Type | Description |
---|---|
VerticalAlignment |
Remarks
The list of following options is used to defining the vertical Alignment of an icon. |
1. Stretch - Stretches the diagram element throughout the node. |
2. Left - Aligns the diagram element at the left of the node. |
3. Right - Aligns the diagram element at the right of the node. |
4. Center - Aligns the diagram element at the center of the node. |
5. Auto - Aligns the diagram element based on the characteristics of the node. |
Width
Gets or sets the width of an icon. By default, it is set to 10.
Declaration
public double Width { get; set; }
Property Value
Type | Description |
---|---|
System.Double |