4 ms·
For what it's worth... In Sciter you can simply define tree view as <select type="tree">: <select type="tree" treelines> <option> <caption
by c-smile 4y ago
For what it's worth...
In Sciter you can simply define tree view as <select type="tree">:
<select type="tree" treelines>
<option>
<caption>Giant planets</caption>
<option>
<caption>Gas giants</caption>
<option>Jupiter</option>
<option>Saturn</option>
</option>
<option>
<caption>Ice giants</caption>
<option>Uranus</option>
<option>Neptune</option>
</option>
</option>
</select>
And you will get:
https://sciter.com/wp-content/uploads/2022/11/select-tree.png https://sciter.com/wp-content/uploads/2022/11/select-tree.pn...
Tree view is quite popular in desktop UI, so I've decided to add it as built-in.
And needless to say, that rendering of a tree is just one part - it should also be keyboard navigation and other a18y things.
As of tree lines themselves:
:scope[treelines] option > option
{
display: list-item;
list-style-type: tree-line; // <<<< Sciter's CSS++
list-marker-size:1px;
list-marker-color:#ccc;
list-marker-style:solid;
}