Tree View New

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.

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.

Elementos marcables

Establece selectionMode en "multiple" | "single" para renderizar casillas en los elementos seleccionables.

Ver Código

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

Fruits
- Apple
- Banana

Selección única

Establece selectionMode en single para que marcar un elemento desmarque el anterior y las ramas ya no se propaguen a sus hijos.

Ver Código

<script>
  let checked = $state([]);
</script>

<TreeView selectionMode="single" bind:checkedItems={checked}>
  <TreeViewItem id="fruits" type="branch" open>
    <TreeViewItemContent>Fruits</TreeViewItemContent>
    <TreeView>
      <TreeViewItem id="apple">
        <TreeViewItemContent>Apple</TreeViewItemContent>
      </TreeViewItem>
      <TreeViewItem id="banana">
        <TreeViewItemContent>Banana</TreeViewItemContent>
      </TreeViewItem>
    </TreeView>
  </TreeViewItem>
  <TreeViewItem id="vegetables">
    <TreeViewItemContent>Vegetables</TreeViewItemContent>
  </TreeViewItem>
</TreeView>

<p>Checked: {checked.join(', ')}</p>

Fruits
- Apple
- Banana
Vegetables

Checked:

Iconos

Usa iconBefore e iconAfter para renderizar iconos alrededor de la etiqueta. Cada elemento reserva el espacio del chevron de expansión, así las casillas y los iconos quedan alineados entre ramas y hojas.

Ver Código

<script>
  import { TreeView, TreeViewItem, TreeViewItemContent } from 'fluentui-svelte';
  import FolderRegular from 'fluentui-icons-svelte/FolderRegular.svelte';
  import DocumentRegular from 'fluentui-icons-svelte/DocumentRegular.svelte';
  import ImageRegular from 'fluentui-icons-svelte/ImageRegular.svelte';
  import StarRegular from 'fluentui-icons-svelte/StarRegular.svelte';
  import LockClosedRegular from 'fluentui-icons-svelte/LockClosedRegular.svelte';
</script>

{#snippet folder()}<FolderRegular width="1.25rem" />{/snippet}
{#snippet document()}<DocumentRegular width="1.25rem" />{/snippet}
{#snippet image()}<ImageRegular width="1.25rem" />{/snippet}
{#snippet star()}<StarRegular width="1rem" />{/snippet}
{#snippet lock()}<LockClosedRegular width="1rem" />{/snippet}

<TreeView selectionMode="multiple">
  <TreeViewItem id="documents" type="branch" open>
    <TreeViewItemContent iconBefore={folder}>Documents</TreeViewItemContent>
    <TreeView>
      <TreeViewItem id="report">
        <TreeViewItemContent iconBefore={document} iconAfter={star}>Report</TreeViewItemContent>
      </TreeViewItem>
      <TreeViewItem id="photo">
        <TreeViewItemContent iconBefore={image}>Photo</TreeViewItemContent>
      </TreeViewItem>
    </TreeView>
  </TreeViewItem>
  <TreeViewItem id="notes">
    <TreeViewItemContent iconBefore={document} iconAfter={lock}>Notes</TreeViewItemContent>
  </TreeViewItem>
</TreeView>

Documents
- Report
- Photo
Notes

Aside y acciones

aside se ancla al final de la fila. actions va después y se muestra al pasar el cursor o enfocar la fila.

Ver Código

<script>
  import { TreeView, TreeViewItem, TreeViewItemContent, Button } from 'fluentui-svelte';
  import DocumentRegular from 'fluentui-icons-svelte/DocumentRegular.svelte';
  import MoreHorizontalRegular from 'fluentui-icons-svelte/MoreHorizontalRegular.svelte';
</script>

{#snippet document()}<DocumentRegular width="1.25rem" />{/snippet}
{#snippet fileSize()}<span>2 KB</span>{/snippet}
{#snippet more()}
  <Button appearance="subtle" onclick={(e) => e.stopPropagation()} aria-label="More actions"><MoreHorizontalRegular width="1rem" /></Button>
{/snippet}

<TreeView>
  <TreeViewItem id="report">
    <TreeViewItemContent iconBefore={document} aside={fileSize} actions={more}>Report</TreeViewItemContent>
  </TreeViewItem>
  <TreeViewItem id="annual-summary">
    <TreeViewItemContent iconBefore={document} aside={fileSize} actions={more}>Annual summary</TreeViewItemContent>
  </TreeViewItem>
</TreeView>

Report 2 KB
Annual summary 2 KB

Tamaños

Establece size en small, medium o large en el TreeView raíz.

Ver Código

<TreeView size="small">...</TreeView>
<TreeView size="medium">...</TreeView>
<TreeView size="large">...</TreeView>

Elementos deshabilitados

Un elemento deshabilitado no se puede abrir ni marcar, y se omite cuando su padre marca a sus hijos, lo que deja al padre en estado mixto.

Ver Código

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

Fruits
- Apple
- Banana

Controlar el estado abierto y marcado

Usa las props enlazables openItems y checkedItems del TreeView raíz para controlar el estado de forma programática.

Ver Código

<script>
  let openItems = $state(['fruits']);
  let checkedItems = $state([]);
</script>

<TreeView bind:openItems bind:checkedItems selectionMode="multiple">
  <TreeViewItem id="fruits" type="branch">
    <TreeViewItemContent>Fruits</TreeViewItemContent>
    <TreeView>
      <TreeViewItem id="apple">
        <TreeViewItemContent>Apple</TreeViewItemContent>
      </TreeViewItem>
      <TreeViewItem id="banana">
        <TreeViewItemContent>Banana</TreeViewItemContent>
      </TreeViewItem>
    </TreeView>
  </TreeViewItem>
</TreeView>

<p>Open: {openItems.join(', ')}</p>
<p>Checked: {checkedItems.join(', ')}</p>

Fruits
- Apple
- Banana

Open: controlled-fruits

Checked:

Eventos

onCheckedChange y onOpenChange en el TreeView reciben los ids resultantes. Las mismas props en un TreeViewItem reciben el elemento y su nuevo estado, incluidos los hijos a los que una rama se propaga.

Ver Código

<script>
  let treeEvent = $state('');
  let itemEvent = $state('');
</script>

<TreeView
  selectionMode="multiple"
  onCheckedChange={(e, checkedItems) => (treeEvent = 'Checked: ' + checkedItems.join(', '))}
  onOpenChange={(e, openItems) => (treeEvent = 'Open: ' + openItems.join(', '))}
>
  <TreeViewItem
    id="fruits"
    type="branch"
    onOpenChange={(e, { id, open }) => (itemEvent = id + (open ? ' opened' : ' closed'))}
  >
    <TreeViewItemContent>Fruits</TreeViewItemContent>
    <TreeView>
      <TreeViewItem
        id="apple"
        onCheckedChange={(e, { id, checked }) => (itemEvent = id + (checked ? ' checked' : ' unchecked'))}
      >
        <TreeViewItemContent>Apple</TreeViewItemContent>
      </TreeViewItem>
    </TreeView>
  </TreeViewItem>
</TreeView>

<p>Tree: {treeEvent}</p>
<p>Item: {itemEvent}</p>

Fruits
- Apple

Tree:

Item:

Propiedades del componente (TreeView)

Name	Type	Default	Description
`ref` bindable	`HTMLUListElement` \| `null`		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` \| `null`		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	Description
`ref`	`HTMLDivElement` \| `null`	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`)

Componentes

Tree View New

Uso

Elementos marcables

Selección única

Iconos

Aside y acciones

Tamaños

Elementos deshabilitados

Controlar el estado abierto y marcado

Eventos

Propiedades del componente (TreeView)

Propiedades del componente (TreeViewItem)

Propiedades del componente (TreeViewItemContent)