Web TreeView Showcase

ST01 Theme Gallery

Pre-built themes and live styling examples

Live Theme Preview

Theme Selector

Select Theme:

Note: Web TreeView uses Shadow DOM. Custom styles are applied via CSS variables on the host element or via customStylesCallback.

Theme Details

Default

Standard styling with --tv- CSS variables

Theme Features:

Responsive design
Accessibility compliant
Smooth animations
CSS variable driven
Shadow DOM compatible

ST02 CSS Variables & Selectors

Available CSS variables and selectors for customization

CSS Variable Reference

Variable / Selector	Type	Default	Description
`--tv-accent-color`	Color	`var(--base-accent-color, #3b82f6)`	Primary accent color for selection, focus
`--tv-text-color`	Color	`var(--base-text-color-1, #1e293b)`	Primary text color
`--tv-indent-size`	Length	`calc(var(--tv-rem) * 2)`	Indentation per tree level
`--tv-node-bg-hover`	Color	-	Node background on hover
`--tv-node-bg-selected`	Color	-	Node background when selected
`--tv-node-transition`	Transition	-	Node hover animation (set 'none' to disable)
`.ltree-node`	Class	-	Individual tree node element
`.ltree-node-content`	Class	-	Node content area (text, icons)
`.ltree-toggle`	Class	-	Expand/collapse toggle button
`[data-tree-level]`	Attribute	-	Node depth level for custom styling
`[data-tree-path]`	Attribute	-	Node path for targeted styling

Blue CSS variables Yellow Internal classes Green Data attributes

Styling Examples

CSS Customization

CSS Architecture

The component uses Shadow DOM with CSS custom properties that inherit from the host element. Use --tv- prefixed variables for theming.

Targeting Strategy

CSS Variables: Set on host element, inherited by Shadow DOM
customStylesCallback: Inject CSS directly into Shadow DOM
Data attributes: Target specific levels or paths

Design System Integration

CSS variables fall back to --base-* variables from the design system (e.g. --base-accent-color, --base-text-color-1).

Responsive Design

CSS variables work with media queries for responsive theming.

ST03 Custom Themes

Create your own themes with CSS custom properties

Theme Examples

Dark Theme

Colorful Theme

Theme Implementation

Custom Themes

Theming Guide

CSS Custom Properties

Use CSS variables for consistent, maintainable themes that can be changed dynamically.

Dynamic Theming

Change themes at runtime by updating CSS custom property values with JavaScript.

Dark Mode Support

Use prefers-color-scheme media query to automatically switch themes based on user preferences.

Animation & Transitions

Control node hover animation via --tv-node-transition. Set to none to disable animations.

Layout Customization

Control spacing, indentation, and sizing with custom properties for consistent scaling.

ST04 Responsive Design

Mobile-friendly styling and responsive behaviors

Responsive Features

Touch-Friendly Interactions

Minimum 44px touch targets, appropriate spacing for mobile devices

Responsive Typography

Scales appropriately across devices with fluid typography

Flexible Layout

Adapts to container width, works in sidebars and full-width layouts

Keyboard Navigation

Full keyboard support with visible focus indicators

Responsive CSS

Responsive Styling

Mobile Optimization

Mobile-First Approach

Styles start with mobile-optimized defaults and enhance for larger screens.

Touch Optimization

44px minimum touch targets
Appropriate spacing between interactive elements
Clear visual feedback for touches

Accessibility

Respect user motion preferences
High contrast mode support
Keyboard navigation indicators
Screen reader compatibility

Performance

Efficient CSS that doesn't impact rendering performance on mobile devices.

ST05 Drag & Drop Styling

CSS classes for drag-drop visual feedback, drop zones, and touch support

Class Reference

Class	Category	Description
`.ltree-dragover-highlight`	Drag Over	Simple border highlight on drag-over target
`.ltree-dragover-glow`	Drag Over	Glow effect with arrow indicators for drop positions
`.ltree-glow-above`	Glow Position	Green glow on top edge (insert above)
`.ltree-glow-below`	Glow Position	Orange glow on bottom edge (insert below)
`.ltree-glow-child`	Glow Position	Purple glow on right edge (insert as child)
`.ltree-drop-placeholder`	Empty Tree	Container for empty tree drop zone
`.ltree-root-drop-zone`	Root Drop	Drop zone at bottom of non-empty trees
`.ltree-touch-ghost`	Touch	Ghost element that follows finger during touch drag
`.ltree-loading-overlay`	Loading	Semi-transparent overlay during isLoading=true

Tip: Use drag-over-node-class="ltree-dragover-glow" to enable the glow mode with arrow indicators.

Styling Examples

Drag & Drop Customization

Implementation Guide

Glow Mode

Use drag-over-node-class="ltree-dragover-glow" for position-aware visual feedback with directional arrows.

Touch Ghost

Customize the ghost element that follows the user's finger during touch drag operations.

Empty Tree Drop

Use renderEmptyZoneCallback to create custom drop targets for empty trees.

Loading State

The is-loading attribute shows an overlay - customize it via customStylesCallback.

Shadow DOM

All internal classes live inside Shadow DOM. Use customStylesCallback to override them.