DIANA

Diseño Aplicaciones Navarra

Tabs

Componente de pestañas para alternar entre secciones relacionadas dentro de un mismo contexto.

Estado: review

1. Tabs básico (interactivo)

Contenido general del expediente.

Mostrar HTML 
<div class="gn-tabs" data-tabs>
  <ul class="gn-tabs__tablist" role="tablist" aria-label="Información del expediente">
    <li class="gn-tabs__item" role="presentation">
      <button type="button" id="gn-tabs-basic-1" class="gn-tabs__tab gn-tabs__tab--active" role="tab" aria-selected="true" aria-controls="gn-tabs-basic-panel-1">General</button>
    </li>
    <li class="gn-tabs__item" role="presentation">
      <button type="button" id="gn-tabs-basic-2" class="gn-tabs__tab" role="tab" aria-selected="false" aria-controls="gn-tabs-basic-panel-2" tabindex="-1">Documentación</button>
    </li>
    <li class="gn-tabs__item" role="presentation">
      <button type="button" id="gn-tabs-basic-3" class="gn-tabs__tab" role="tab" aria-selected="false" aria-controls="gn-tabs-basic-panel-3" tabindex="-1">Seguimiento</button>
    </li>
  </ul>

  <div class="gn-tabs__panels">
    <section id="gn-tabs-basic-panel-1" class="gn-tabs__panel" role="tabpanel" aria-labelledby="gn-tabs-basic-1">
      <p>Contenido general del expediente.</p>
    </section>
    <section id="gn-tabs-basic-panel-2" class="gn-tabs__panel" role="tabpanel" aria-labelledby="gn-tabs-basic-2" hidden>
      <p>Documentación asociada.</p>
    </section>
    <section id="gn-tabs-basic-panel-3" class="gn-tabs__panel" role="tabpanel" aria-labelledby="gn-tabs-basic-3" hidden>
      <p>Histórico y seguimiento.</p>
    </section>
  </div>
</div>
Mostrar JS 
document.addEventListener('DOMContentLoaded', () => {
  window.GNDS.initTabs();
});

2. Línea inferior continua al 100%

La línea base ocupa el ancho completo del bloque.

Mostrar HTML 
<div class="gn-tabs" data-tabs>
  <ul class="gn-tabs__tablist" role="tablist" aria-label="Tabs con pocas opciones">
    <li class="gn-tabs__item" role="presentation">
      <button type="button" id="gn-tabs-line-1" class="gn-tabs__tab gn-tabs__tab--active" role="tab" aria-selected="true" aria-controls="gn-tabs-line-panel-1">Tab activa</button>
    </li>
    <li class="gn-tabs__item" role="presentation">
      <button type="button" id="gn-tabs-line-2" class="gn-tabs__tab" role="tab" aria-selected="false" aria-controls="gn-tabs-line-panel-2" tabindex="-1">Tab inactiva</button>
    </li>
  </ul>

  <div class="gn-tabs__panels">
    <section id="gn-tabs-line-panel-1" class="gn-tabs__panel" role="tabpanel" aria-labelledby="gn-tabs-line-1">
      <p>La línea base ocupa el ancho completo del bloque.</p>
    </section>
    <section id="gn-tabs-line-panel-2" class="gn-tabs__panel" role="tabpanel" aria-labelledby="gn-tabs-line-2" hidden>
      <p>El indicador activo se superpone a la línea general.</p>
    </section>
  </div>
</div>
Mostrar JS 
document.addEventListener('DOMContentLoaded', () => {
  window.GNDS.initTabs();
});

3. Focus visible

Mostrar HTML 
<div class="gn-tabs">
  <ul class="gn-tabs__tablist" role="tablist" aria-label="Tabs con foco visible">
    <li class="gn-tabs__item" role="presentation">
      <button type="button" class="gn-tabs__tab is-focus" role="tab" aria-selected="false">Resumen</button>
    </li>
    <li class="gn-tabs__item" role="presentation">
      <button type="button" class="gn-tabs__tab" role="tab" aria-selected="false">Detalle</button>
    </li>
  </ul>
</div>

4. Tab deshabilitada

Panel activo.

Mostrar HTML 
<div class="gn-tabs" data-tabs>
  <ul class="gn-tabs__tablist" role="tablist" aria-label="Tabs con opción deshabilitada">
    <li class="gn-tabs__item" role="presentation">
      <button type="button" id="gn-tabs-disabled-1" class="gn-tabs__tab gn-tabs__tab--active" role="tab" aria-selected="true" aria-controls="gn-tabs-disabled-panel-1">Datos</button>
    </li>
    <li class="gn-tabs__item" role="presentation">
      <button type="button" id="gn-tabs-disabled-2" class="gn-tabs__tab" role="tab" aria-selected="false" aria-controls="gn-tabs-disabled-panel-2" tabindex="-1" disabled>Adjuntos</button>
    </li>
  </ul>

  <div class="gn-tabs__panels">
    <section id="gn-tabs-disabled-panel-1" class="gn-tabs__panel" role="tabpanel" aria-labelledby="gn-tabs-disabled-1">
      <p>Panel activo.</p>
    </section>
    <section id="gn-tabs-disabled-panel-2" class="gn-tabs__panel" role="tabpanel" aria-labelledby="gn-tabs-disabled-2" hidden>
      <p>Panel deshabilitado.</p>
    </section>
  </div>
</div>
Mostrar JS 
document.addEventListener('DOMContentLoaded', () => {
  window.GNDS.initTabs();
});