✦ r-tabs · demo

default

<r-tabs><section data-tab="Inicio">...</section>...</r-tabs>

Bienvenido a la primera pestaña. Usa las flechas ← → para navegar entre tabs con el teclado.

Aquí irían los proyectos. Segunda pestaña.

  • Proyecto A
  • Proyecto B
  • Proyecto C

Formulario de contacto o email. Tercera pestaña.

active="1" (segunda pestaña activa por defecto)

<r-tabs active="1">...</r-tabs>
Contenido del tab uno.
Contenido del tab dos — activo por defecto.
Contenido del tab tres.

override de CSS vars

--r-tabs-border, --r-tabs-active-bg, --r-tabs-font-size
Primer panel con estilo coral.
Segundo panel.
Tercer panel.

evento r-tabs:change

r-tabs:change · detail: { index, label }
Panel alpha.
Panel beta.
Panel gamma.

esperando cambios…