Customizing the Group Collapse Button

If you use folding in your application, you might also use CollapsibleNodeStyleDecorator to add collapse buttons to your group nodes. If so, you might want to change the collapse button visualization.

CSS Styling

The collapse button offers a CSS class, .yfiles-collapsebutton, that allows you to style the button's DOM elements. Since the button consists of a g element with several children, you might also have to style the children. Use your browser's Elements view to find out about the button's DOM structure. Here is the general DOM structure:

<g class="yfiles-collapsebutton yfiles-collapsebutton-checked">
  <rect></rect> <!-- border and background -->
  <path></path> <!-- +/- icon -->
</g>

Here's an example style:

.yfiles-collapsebutton rect {
  fill: #eeeeee;
  fill-opacity: 1;
  stroke: #202020;
}
.yfiles-collapsebutton path {
  fill: #202020;
  stroke: #202020;
}

You can also style the checked or unchecked state using the classes yfiles-collapsebutton-checked and yfiles-collapsebutton-unchecked.

Changing Button Placement and Insets

You can control the placement of the button with the buttonPlacement property of the CollapsibleNodeStyleDecorator. This property uses one of the default label models provided by yFiles for HTML to determine the button's position. The button is treated as a label for placement calculations.

You can set the padding, or the space around the button, using the padding property. The group node style needs to support this feature for the padding setting to be applied correctly.

Customizing the Button on the DOM Level

If you want to create a custom button visualization, subclass CollapsibleNodeStyleDecorator and implement the createButton method to create the desired button DOM element. Wrap the element in an SvgVisual and return it. You can find examples for creating a visual in the Custom Styles Tutorial.