Skip to content

Styling#

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#

Info

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;
}