Tree View

Tree View muestra datos jerárquicos en una lista anidada donde cada elemento puede expandirse, marcarse o seleccionarse. Los elementos se componen con los componentes TreeViewItem y TreeViewItemContent; el árbol no acepta una propiedad data.

• Fruits
  • Apple
  • Banana
• Vegetables

Uso

<script>
	import { TreeView, TreeViewItem, TreeViewItemContent } from 'fluentui-svelte';
</script>

<TreeView selectionMode="multiple">
	<TreeViewItem id="fruits" type="branch">
		<TreeViewItemContent>Fruits</TreeViewItemContent>
		<TreeView>
			<TreeViewItem id="apple">
				<TreeViewItemContent>Apple</TreeViewItemContent>
			</TreeViewItem>
			<TreeViewItem id="banana" disabled>
				<TreeViewItemContent>Banana</TreeViewItemContent>
			</TreeViewItem>
		</TreeView>
	</TreeViewItem>
	<TreeViewItem id="vegetables">
		<TreeViewItemContent>Vegetables</TreeViewItemContent>
	</TreeViewItem>
</TreeView>

Anidar un TreeView dentro de un TreeViewItem de tipo='branch' crea un subárbol. Usa openItems / checkedItems en el TreeView raíz (bindable) para controlar programáticamente el estado abierto y marcado.

Checkable Items

Set selectionMode="multiple" to render checkboxes on selectable items.

• Fruits
  • Apple
  • Banana

Controlling Open and Checked State

Use the bindable openItems and checkedItems props on the root TreeView to control state programmatically.

• Fruits
  • Apple
  • Banana

Propiedades del componente (TreeView)

Name	Type	Description
ref	HTMLUListElement	Referencia DOM enlazable del elemento ul raíz.
size	'small' | 'medium' | 'large'	Tamaño visual del árbol. El valor predeterminado es 'medium'.
navigationMode	'tree' | 'treegrid'	Modo de navegación por teclado. El valor predeterminado es 'tree'.
selectionMode	'single' | 'multiple'	Modo de selección para elementos marcables. El valor predeterminado es 'multiple'.
openItems	string[] | SvelteSet<string>	Lista o conjunto enlazable de ids de elementos abiertos. Usa SvelteSet cuando se proporciona un virtualizer.
checkedItems	string[] | SvelteSet<string>	Lista o conjunto enlazable de ids de elementos marcados. Usa SvelteSet cuando se proporciona un virtualizer.
onOpenChange	(e: Event, openItems: string[]) => void	Callback que se ejecuta cuando un elemento se expande o se contrae.
onCheckedChange	(e: Event, checkedItems: string[]) => void	Callback que se ejecuta cuando un elemento se marca o se desmarca.
virtualizer	TreeViewVirtualizer	Adaptador opcional para bibliotecas de windowing o listas virtuales. Cuando se proporciona, solo la parte renderizada está en el DOM.
children	Snippet	Los elementos hijos TreeViewItem del árbol.

Propiedades del componente (TreeViewItem)

Name	Type	Description
id	string	Identificador único del elemento. Obligatorio para el seguimiento del estado abierto y marcado.
type	'item' | 'branch'	Indica si el elemento es una hoja ('item') o una rama que puede contener un TreeView anidado.
ref	HTMLLIElement	Referencia DOM enlazable del elemento li.
value	string | number	Valor opcional asociado al elemento.
text	string	Etiqueta de texto accesible opcional usada por el árbol.
open	boolean	Estado abierto enlazable para elementos con type='branch'.
checked	boolean	Estado marcado enlazable para elementos seleccionables.
indeterminate	boolean	Indica si el elemento está en un estado de marcado indeterminado.
disabled	boolean	Deshabilita el elemento.
index	number	Índice explícito; se usa con un virtualizer para mantener sincronizada la navegación por teclado.
onOpenChange	(e: Event, data: { id: string; open: boolean }) => void	Callback que se ejecuta cuando este elemento se expande o se contrae.
onCheckedChange	(e: Event, data: { id: string; checked: boolean }) => void	Callback que se ejecuta cuando este elemento se marca o se desmarca.

Propiedades del componente (TreeViewItemContent)

Name	Type	Description
ref	HTMLDivElement	Referencia DOM enlazable del elemento de diseño.
expandIcon	Snippet | Component	Icono personalizado renderizado para la acción de expandir o contraer.
iconBefore	Snippet | Component	Icono renderizado antes del texto del elemento.
iconAfter	Snippet | Component	Icono renderizado después del texto del elemento.
aside	Snippet | Component	Contenido renderizado en el lado final de la fila.
actions	Snippet | Component	Acciones interactivas renderizadas al pasar el cursor o al recibir foco.
children	Snippet	El contenido de la etiqueta del elemento.