Display directory structures and hierarchical data with file tree and generic tree components.
File tree
Use wc-files, wc-dir, and wc-file to render a directory structure:
<wc-files>
<wc-dir name="my-docs" open>
<wc-file name="docslit.json" highlight></wc-file>
<wc-dir name="docs" open>
<wc-file name="introduction.md"></wc-file>
<wc-file name="quickstart.md"></wc-file>
</wc-dir>
<wc-dir name="components">
<wc-file name="my-widget.js"></wc-file>
</wc-dir>
<wc-dir name="dist">
<wc-file name="index.html"></wc-file>
</wc-dir>
</wc-dir>
</wc-files>
The directory name.
Expand the directory by default.
The file name.
Highlight this file to draw attention to it.
Custom icon name to override the default file icon.
Generic tree
For non-file hierarchies, use wc-tree and wc-tree-item: