Pestañas

Aquí tienes la traducción del archivo fuente de la guía de diseño al español, buscando que suene lo más natural posible:

§Descripción

Con el componente Tabs, puedes organizar el contenido dividiéndolo en varias secciones entre las que el usuario puede alternar para visualizarlas. Utiliza pestañas para agrupar secciones relacionadas y proporcionar acceso rápido a cada una de ellas.

§Tamaños

Las pestañas pueden tener tres tamaños:

• M (Mediano): Utiliza este tamaño para uso general en páginas, dentro de secciones individuales.
• L (Grande): Usa el tamaño L si las pestañas también sirven como subencabezados de página. En este caso, el contenido de la pestaña es una sección separada en la página, y las pestañas son los subencabezados de esta sección.
• XL (Extra Grande): Este tamaño es apropiado cuando las pestañas también sirven como encabezados de página. En este caso, cuando los usuarios cambian de pestaña, el contenido de toda la página cambia.

§Estados

Las pestañas pueden tener los siguientes estados:

• Inactivo: La pestaña está en estado inactivo cuando no está seleccionada. En este estado, la pestaña tiene un color más apagado para resaltar la pestaña activa.
• Activo: Este estado se asigna a la pestaña seleccionada que muestra la sección de contenido activa actual. Las pestañas activas tienen colores más saturados y están subrayadas para enfatizarlas.
• Hover (Paso del ratón por encima): Cuando el usuario pasa el ratón por encima de la pestaña, el puntero cambia su estilo para indicar la posibilidad de interacción.
• Deshabilitado: Las pestañas pueden estar deshabilitadas si no están disponibles temporal o permanentemente para su selección. Dichas pestañas se muestran en gris y no son interactivas.

§Propiedades

Puedes habilitar/deshabilitar los siguientes elementos para cada pestaña:

1. Icono: Lo usa el diseñador a su discreción para visualizar el tipo de contenido dentro de la pestaña.
2. Etiqueta (Label): El nombre de la sección en formato de texto.
3. Contador: Puedes usarlo para indicar el número de entidades dentro de una pestaña. También puedes usarlo para especificar el número de entidades nuevas que han aparecido en la pestaña.
4. Etiqueta (Label): Puedes usarla para denotar el estado de la sección de la que es responsable la pestaña.

§Recomendaciones de uso

Utiliza pestañas para organizar grandes volúmenes de contenido o para dividir la información en secciones lógicas. Asegúrate de que la estructura de los encabezados de las pestañas sea clara y fácilmente legible.

Selecciona un estilo y colores para las pestañas que coincidan con el diseño general de tu proyecto. Siempre resalta las pestañas activas para que los usuarios puedan identificar fácilmente la sección actual.

Siempre que sea posible, intenta que las secciones de tus pestañas de tamaño M y L quepan en la altura de una sola pantalla. De esta manera, podrás asociar fácilmente el contenido con el nombre de la pestaña y ver dónde termina el contenido de la pestaña y comienza el siguiente bloque.