Styling

TL;DR

Common CSS classes allow custom styling and effects.

Feature Classes

We can add special classes to the tree's <div> container in order to enable custom behavior:

• wb-alternate
  Render even and odd rows in alternating background shades.
• wb-checkbox-auto-hide
  Apply CSS rules that hide unselected checkbox icons unless the mouse hovers over a row.
• wb-fade-expander
  Apply CSS rules that show expander icons only while the mouse hovers over the tree.
• wb-initializing
  This class is automatically removed when the tree is fully initialized. Combining this class with other selectors allows to define CSS rules that only apply during initial loading. See also wb-skeleton.
• wb-no-select
  Prevent text selection with the mouse (applies user-select CSS rule).
• wb-rainbow
  Colorize distinct indentation levels.
• wb-rtl
  Render the tree in right-to-left mode by flipping the behavior of wb-helper-end and wb-helper-start classes.

For example

<div id="demo-tree" class="... wb-no-select wb-checkbox-auto-hide">...</div>

Automatic Styles

These classes are automatically set on the tree's <div> container, depending on the current mode, allowing for custom CSS rules:

• wb-grid
• wb-fixed-col
• wb-cell-mode

These classes are automatically set for distinct rows, allowing custom CSS rules:

• wb-active
• wb-busy
• wb-error
• wb-invalid
• wb-loading
• wb-match
• wb-selected
• wb-skeleton
  Added to rows, when the skeleton tree option is true. Applies CSS styles that render titles as glowing placeholders. (Typically combined with wb-initializing.)
• wb-status-STATUS, e.g. wb-status-error
• wb-submatch

These classes are automatically set for distinct column spans, allowing custom CSS rules:

• wb-active
• wb-busy
• wb-error
• wb-invalid

todo: example;

Helper Classes

This classes can be added to column definitions in order to enable custom formatting:

• wb-helper-center
  Align cell content to the center.
• wb-helper-disabled
  Apply disabled style to cell content, i.e. render in a dimmed color.
• wb-helper-end
  Align cell content to the right (unless wb-rtl is set on the container).
• wb-helper-hidden
  Hide element content.
• wb-helper-invalid
  Apply invalid style to cell content, i.e. render in red.
• wb-helper-lazy-expander
  Can be used in iconMaps to make a font icon appear colored.
• wb-helper-link
  Apply link style to cell content.
• wb-helper-start
  Align cell content to the left (unless wb-rtl is set on the container).

CSS Variables

Many CSS styles can be accessed and modified using JavaScript like so:

document.body.style.setProperty("--wb-node-text-color", "#ff00ff");
document
  .querySelector("#tree")
  .style.setProperty("--wb-font-stack", "monospace");

See wunderbaum.scss for a complete list of all availabe CSS variables.

CSS Hacks

See also

See also the Render Tutorial for details on the markup structure and used class names.

div.wunderbaum {
  scroll-behavior: smooth;
}

/* Show tree skeleton while initializing. */
div.wunderbaum.wb-skeleton.wb-initializing {
  background-position-y: 20px;
  background-image: url("skeleton-transp.png");
  background-repeat: no-repeat;
}

* {
  padding: 0;
  margin: 0;
  /* prevent scrollbars, which would break `100vh` */
  overflow: hidden;
}

div.wunderbaum:focus-visible {
  /* Suppress system focus outline. */
  outline-style: none;
}