Custom Styling Demo
This page demonstrates customized tree styling. This is achieved through a combination of using the customizations property of TreeViewNode data to apply custom styles to parts of nodes, along with a custom skinStyle TreeView prop and associated stylesheet. Of course, you can also just write some very specific selectors to override the default styles if you like pain.
First, let’s look at the default styles. There’s not much to see here, since the intention is for the user to handle styling the treeview while the component focuses on creating a workable structure. Things generally line up right, but not much more can be said for it.
Some simple customizations can be done by applying custom classes to various parts of the tree using the customizations property, most likely in the modelDefaults parameter of the TreeView itself. In this example, customizations.classes.treeViewNodeSelfText is given a value of big-text. The big-text class is defined in a classbased.css stylesheet.
In this example, a treeview has been given a skin-class prop value of grayscale. This effectively swaps out a class named default on the TreeView for the one specified as the skin-class. This completely removes the default styling. To provide new styles, a new stylesheet was created based on the default styles (copied right from the browser). This gives complete control of the styling, allowing for easier usage of things like Font Awesome as seen here.
<tree id="customtree-gray" :initial-model="model" :model-defaults="modelDefaults" :skin-class="'grayscale'"></tree>