> For the complete documentation index, see [llms.txt](https://docs.avonnicomponents.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.avonnicomponents.com/experience-cloud/experience-cloud-es/experience-components/ax-tabs.md). # 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 slots](/experience-cloud/experience-cloud-es/primeros-pasos/learning-the-basics.md#understanding-slots) para una 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. | | **Acotado** | Habilita el estilo acotado para aplicar un estilo más centrado y específico a las pestañas. | Usa esta función para aplicar estilos limitados al componente, evitando conflictos de estilo no deseados con otros elementos de la página. | | **Pestañas desplazables y botones de desplazamiento** | Haz que las pestañas sean desplazables y gestiona la visibilidad de los botones de desplazamiento, asegurando una navegación fácil incluso con una mayor cantidad 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 las pestañas 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 el origen 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é correctamente etiquetada y enriquecida con iconos o descripciones emergentes según sea necesario. | | {% endtab %} | | | {% tab title="🎨 Estilo" %} | Nombre | Descripción | | --------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------- | | **Configuración de tamaño** | Define el ancho y la altura de las pestañas, asegurando que encajen perfectamente en 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 varios aspectos como la alineación vertical, el ancho, la altura y el espaciado para refinar la apariencia y el diseño de las pestañas. | | **Estilos de etiqueta y subtítulo** | Adapta el aspecto 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 los colores del texto y del fondo para mantener la coherencia visual. | | {% endtab %} | | | {% endtabs %} | | --- # Agent Instructions This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com. ## 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, and the optional `goal` query parameter: ``` GET https://docs.avonnicomponents.com/experience-cloud/experience-cloud-es/experience-components/ax-tabs.md?ask=&goal= ``` `ask` is the immediate question: it should be specific, self-contained, and written in natural language. `goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal. 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.