Pestañas

Pestañas en Storybook

Uso

Descripción general

Las pestañas permiten a los usuarios navegar por contenido similar en la misma página. Por ejemplo, es posible que tenga una serie de pestañas con el rótulo “Obtener una cotización”, “Inicio de sesión en la cuenta” y “Siniestros”. Ayudan a organizar el contenido en múltiples categorías, lo que reduce la carga cognitiva del usuario.

Para obtener una guía detallada sobre cuándo utilizar este componente, examine el siguiente árbol de decisiones del componente de la interfaz de usuario.

Formato

Anatomía

Las pestañas aparecen en un conjunto; cada pestaña tiene un rótulo y una sección de contenido.

Las pestañas constan de lo siguiente:

1. Rótulo. Describe el contenido de la pestaña. Cada pestaña tiene un rótulo que proporciona contexto al usuario.
2. Área de contenido. Aquí se encuentra el contenido relacionado con esa categoría. El contenido dentro de las pestañas debe consistir en un conjunto cohesivo de elementos con un tema en común.
3. Indicador de pestaña activa. Aparece debajo de una pestaña activa. Solo puede haber una pestaña activa a la vez.
4. Ícono de corchete angular. Permite a los usuarios traer pestañas de desbordamiento a la vista.

Contenido

Aspectos que deben tenerse en cuenta sobre la redacción de UX

• El contenido que vive dentro de cada pestaña debe ser cohesivo y debe tener un conjunto común de características.
• Use rótulos para describir de manera clara y sucinta el contenido que se encuentra dentro de cada pestaña.
• Las pestañas deben ser de naturaleza paralela, sin torcer el lenguaje para que sean paralelas.
• Los rótulos de las pestañas deben ser breves (de 1 a 2 palabras) y deben usar un lenguaje sencillo.
• Los rótulos de pestañas usan mayúsculas y minúsculas en la primera palabra de una frase y nombres propios.

Prácticas recomendadas

• Utilice pestañas para alternar vistas dentro del mismo contexto. Los usuarios no deberían tener que desplazarse a otras áreas. Las pestañas les permiten alternar las vistas mientras permanecen en el mismo lugar.
• Fragmente el contenido de forma lógica para que cada usuario pueda predecir fácilmente lo que encontrará en cada pestaña.
• Organice las pestañas de forma lógica, pero no las use para el contenido secuencial que debe leerse en un orden particular.
• De forma predeterminada, configure la primera pestaña de un conjunto para que esté activa.
• Evite la tentación de utilizar más de una fila de pestañas. Por lo general, no recomendamos más de seis pestañas en un conjunto.
• Solo use pestañas cuando los usuarios no necesiten comparar contenido en varias pestañas.
• Resalte la pestaña seleccionada actualmente.
• Asegúrese de que las pestañas no seleccionadas sean claramente visibles y legibles.
• Muestre las pestañas en la parte superior del panel de pestañas, en lugar de en los lados o en la parte inferior.

Comportamientos

Estados

Las pestañas tienen estados con cursor encima, en foco y activo:

• Con cursor encima: Proporciona retroalimentación que indica que el usuario ha colocado un cursor sobre el elemento (solo para computadoras de escritorio). Los rótulos de pestaña cambian el color de fuente al pasar el cursor por encima.
• En foco: Proporciona retroalimentación que indica que el usuario ha resaltado el elemento, normalmente mediante un método de entrada, como un teclado o un mouse.
• Activo: Proporciona retroalimentación que indica que el usuario está haciendo clic o tocando el elemento. Las pestañas que están activas aparecen subrayadas.

Interacciones

Teclado

La tecla TAB lleva el foco al primer elemento pestaña en la secuencia. Utilice las teclas de flecha para desplazarse entre los paneles de pestañas. Si el panel de pestañas contiene elementos que pueden recibir el foco (como un enlace o un botón), pulsar la tecla TAB lleva el foco a tales elementos. Si no hay elementos que puedan recibir el foco, la tecla TAB llevará el foco fuera del panel de pestañas al siguiente elemento que pueda recibir el foco después del componente.

Lector de pantalla

Los roles WAI-ARIA de 'tablist', 'tab' y 'tabpanel' se incluyen para brindar significado a las tecnologías de asistencia. Cuando un panel de pestañas está activo, el valor aria-selected se establece en 'true' para proporcionar información contextual.

Navegación

• Al interactuar con las pestañas, los usuarios no navegan a diferentes áreas. En cambio, alternan puntos de vista dentro del mismo contexto.

Accesibilidad

Este componente de Jutro ha sido validado para cumplir con las pautas de accesibilidad de WCAG 2.2 AA en su configuración base predeterminada. Esto incluye garantizar que se cumpla lo siguiente:

• La relación de contraste de los elementos textuales con respecto a su fondo es superior a 4,5:1.
• El contenido no textual que debe transmitir significado (como íconos e indicadores de foco) tiene una relación de contraste de al menos 3:1 con sus colores adyacentes.
• El elemento se puede operar con teclado, así como con mouse.
• Se puede acceder al contenido mediante lectores de pantalla, como JAWS y VoiceOver.

El cumplimiento de los criterios de accesibilidad depende, en última instancia, de cómo se implementa y personaliza este componente. Los cambios realizados por el autor del contenido pueden afectar la accesibilidad. Para obtener más información sobre nuestro modelo de responsabilidad compartida, revise nuestra declaración completa sobre accesibilidad de Jutro.

Asegúrese de seguir las instrucciones de esta sección y también las Prácticas de creación de pestañas de WAI-ARIA.

Al utilizar este componente en sus aplicaciones:

• Proporcione títulos significativos y descriptivos para cada pestaña. Esto ayuda a los usuarios a comprender el contenido dentro de cada panel de pestañas y proporciona una navegación eficiente.
• Asegúrese de que se pueda acceder al contenido dentro de cada panel de pestañas, por ejemplo, utilizando componentes de encabezado semántico, prestando atención a los contrastes de color y aplicando texto alternativo a las imágenes.

Código

Instrucción de importación

import { TabSet, Tab } from '@jutro/components/';

Contrato de componentes

Asegúrese de comprender la superficie de la API de componentes del sistema de diseño, así como sus implicaciones, ventajas y desventajas. Obtenga más información en nuestra introducción a la API de componentes.

Propiedades

TabSet

activeTab

Tipo

string

Descripción

The tabId of the active tab. It must be used in conjunction with onTabChange.

children

Tipo

ComponentPropTypes.childOfComponentType(Tab)

Descripción

A set of <Tab> children for this component.

className

Tipo

string

Descripción

CSS class name for this component.

defaultActiveTab

Tipo

string

Descripción

Sets which tab is active by default.

label

Tipo

string

Descripción

An optional label describing the purpose of the tab list.

onTabChange

Tipo

(tab?: string) => unknown

Descripción

The callback to call when the tab is changed; if provided, activeTab must also be provided.

idobsoleto

Tipo

string

Descripción

Unique identifier for the component.

showFrameobsoleto

Tipo

boolean

Descripción

Displays a frame surrounding TabSet when set to true.

Pestaña

idobligatorio

Tipo

string

Descripción

Unique identifier for the component.

children

Tipo

PropTypes.node

Descripción

The content of this tab, child components to display.

className

Tipo

string

Descripción

CSS class name for this component.

disabled

Tipo

boolean

Descripción

If set to true, the tab is disabled.

heading

Tipo

PropTypes.oneOfType([PropTypes.node, intlMessageShape])

Descripción

The heading for the tab. This prop is not rendered by the Tab component directly, but rather is extracted out by the TabSet component and rendered by it instead. Can be either a simple string or a renderer function which must accept rendering props object as an argument.

noContainerFocus

Tipo

boolean

Descripción

If set to true, makes the tab contain nested focusable elements and pressing the Tab key does not focus on the tabpanel.

visible

Tipo

boolean

Descripción

If set to true, the tab is visible.

Valor predeterminado

true

Ganchos

No hay ganchos para Tabset.

Claves de traducción

No hay claves de traducción asociadas a los componentes Tabset y Tab.

Escotillas de escape

Para obtener más información, consulte nuestra documentación sobre escotillas de escape.

Comportamientos personalizados

Desbordamiento de pestañas

Cuando el ancho de las pestañas supera el ancho del contenedor, las pestañas adicionales se ocultan y se muestra una flecha para desplazarse a tales pestañas.

Ejemplos

Pestañas básicas

Los componentes TabSet y Tab están disponibles en el paquete @jutro/components. El componente Tab solo se puede colocar dentro de un componente TabSet. Tab requiere tener un id establecido.

import React from 'react';
import { TabSet, Tab } from '@jutro/components/';

export const BasicTabs = () => {
  return (
    <TabSet activeTab="tab-1">
      <Tab
        heading="Tab heading 1"
        id="tab-1"
      >
        Tab 1 content
      </Tab>
      <Tab
        heading="Tab heading 2"
        id="tab-2"
      >
        Tab 2 content
      </Tab>
      <Tab
        heading="Tab heading 3"
        id="tab-3"
      >
        Tab 3 content
      </Tab>
      <Tab
        heading="Tab heading 4"
        id="tab-4"
      >
        Tab 4 content
      </Tab>
    </TabSet>
  );
};

Ejemplos de estado de las pestañas

Puede hacer que una pestaña sea visible o no con la propiedad visible. En este ejemplo, la tercera pestaña no es visible, pero cuando hace clic en la primera, la propiedad onTabChange llama a la función handleTabChange y hace que la tercera pestaña sea visible.

Además, la segunda pestaña se desactiva con la propiedad disabled.

import React, { useState } from 'react';
import { TabSet, Tab } from '@jutro/components/';

export const StatusTabs = () => {
  const [isTab3Visible, setIsTab3Visible] = useState(false);
  const [activeTab, setActiveTab] = useState('tab-4');
  const handleTabChange = (tabId) => {
    setActiveTab(tabId);
    setIsTab3Visible(tabId === 'tab-1' || tabId === 'tab-3');
  };

  return (
    <TabSet
      defaultActiveTab="tab-4"
      activeTab={activeTab}
      onTabChange={handleTabChange}
    >
      <Tab
        heading="Tab heading 1"
        id="tab-1"
      >
        Tab 1 content
      </Tab>
      <Tab
        heading="Disabled tab"
        id="tab-2"
        disabled
      >
        Tab 2 content
      </Tab>
      <Tab
        heading="Hidden tab"
        id="tab-3"
        visible={isTab3Visible}
      >
        This tab is only visible after clicking on the fist tab.
      </Tab>
      <Tab
        heading="Tab heading 4"
        id="tab-4"
      >
        Click on the first tab to enable the hidden tab.
      </Tab>
    </TabSet>
  );
};

Pestañas anidadas y desbordamiento

Puede incluir un componente TabSet dentro de una Tab para anidar un nuevo conjunto de pestañas.

Cuando el ancho de las pestañas sea mayor que el del contenedor, las pestañas se desbordan automáticamente.

import React from 'react';
import { TabSet, Tab } from '@jutro/components/';

export const NestedOverflowTabs = () => {
  return (
    <div style={{ width: '600px' }}>
      <TabSet activeTab="tab-1">
        <Tab
          heading="Tab heading 1"
          id="tab-1"
        >
          <p>Here are some nested tabs:</p>
          <TabSet activeTab="ntab-1">
            <Tab
              heading="Nested Tab heading 1"
              id="ntab-1"
            >
              Nested Tab 1 content
            </Tab>
            <Tab
              heading="Nested Tab heading 2"
              id="ntab-2"
            >
              Nested Tab 2 content
            </Tab>
          </TabSet>
        </Tab>
        <Tab
          heading="Tab heading 2"
          id="tab-2"
        >
          Tab 2 content
        </Tab>
        <Tab
          heading="Tab heading 3"
          id="tab-3"
        >
          Tab 3 content
        </Tab>
        <Tab
          heading="Tab heading 4"
          id="tab-4"
        >
          Tab 4 content
        </Tab>
        <Tab
          heading="Tab heading 5"
          id="tab-5"
        >
          Tab 5 content
        </Tab>
        <Tab
          heading="Tab heading 6"
          id="tab-6"
        >
          Tab 6 content
        </Tab>
        <Tab
          heading="Tab heading 7"
          id="tab-7"
        >
          Tab 7 content
        </Tab>
      </TabSet>
    </div>
  );
};

Registro de cambios

10.2.0

Las siguientes propiedades de Tabset han quedado obsoletas:

• id
• showFrame