TabView

TabView dispone un conjunto de pestañas como una tira, con la forma que un navegador le da a las pestañas de sus documentos. Cada pestaña puede llevar un icono y un botón de cierre, y un botón de pestaña nueva puede situarse al final de la tira.

La tira se ocupa de la selección y de nada más. Lo que abre una pestaña lo renderizas tú, donde corresponda en la página, así que una pestaña puede abrir un panel debajo, cambiar una región en otro sitio o dirigir una ruta.

Para crear una tira de pestañas, necesitarás usar los siguientes componentes:

• TabView: El componente raíz que crea el contexto que lee cada pestaña: cuál está seleccionada, si las pestañas se cierran y cómo toman su ancho. Renderiza el tablist y, opcionalmente, el botón de pestaña nueva.
• TabViewTab: Una sola pestaña de la tira. Informa de su propia selección y puede llevar un icono y un botón de cierre.

Uso

Una tira de pestañas espera un value en cada pestaña y un activeTab con el que compararlo. Vincula activeTab para seguir la selección y renderiza tú mismo lo que abre la pestaña seleccionada.

<script>
	import { TabView, TabViewTab } from 'fluentui-svelte';

	let activeTab = $state('document');
</script>

<TabView bind:activeTab listAttributes={{ 'aria-label': 'Workspaces' }}>
	<TabViewTab id="tab-document" value="document">Document</TabViewTab>
	<TabViewTab id="tab-mail" value="mail">Mail</TabViewTab>
</TabView>

{#if activeTab === 'document'}
	<div role="tabpanel" aria-labelledby="tab-document">The document you are working on.</div>
{:else}
	<div role="tabpanel" aria-labelledby="tab-mail">Everything that landed in your inbox.</div>
{/if}

Cerrar pestañas

closable le da a cada pestaña un botón de cierre, y una pestaña concreta puede activarlo o renunciar a él por su cuenta. La tira nunca elimina una pestaña: las pestañas son tu marcado, así que onTabClose te devuelve el valor y deja en tus manos la eliminación — y qué pestaña toma el relevo.

<script>
  import { TabView, TabViewTab } from 'fluentui-svelte';

  let tabs = $state([
    { value: 'notes', label: 'Notes' },
    { value: 'draft', label: 'Draft' }
  ]);
  let activeTab = $state('notes');

  // The strip never removes a tab on its own: the tabs are your markup.
  const closeTab = (event, value) => {
    const index = tabs.findIndex((tab) => tab.value === value);
    tabs = tabs.filter((tab) => tab.value !== value);
    if (activeTab !== value) return;
    activeTab = tabs[Math.min(index, tabs.length - 1)]?.value ?? '';
  };
</script>

<TabView bind:activeTab closable onTabClose={closeTab}>
  {#each tabs as tab (tab.value)}
    <TabViewTab value={tab.value}>{tab.label}</TabViewTab>
  {/each}
</TabView>

Botón de pestaña nueva

showNewTabButton añade un botón al final de la tira, fuera del tablist para que nunca se lea como una pestaña. onNewTab se dispara cuando se activa.

<script>
  import { TabView, TabViewTab } from 'fluentui-svelte';

  let tabs = $state([{ value: 'tab-1', label: 'Tab 1' }]);
  let activeTab = $state('tab-1');

  const addTab = () => {
    const value = `tab-${tabs.length + 1}`;
    tabs.push({ value, label: `Tab ${tabs.length + 1}` });
    activeTab = value;
  };
</script>

<TabView bind:activeTab showNewTabButton onNewTab={addTab}>
  {#each tabs as tab (tab.value)}
    <TabViewTab value={tab.value}>{tab.label}</TabViewTab>
  {/each}
</TabView>

Ancho de las pestañas

tabWidthMode decide cómo toman su ancho las pestañas: equal reparte la tira por igual, size-to-content ajusta cada pestaña a su propia etiqueta y compact reduce a su icono cada pestaña en reposo y solo despliega la seleccionada.

<TabView tabWidthMode="equal">...</TabView>
<TabView tabWidthMode="size-to-content">...</TabView>
<TabView tabWidthMode="compact">...</TabView>

Deshabilitado

Una pestaña deshabilitada no puede seleccionarse, y las flechas pasan por encima en lugar de detenerse en ella.

<TabView activeTab="mail">
  <TabViewTab value="document">Document</TabViewTab>
  <TabViewTab value="mail">Mail</TabViewTab>
  <TabViewTab value="calendar" disabled>Calendar</TabViewTab>
</TabView>

Propiedades del componente (TabView)

Propiedades del componente (TabViewTab)

Navegación por teclado

La tira es una sola parada de tabulación. ArrowLeft y ArrowRight recorren las pestañas, Home y End saltan a los extremos, Enter y Space seleccionan la pestaña enfocada y Delete la cierra cuando es cerrable. disableTabspot te devuelve la gestión del foco.

Accesibilidad

La tira renderiza un tablist y cada pestaña un tab, así que dale nombre a la lista con el aria-label que pasas en listProps. Como eres tú quien renderiza lo que abre una pestaña, dale a ese elemento el rol tabpanel y apunta su aria-labelledby al id de su pestaña.