The <luna-tree> and <luna-tree-item> components display hierarchical tree structures with selection modes and lazy loading.
Paths
/lunadom/components/tree/tree.js REQUIRED
/lunadom/components/tree-item/tree-item.js REQUIRED
Indent Guides & Selection
Mode: Leaf selection
📁 Project Root
📁 src
📄 index.js
📄 app.js
🎨 styles.css
📁 public
📁 node_modules (Disabled)
📄 package.json
Multiple Selection
Settings
User Profile
Notifications
Security
Advanced
API Keys
Webhooks
Lazy Loading & Custom Icons
＋
－
Click to Lazy Load
Custom Icons
👉
Pointy items
⭐️
Star items
Customization
Slots
luna-tree
default - The content of the tree (luna-tree-item elements).
luna-tree-item
default - The content of the tree item (label/text).
children - Child tree items (nested luna-tree-item elements).
expand-icon - Custom expand icon.
collapse-icon - Custom collapse icon.
Attributes
luna-tree
selection - Selection mode (single, multiple, leaf). Defaults to 'single'.
luna-tree-item
expanded - Whether the tree item is expanded.
selected - Whether the tree item is selected.
disabled - Whether the tree item is disabled.
lazy - Whether the tree item uses lazy loading.
loading - Whether the tree item is currently loading.
CSS Variables
luna-tree-item
--indent-size - The size of the indent.
--indent-guide-width - The width of the indent guide.
--indent-guide-color - The color of the indent guide.
--indent-guide-style - The style of the indent guide.
--indent-guide-offset - The offset of the indent guide.
--luna-tree-item-height - The height of the tree item.
Events
luna-tree
luna-selection-change - Emitted when the selection changes.
luna-tree-item
luna-expand - Emitted when the tree item is expanded.
luna-collapse - Emitted when the tree item is collapsed.
luna-select - Emitted when the tree item is selected.
Example Code
<!-- Basic Tree with Indent Guides -->
<luna-tree
selection="leaf"
style="
--indent-guide-width: 1px;
--indent-guide-color: #333;
--indent-guide-offset: 4px;"
>
<luna-tree-item expanded>
📁 Project Root
<div slot="children">
<luna-tree-item expanded>
📁 src
<div slot="children">
<luna-tree-item>📄 index.js</luna-tree-item>
<luna-tree-item>📄 app.js</luna-tree-item>
<luna-tree-item>🎨 styles.css</luna-tree-item>
</div>
</luna-tree-item>
<luna-tree-item>📁 public</luna-tree-item>
<luna-tree-item disabled>📁 node_modules (Disabled)</luna-tree-item>
<luna-tree-item>📄 package.json</luna-tree-item>
</div>
</luna-tree-item>
</luna-tree>
<!-- Multiple Selection -->
<luna-tree selection="multiple">
<luna-tree-item expanded>
Settings
<div slot="children">
<luna-tree-item selected>User Profile</luna-tree-item>
<luna-tree-item>Notifications</luna-tree-item>
<luna-tree-item selected>Security</luna-tree-item>
</div>
</luna-tree-item>
</luna-tree>
<!-- Lazy Loading with Custom Icons -->
<luna-tree>
<luna-tree-item lazy id="lazy-node">
<span slot="expand-icon">＋</span>
<span slot="collapse-icon">－</span>
Click to Lazy Load
</luna-tree-item>
</luna-tree>
<script>
document.getElementById('lazy-node').addEventListener('luna-expand', (e) => {
const node = e.target;
if (node.hasAttribute('loaded')) return;
node.loading = true;
// Simulate API call
setTimeout(() => {
node.loading = false;
node.removeAttribute('lazy');
node.setAttribute('loaded', '');
const children = document.createElement('div');
children.setAttribute('slot', 'children');
children.innerHTML = `
<luna-tree-item>📄 Fetched Item 1</luna-tree-item>
<luna-tree-item>📄 Fetched Item 2</luna-tree-item>
`;
node.appendChild(children);
}, 1000);
});
</script>