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 alsowb-skeleton
.wb-no-select
Prevent text selection with the mouse (appliesuser-select
CSS rule).wb-rainbow
Colorize distinct indentation levels.wb-rtl
Render the tree in right-to-left mode by flipping the behavior ofwb-helper-end
andwb-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 withwb-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 (unlesswb-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 iniconMaps
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 (unlesswb-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;
}