I componenti Magma sono web component: elementi personalizzati che scrivi come i tag HTML, con qualsiasi framework o senza. Le proprietà li configurano, gli eventi dicono cosa è successo, i metodi sono funzioni da chiamare sull'elemento e gli slot accolgono il contenuto che metti al suo interno.

Proprietà

Imposta una proprietà come attributo HTML nel markup, oppure come proprietà da JavaScript. La colonna Attributo dà il nome dell'attributo, un trattino quando coincide con la proprietà; le proprietà senza attributo, come array e funzioni, si impostano solo da JavaScript. Per spegnere un attributo booleano, rimuovilo: non scrivere mai disabled="false".actions - auto | visible | undefinedShow actions on the tree item on hover or by default.

appearance - depth | none | undefinedReflects the parent tree appearance (set by mds-tree); drives the depth/none layout without :host-context

async - boolean | undefinedSpecifies the tree should be opened asynchronously when after the click.

depth - number | undefinedSpecifies the tree branch depth. Internal: used by CSS to remove branch lines on first-level elements.

expanded - boolean | undefinedSpecifies if the tree is expanded.

icon - string | undefinedThe icon displayed in the button

label - stringSpecifies the label of the tree item

toggle - chevron | folder | undefinedSpecifies the icon of the element

togglePositiontoggle-positionleft | right | undefinedReflects the parent tree toggle icon position (set by mds-tree); drives the toggle-icon layout without :host-context

truncate - all | none | word | undefinedwordTruncate the text of the element on one single line.

Eventi

mdsTreeItemCollapseMdsTreeItemEventDetailEmits when the component attribute selected is changed

mdsTreeItemExpandMdsTreeItemEventDetailEmits when the component expand it’s children container

Metodi

expandexpand() => Promise<void>Expands the tree item, revealing its children.

refreshActionsrefreshActions() => Promise<void>internal Re-resolves the effective actions; called by mds-tree when its own actions changes so items that inherit it stay in sync.

Slot

Gli slot accolgono il contenuto che scrivi tra i tag del componente. Lo slot predefinito, quello senza nome, accetta solo testo, salvo dove la sua descrizione dice altrimenti. Se il componente ha anche la proprietà label, preferisci la proprietà. Il contenuto di uno slot con nome va su un figlio diretto, con il nome dello slot nell'attributo slot, ad esempio slot="action".(predefinito)Add mds-tree-item element/s.

Nessun nome slot

actionAdd mds-button, mds-icon or other types component and HTML element/s.