Tree View Experimental

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	Default	Description
ref bindable	HTMLUListElement		La referencia del DOM del elemento árbol.
size	'small' | 'medium' | 'large'	'medium'	El tamaño de cada item del árbol.
navigationMode	'tree' | 'treegrid'	'tree'	Si el árbol ocupa una sola parada de tabulación, o cada fila es alcanzable por su cuenta.
onOpenChange	(e: Event, openItems: string[]) => void		Se llama cada vez que una rama se abre o se cierra.
selectionMode	'single' | 'multiple'	'multiple'	Cuántos items se pueden marcar a la vez.
onCheckedChange	(e: Event, checkedItems: string[]) => void		Se llama cada vez que un item se marca o se desmarca.
virtualizer	TreeViewVirtualizer		Puente hacia una librería de virtualización. Solo el tramo de items renderizado vive en el DOM.
openItems bindable	string[] | SvelteSet<string>		Los ids de las ramas abiertas. Se requiere un `SvelteSet` cuando hay un `virtualizer`.
checkedItems bindable	string[] | SvelteSet<string>		Los ids de los items marcados. Se requiere un `SvelteSet` cuando hay un `virtualizer`.
children	Snippet		Los items del árbol.
TreeViewVirtualProps | TreeViewStaticProps
Element Attributes (ul)

Propiedades del componente (TreeViewItem)

Name	Type	Default	Description
id	string		El id del item, que el árbol usa para seguir su estado. Si no se indica, se genera uno.
type	'item' | 'branch'	'item'	Si el item contiene hijos y, por tanto, se puede abrir.
ref	HTMLLIElement		La referencia del DOM del elemento item.
value	string | number	id	El valor que reportan los eventos del árbol. Si no se indica, se usa el id del item.
text	string		La etiqueta del item, que usa la navegación por escritura.
open	boolean		Si la rama está abierta.
checked	boolean		Si el item está marcado.
indeterminate	boolean		Renderiza el checkbox en su estado mixto, cuando solo algunos hijos están marcados.
disabled	boolean		Deshabilita la interacción del usuario.
index	number		El índice real del item dentro del conjunto de datos. Obligatorio cuando el árbol está virtualizado.
onOpenChange	(e: Event, data: { id: string; open: boolean }) => void		Se llama cuando esta rama se abre o se cierra.
onCheckedChange	(e: Event, data: { id: string; checked: boolean }) => void		Se llama cuando este item se marca o se desmarca.
Element Attributes (li)

Propiedades del componente (TreeViewItemContent)

Name	Type	Default	Description
ref	HTMLDivElement		La referencia del DOM del elemento de layout.
expandIcon	Snippet | Component		Icono personalizado para el control que abre una rama.
iconBefore	Snippet | Component		Contenido que se renderiza antes de la etiqueta.
iconAfter	Snippet | Component		Contenido que se renderiza después de la etiqueta.
aside	Snippet | Component		Contenido fijado al final de la fila.
actions	Snippet | Component		Contenido fijado al final de la fila, que se revela al pasar el puntero y al recibir el foco.
Element Attributes (div)