TopNav
TopNav ofrece una selección única dentro de una fila de elementos, con una barra que marca el seleccionado. Cada elemento lleva una etiqueta corta y, a menudo, un icono.
La barra pertenece a la tira y no a un elemento concreto: cuando la selección cambia, la barra viaja hasta el elemento que la recibe y no se va de la pantalla en todo el recorrido, en lugar de desaparecer de uno y reaparecer bajo el siguiente.
La tira se ocupa de la selección y de nada más. Lo que abre un elemento lo renderizas tú, donde corresponda en la página, así que un elemento puede abrir un panel debajo, cambiar una región en otro sitio o dirigir una ruta.
Para crear un top nav, necesitarás usar los siguientes componentes:
TopNav: El componente raíz que crea el contexto que lee cada elemento: cuál está seleccionado, la apariencia, el tamaño y el eje. Renderiza el `tablist` y la barra que lo recorre.TopNavItem: Un solo elemento de la tira. Informa de su propia selección y puede llevar un icono.
Uso
Un top nav espera un `value` en cada elemento y un `selectedValue` con el que compararlo. Vincula `selectedValue` para seguir la selección y renderiza tú mismo lo que abre el elemento seleccionado.
<script>
import { TopNav, TopNavItem } from 'fluentui-svelte';
let selectedValue = $state('arrivals');
</script>
<TopNav bind:selectedValue aria-label="Flights">
<TopNavItem id="tab-arrivals" value="arrivals">Arrivals</TopNavItem>
<TopNavItem id="tab-departures" value="departures">Departures</TopNavItem>
</TopNav>
{#if selectedValue === 'arrivals'}
<div role="tabpanel" aria-labelledby="tab-arrivals">Everything landing in the next hour.</div>
{:else}
<div role="tabpanel" aria-labelledby="tab-departures">Everything leaving in the next hour.</div>
{/if}Apariencia
`appearance` decide cómo se pinta la tira. `transparent` no tiene fondo propio y `subtle` rellena un elemento mientras está en uso; ambas marcan la selección con la barra que se desplaza. Las dos apariencias circulares cambian esa barra por una píldora: `subtle-circular` perfila el elemento seleccionado y `filled-circular` lo rellena.
Tamaño
`size` fija de una vez el relleno, la tipografía y el grosor de la barra de todos los elementos.
Vertical
`vertical` apila los elementos en una columna y lleva la barra a su borde inicial, donde se desplaza de arriba abajo en lugar de a lo ancho. Las flechas siguen el mismo giro.
Ícono
`icon` acepta un snippet o un componente y lo renderiza antes de la etiqueta.
Como anchor
`as="a"` renderiza el elemento como un anchor y acepta los atributos de uno, `href` entre ellos, así que el elemento tiene una URL real que abrir en otra pestaña o copiar. Sigue anunciándose como `tab`, que es lo que debe ser una tira de pestañas sobre una misma página; si los elementos son navegación entre páginas y no pestañas, un `nav` con enlaces normales es la forma adecuada.
Deshabilitado
`disabled` en la tira deshabilita todos los elementos a la vez, y un elemento concreto puede deshabilitarse por su cuenta. Las flechas pasan por encima de un elemento deshabilitado en lugar de detenerse en él.
Seleccionar al enfocar
`selectTabOnFocus` selecciona un elemento en cuanto el foco llega a él, de modo que las flechas mueven la selección y no solo el foco. Úsalo cuando lo que abre un elemento ya está en la página; déjalo apagado cuando abrirlo cuesta una petición.
Espacio reservado
Un elemento seleccionado pone su etiqueta en semibold, más ancha que esa misma etiqueta en reposo. `reserveSelectedTabSpace` viene activada y reserva ese ancho desde el principio, así que seleccionar un elemento nunca empuja a los de al lado. Al desactivarla, los elementos se ajustan a lo que están mostrando y la fila se desplaza al cambiar la selección.
Propiedades del componente (TopNav)
| Name | Type | Default | Description |
|---|---|---|---|
ref bindable | HTMLDivElement | La referencia del DOM de la tira. | |
selectedValue bindable | string | El valor del elemento seleccionado. | |
onTabSelect | (event: Event, value: string) => void | Se dispara cuando se selecciona un elemento. | |
appearance | TopNavAppearance | 'transparent' | Cómo se pinta la tira: `transparent` no tiene fondo propio, `subtle` rellena un elemento mientras está en uso y las dos apariencias circulares cambian la barra que se desplaza por una píldora. |
size | 'small' | 'medium' | 'large' | 'medium' | El tamaño de todos los elementos de la tira. |
vertical | boolean | false | Dispone los elementos en una columna, con la barra a lo largo de su borde inicial. |
disabled | boolean | false | Deshabilita la interacción del usuario en todos los elementos. |
selectTabOnFocus | boolean | false | Selecciona un elemento en cuanto el foco llega a él, en lugar de esperar a que se lo pidan. |
reserveSelectedTabSpace | boolean | true | Un elemento seleccionado pone su etiqueta en semibold, más ancha que esa misma etiqueta en reposo. Esto reserva ese ancho desde el principio, así que seleccionar un elemento nunca desplaza a los de al lado. |
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 (TopNavItem)
| Name | Type | Default | Description |
|---|---|---|---|
ref bindable | TopNavItemElementDOMType[T] | La referencia del DOM del elemento. | |
as | 'button' | 'a' | 'button' | El elemento del DOM que se renderiza. Un anchor acepta los atributos de uno, `href` entre ellos, y es lo que debe ser un elemento que navega. |
value | string | El valor que identifica al elemento. Por defecto, un id generado. | |
icon | Snippet | Component | El icono que se muestra antes de la etiqueta. | |
disabled | boolean | Deshabilita la interacción del usuario. | |
| HTML Attributes |
Navegación por teclado
La tira es una sola parada de tabulación. Las flechas recorren los elementos según el eje en el que estén dispuestos, `Home` y `End` saltan a los extremos, y `Enter` y `Space` seleccionan el elemento enfocado — o `selectTabOnFocus` lo selecciona nada más llegar. `disableTabspot` te devuelve la gestión del foco.
Accesibilidad
La tira renderiza un `tablist` y cada elemento un `tab`, así que dale nombre con `aria-label`. Como eres tú quien renderiza lo que abre un elemento, dale a ese elemento el rol `tabpanel` y apunta su `aria-labelledby` al `id` del suyo. Un elemento con icono y sin etiqueta necesita su propio `aria-label`.