Available Themes

• Default: Clean, standard appearance
• Dark: Dark background with light text
• Compact: Reduced spacing for dense layouts
• Colorful: Color-coded by node type
• Minimal: Ultra-clean design

CSS Classes

• treeRootClass - Applied to root tree element
• nodeClass - Applied to each tree node
• shouldUseBootstrapIconClasses - Enable Bootstrap icons

Current Theme

Default Theme

CSS Selectors

• .tree-root - Root tree container
• .tree-node - Individual tree nodes
• .tree-node-content - Node content wrapper
• .tree-node-icon - Node icons
• .tree-expand-button - Expand/collapse buttons

Data Attributes

• [data-type] - Node type for type-specific styling
• [data-level] - Node depth level
• [data-expanded] - Expansion state
• [data-selected] - Selection state

CSS Variables

Use CSS custom properties for consistent theming across your entire tree component.

Icon Systems

• Bootstrap Icons: Consistent, scalable vector icons
• Emoji Icons: Colorful, universally supported
• Custom Icons: Font icons or SVG sprites
• No Icons: Text-only display

Bootstrap Icon Classes

When enabled, the tree uses Bootstrap icon classes like bi-folder, bi-file-text, etc.

Icon Customization

• Override icon classes with CSS
• Use data attributes for type-specific styling
• Implement custom icon mappings
• Support for icon fonts and SVG sprites