Il primo esempio della pagina Pattern, dal vivo. Cambia le sue proprietà qui sotto e l'anteprima le segue; Ripristina riporta l'esempio com'era.

Proprietà

autovisibleactionsenumShow actions on the every tree item on hover or by default.

depthnoneappearanceenumSpecifies if the branches depth decorations are visible.

chevronfoldertoggleenumSpecifies the toggle icon of the element

leftrighttogglePositionenumSpecifies the toggle icon position of the element

allnonewordtruncateenumTruncate the text of the element on one single line.

asyncasyncbooleanSpecifies the tree should be opened asynchronously when after the click, .

expandedexpandedbooleanSpecifies if the tree is expanded.

labelstringSpecifies the selector of the target element, this attribute is used with querySelector method.

Panoramica

The <mds-tree> web component is the root container of the Magma Design System tree view, organizing a hierarchy of slotted <mds-tree-item> nodes into an expandable/collapsible structure. It owns no visual row of its own: it is a compound parent that configures, stacks, and propagates state to its children.

Semantic Behavior

Compound parent: The default slot accepts only <mds-tree-item> elements; the tree itself renders nothing but the slot and acts as the configuration and coordination root for the hierarchy.Depth seeding: Its direct children are assigned depth = 0, which removes the branch connector lines from the first level; deeper levels are indented by their nesting.Cascading expanded: Changing expanded on the tree at runtime propagates the new value to every descendant item present at load (the initial value is not propagated), opening or collapsing the whole hierarchy at once - except children marked async, which are left for on-demand resolution.Cascading toggle and truncate: Changing the toggle icon or the truncation mode on the tree pushes the value down to all descendant items so the whole tree stays visually consistent.Async branches: When async is set on an item, its branch is expected to resolve its children after the click rather than expanding from pre-rendered content; such items are excluded from the bulk expanded cascade.

Properties & Visual Configurations

appearance controls whether the depth-indicating branch decorations (connector lines and dots) are drawn: 'depth' shows the guide lines that visualize nesting; 'none' removes them for a flat look.actions governs how per-item action controls are surfaced: 'auto' reveals them on hover, 'visible' keeps them always shown.toggle selects the expand/collapse glyph for every item - 'chevron' for a generic disclosure arrow, 'folder' for a file-explorer metaphor; togglePosition places that glyph at the 'left' or 'right' of the label.

Other behavioral props

truncate sets how item labels overflow: 'word' truncates the line, 'all' clamps to multiple lines (paired with the --mds-tree-line-clamp custom property), 'none' lets text wrap freely.expanded is the only mutable, reflected state prop; change it on the root to open or close the entire tree programmatically (an expanded attribute present at first render opens nothing: set it on the items instead).