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.

Document

Mail

Calendar

The document you are working on.

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 listProps={{ '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.

Ver Código

<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>

Notes

Draft

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.

Ver Código

<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>

Tab 1

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.

Ver Código

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

Document

Mail

Calendar

Document

Mail

Calendar

Document

Mail

Calendar

Deshabilitado

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

Ver Código

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

Document

Mail

Calendar

Propiedades del componente (TabView)

Name	Type	Default	Description
`ref` bindable	`HTMLDivElement`		La referencia del DOM del elemento que envuelve la tira.
`listRef` bindable	`HTMLDivElement`		La referencia del DOM de la lista de pestañas.
`listProps`	`HTMLAttributes`		Las props que se aplican al elemento de la lista de pestañas, donde viven el rol `tablist` y su etiqueta.
`activeTab` bindable	`string`		El valor de la pestaña seleccionada.
`onTabChange`	`(event: Event, value: string) => void`		Se dispara cuando cambia la pestaña seleccionada.
`closable`	`boolean`	`false`	Todas las pestañas muestran un botón de cierre, salvo que la pestaña renuncie a él.
`onTabClose`	`(event: Event, value: string) => void`		Se dispara cuando una pestaña pide cerrarse. Eliminarla queda en manos del consumidor.
`showNewTabButton`	`boolean`	`false`	Muestra el botón que añade una pestaña nueva al final de la tira.
`onNewTab`	`(event: MouseEvent) => void`		Se dispara cuando se activa el botón de pestaña nueva.
`newTabButtonProps`	`HTMLButtonAttributes`		Las props que se aplican al botón de pestaña nueva.
`tabWidthMode`	`'equal'` \| `'size-to-content'` \| `'compact'`	`'equal'`	Cómo toman su ancho las pestañas: repartiendo la tira por igual, ajustándose a su propio contenido o reduciéndose al icono en todas las pestañas menos la seleccionada.
`disableTabspot`	`boolean`	`false`	Deja la tira fuera de la gestión del foco de tabspot, para que conectes la tuya.
Element Attributes (`div`)

Propiedades del componente (TabViewTab)

Name	Type	Description
`ref` bindable	`HTMLDivElement`	La referencia del DOM del elemento de la pestaña.
`value`	`string`	El valor que identifica a la pestaña. Por defecto, un id generado.
`icon`	`Snippet` \| `Component`	El icono que se muestra antes de la etiqueta.
`closable`	`boolean`	Muestra el botón de cierre de la pestaña. Recurre al `closable` de la tira.
`disabled`	`boolean`	Deshabilita la interacción del usuario.
`onClose`	`(event: Event, value: string) => void`	Se dispara cuando la pestaña pide cerrarse, ya sea desde su botón de cierre o con la tecla `Delete`.
Element Attributes (`div`)

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.