Pestañas (tabs)

El servidor envía enlaces de ancla y secciones con sus títulos, que funcionan como navegación dentro de la página sin JavaScript. En el init, el componente los promociona al patrón ARIA de pestañas y oculta los paneles inactivos; destroy restaura el HTML servido.

CSS: css/components/tabs.css. JS: @intervolutions/ivolt/tabs o auto.js.

Pestañas y panelesfixtures/tabs/basic.htmlAbrir sola

<div class="iv-tabs" data-iv-component="tabs" data-iv-activation="automatic">
  <div class="iv-tabs__list" aria-label="Plans">
    <a class="iv-tabs__tab" href="#p-monthly" id="t-monthly">Monthly</a>
    <a class="iv-tabs__tab" href="#p-yearly" id="t-yearly">Yearly</a>
    <a class="iv-tabs__tab" href="#p-enterprise" id="t-enterprise">Enterprise</a>
  </div>
  <section class="iv-tabs__panel" id="p-monthly">
    <h3 class="iv-tabs__heading">Monthly</h3>
    <p>29 € per seat and month. Every feature of the yearly plan, billed at the end of each period and cancellable at any time.</p>
  </section>
  <section class="iv-tabs__panel" id="p-yearly">
    <h3 class="iv-tabs__heading">Yearly</h3>
    <p>24 € per seat and month, billed once a year. Includes two additional sandbox environments and priority support during business hours.</p>
  </section>
  <section class="iv-tabs__panel" id="p-enterprise">
    <h3 class="iv-tabs__heading">Enterprise</h3>
    <p>Custom pricing with a signed service level agreement, single sign-on and a named technical contact. Talk to sales to get a quote.</p>
  </section>
</div>

// data-iv-component="tabs"
{
  activation: "automatic",
}

Opciones

Opción	Atributo	Por defecto	Efecto
`activation`	`data-iv-activation`	`automatic`	`automatic` selecciona al mover el foco con las flechas; `manual` espera a Enter o Espacio.
`orientation`	`data-iv-orientation`	`horizontal`	`vertical` usa las flechas arriba y abajo y la disposición `iv-tabs--vertical`.

Métodos y eventos

select(idOrElement), next(), prev(), activeTab, destroy(). iv:change (cancelable, detail.tab, panel, previousTab) y después iv:changed.

Teclado

Las flechas izquierda y derecha (o arriba y abajo en vertical) se mueven entre pestañas con vuelta al principio, Inicio y Fin saltan a la primera y a la última; Tab entra en el panel.

Sin JavaScript

Todos los paneles quedan visibles con sus títulos y los enlaces desplazan a cada sección. Así, el contenido esencial nunca depende del script.

Errores frecuentes

Poner role="tab" en el HTML servido: sin el script, anuncia un widget que no funciona.
Pestañas para pasos secuenciales; usa un flujo de formulario.

Todos los componentes de contenido