# 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)](/experience-cloud/experience-cloud-es/primeros-pasos/aprendiendo-lo-basico.md#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 %} | | --- # Agent Instructions: Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter: ``` GET https://docs.avonnicomponents.com/experience-cloud/experience-cloud-es/experience-components/ax-pestanas.md?ask= ``` The question should be specific, self-contained, and written in natural language. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.