CSS: tabs ​

.instui-tabs — Un conjunto de paneles con pestañas: una lista de pestañas, pestañas seleccionables y sus paneles.

Consulte los miembros tabs.tab y tabs.panel para los botones de pestaña individuales y sus paneles de contenido.

Source: panel.css

TIP

Mejora de JS — El CSS de este componente se renderiza y funciona por sí solo; emparejarlo con @pantoken/interactions añade el comportamiento interactivo. Ver la tabla de modificadores abajo.

Accesibilidad ​

Conecte la lista de pestañas con role="tablist", cada pestaña con role="tab" y aria-selected, y cada panel con role="tabpanel".

Uso ​

css
@import "@pantoken/components/components.css";
@import "@pantoken/components/tabs.css";

Ejemplos ​

html
<div class="instui-tabs -variant-secondary">
  <div class="list" role="tablist" aria-label="Project views">
    <button class="tab -selected" role="tab" aria-selected="true">Resumen</button>
    <button class="tab" role="tab" aria-selected="false">Actividad</button>
  </div>
  <div class="panel" role="tabpanel">Resumen del proyecto</div>
</div>

Estructura ​

text
.instui-tabs
  list (component)
    tabs.tab (component, 0..n)
  tabs.panel (component, 0..n)
flowchart TD n0[".instui-tabs"]:::cssdoc-root n1(["list"]):::cssdoc-component n2(["tabs.tab"]):::cssdoc-component n3(["tabs.panel"]):::cssdoc-component n1 -->|0..n| n2 n0 --> n1 n0 -->|0..n| n3 click n1 "/api/css/list.md" click n2 "/api/css/tabs.tab.md" click n3 "/api/css/tabs.panel.md" classDef cssdoc-root stroke-width:1px; classDef cssdoc-part stroke-width:1px; classDef cssdoc-slot stroke-width:1px; classDef cssdoc-component stroke-width:1px;

Modificadores ​

ModificadorDescripción
.-overflow-scrollMantenga la lista de pestañas en una sola línea y permita que se desplace horizontalmente en lugar de ajustarse, ocultando la barra de desplazamiento.
.-variant-secondaryPestañas redondeadas de tipo "carpeta" con una pestaña seleccionada que se conecta visualmente con el panel inferior. @affects tabs.tab — Vuelve a estilizar los botones de pestaña para el aspecto redondeado de "carpeta".

Partes ​

ParteDescripción
.listLa fila de pestañas.

Tokens consumidos ​

TokenTipoValor
--instui-component-tabs-default-background<color>#00000000

Subcomponentes ​