Group Node Style Demo

GroupNodeStyle is a style primarily intended for groups and folders, i.e., collapsed groups.

This style offers many configuration options for customizing its look. Please see chapter GroupNodeStyle in the Developer's Guide and the GroupNodeStyle API documentation for more detailed information.

The related GroupNodeLabelModel places node labels inside the tab or the background area next to the tab of a group or folder when used together with GroupNodeStyle.

Things to try

• Click the expansion state icons
  

  minus

  add_2

  keyboard_arrow_down

  keyboard_arrow_up

  arrow_drop_down

  arrow_drop_up

  
  to collapse groups or expand folders.
• Double-click a group or a folder. This will collapse a group and expand a folder even if there is no expansion state icon.
• When using the SVG style, move the mouse over one of the expansion state icons. The icon will slightly increase in size in response to the mouse hovering over it.
  This CSS transition effect is specified in the demo's local <style> definition.
• When using SVG styles, collapse a group or expand a folder with a chevron or triangle icon. The expansion state icon will change in an animated fashion in response to the state change.
  This CSS transition effect is specified in the demo's local <style> definition.
• Hover over a group node to get a tool tip that lists the configured properties for each group style.