Expand Button Customization

Demonstrates how to customize the position, appearance, and behavior of expand/collapse buttons on parent nodes.

Expand Button Customization

Functional Overview

This example demonstrates how to customize the expand/collapse buttons that appear on parent nodes, including their position, appearance, and behavior.

Implementation of Key Features

Expand Button Position

Configure where expand buttons appear on nodes:

const graphOptions: RGOptions = {
    defaultExpandHolderPosition: 'right' // 'left', 'right', 'top', 'bottom'
};

Per-Node Position Override

Set expand button position for individual nodes:

nodes: [
    { id: 'a', expandHolderPosition: 'right' },
    { id: 'b', expandHolderPosition: 'left' }
]

Custom Expand Button Styling

Style the expand button using CSS or custom components:

// CSS customization
.expand-holder {
    background: '#43a2f1';
    border-radius: '4px';
}

Creative Use Cases

• Directional Trees: Position buttons based on tree direction
• Custom Icons: Replace default buttons with custom icons
• Interactive UIs: Match expand buttons to app design
• Accessibility: Larger touch targets for mobile
• Visual Hierarchy: Different styles for different levels