# AX - Pestañas

## Resumen

**AX - Pestañas** es un componente de Experience Cloud que organiza el contenido en pestañas etiquetadas en las páginas de Experience Sites, permitiendo a los usuarios del portal cambiar entre diferentes secciones sin salir de la página.

Úsalo para organizar contenido relacionado que no necesita estar todo visible a la vez, como detalles de productos en varias pestañas, formularios de varias secciones, recursos categorizados o información agrupada. Elige diseños de pestañas horizontales o verticales y configura el estilo en Experience Builder.

Perfecto para páginas de información de productos, formularios de varios pasos, categorías de recursos, secciones de cuenta o cualquier lugar donde tu portal necesite organizar contenido en vistas conmutables. 

{% hint style="danger" %}
Este componente [aprovecha los espacios (slots)](https://docs.avonnicomponents.com/experience-cloud/experience-cloud-es/primeros-pasos/aprender-lo-basico#understanding-slots) para la personalización avanzada, lo que lo hace ideal para sitios LWR. Los sitios Aura no admiten este nivel de personalización.
{% endhint %}

## Tutoriales

Próximamente

## Configuración

{% tabs %}
{% tab title="🎛️ Propiedades" %}

| Nombre                                                                          | Descripción                                                                                                                                                                             | Uso                                                                                                                                                                                                    |
| ------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| **Orientación**                                                                 | Establece la orientación de las pestañas, eligiendo entre un diseño horizontal o vertical.                                                                                              | Selecciona la orientación que mejor se adapte a tus necesidades de diseño, optimizando el diseño para la navegación del usuario y la visibilidad del contenido.                                        |
| **Con alcance**                                                                 | Habilita el estilo con alcance para una aplicación de estilos más enfocada y específica a las pestañas.                                                                                 | Utiliza esta función para aplicar estilos que estén confinados al componente, evitando conflictos de estilo no deseados con otros elementos de la página.                                              |
| **Desplazables y botones de desplazamiento**                                    | Hace que las pestañas sean desplazables y gestiona la visibilidad de los botones de desplazamiento, asegurando una navegación fácil incluso con un mayor número de pestañas.            | Configura las funciones de desplazamiento según la cantidad y el diseño de las pestañas, asegurando que los usuarios puedan acceder y navegar fácilmente por todas las pestañas disponibles.           |
| **Imagen de fondo del contenido CMS o URL de la imagen de fondo del contenido** | Personaliza el fondo del área de contenido de la pestaña eligiendo una imagen del CMS o proporcionando una URL.                                                                         | Mejora el atractivo visual de tus pestañas aplicando una imagen de fondo que complemente el diseño general y la presentación del contenido.                                                            |
| **Fuente de datos**                                                             | Define la fuente de las etiquetas y el contenido de las pestañas, permitiendo la configuración manual de propiedades de las pestañas como etiquetas, iconos y descripciones emergentes. | Utiliza esta función para personalizar los datos de las pestañas, asegurando que cada pestaña esté etiquetada con precisión y se enriquezca con iconos o descripciones emergentes según sea necesario. |
| {% endtab %}                                                                    |                                                                                                                                                                                         |                                                                                                                                                                                                        |

{% tab title="🎨 Estilizado" %}

| Nombre                                  | Descripción                                                                                                                                       |
| --------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------- |
| **Configuración de tamaño**             | Define el ancho y la altura de las pestañas, asegurando que se integren perfectamente dentro de tu diseño.                                        |
| **Estilos de fondo y borde**            | Personaliza fondos y bordes con opciones como colores y tamaños, mejorando la distinción visual de cada pestaña.                                  |
| **Estilos de pestañas**                 | Ajusta diversos aspectos como alineación vertical, ancho, altura y espaciado para refinar la apariencia y el diseño de las pestañas.              |
| **Estilos de etiqueta y subtítulo**     | Adapta la apariencia del texto dentro de las pestañas, aplicando colores y estilos de fuente para mejorar la legibilidad y el atractivo estético. |
| **Estilos del botón de desbordamiento** | Personaliza la apariencia del botón de desbordamiento, ajustando colores de texto y fondo para la coherencia visual.                              |
| {% endtab %}                            |                                                                                                                                                   |
| {% endtabs %}                           |                                                                                                                                                   |