Salida del componente de ejemplo

Para experimentar el componente Pestañas, ver ejemplos de sus opciones de configuración y la salida HTML y JSON, visite la Biblioteca de componentes.

Detalles técnicos

La documentación técnica más reciente sobre el componente Pestañas se encuentra en GitHub.

Puede encontrar más información sobre el desarrollo de componentes principales en la documentación para desarrolladores de componentes principales.

Vinculación profunda a un panel

Los componentes Carrusel, Pestañas y Acordeón admiten el enlace directo a un panel dentro del componente.

Para ello:

  1. Visualice la página con el componente utilizando la opción Ver como publicado en el editor de páginas.
  2. Inspeccione el contenido de la página e identifique el ID del panel.
    • Por ejemplo id="accordion-86196c94d3-item-ca319dbb0b"
  3. El ID se convierte en el anclaje que puede anexar a la URL mediante un hash (#).
    • Por ejemplo https://wknd.site/content/wknd/language-masters/en/magazine/western-australia.html#accordion-86196c94d3-item-ca319dbb0b

Si se desplaza a la dirección URL con el ID de panel como anclaje, el explorador se desplazará directamente al componente en cuestión y mostrará el panel especificado. Si el panel está configurado para no expandirse de forma predeterminada, se expandirá automáticamente.

Pestaña y diseño interactivo

Todos los componentes principales están diseñados para responder completamente, lo que garantiza una experiencia sin problemas en todos los dispositivos.

Algunos componentes avanzados, como el componente Pestaña, pueden requerir una consideración específica en el contexto del proyecto de implementación para mantener la capacidad de respuesta en todas las condiciones. Consulte el documento Diseño interactivo de los componentes principales para obtener más información.

Cuadro de diálogo de edición

El cuadro de diálogo de edición permite al autor del contenido crear, cambiar el nombre y reorganizar pestañas, así como definir la pestaña activa.

Pestaña Elementos

Pestaña Elementos del cuadro de diálogo de edición del componente

Utilice el botón Añadir para abrir el selector de componentes y elegir qué componente añadir como pestaña. Una vez añadida, se añade una entrada a la lista, que contiene las siguientes columnas:

  • Icono: el icono del tipo de componente de la pestaña para facilitar la identificación en la lista. Pase el ratón por encima para ver el nombre completo del componente como información sobre herramientas.
  • Descripción: la descripción utilizada como texto de la pestaña, de forma predeterminada, es el nombre del componente seleccionado para la pestaña.
  • Eliminar: toque o haga clic para eliminar la pestaña del componente de pestaña.
  • Reorganizar: toque o haga clic y arrastre para reorganizar el orden de las pestañas.
TIP
Si la ventana móvil de la página se reduce para que el cuadro de diálogo de edición pase a estar en pantalla completa, el botón Añadir se ocultará. Los componentes se pueden añadir al componente Pestañas arrastrando desde el explorador de componentes y soltando en el componente Pestañas del editor de páginas.

Pestaña Propiedades

Pestaña Propiedades del cuadro de diálogo de edición del componente Pestañas

  • Elemento activo: el autor del contenido puede definir qué pestaña está activa cuando se carga la página.

    • Con la opción Por defecto, se selecciona la primera pestaña.
  • ID: esta opción permite controlar el identificador único del componente del HTML y de la capa de datos.

    • Si se deja en blanco, se generará automáticamente un ID único que se puede encontrar inspeccionando la página resultante.
    • Si se especifica un ID, es responsabilidad del autor asegurarse de que sea único.
    • Cambiar el ID puede afectar al seguimiento de CSS, JS y de la capa de datos.

Pestaña Accesibilidad

Pestaña del cuadro de diálogo de edición del componente pestaña de accesibilidad

En la pestaña Accesibilidad, se pueden configurar valores para las etiquetas de accesibilidad ARIA del componente.

  • Etiqueta: valor de un atributo de etiqueta ARIA para el componente

Seleccionar panel

El autor del contenido puede utilizar la opción Seleccionar panel de la barra de herramientas de componentes para cambiar a un panel diferente y editarlo, así como para reorganizar fácilmente el orden de las pestañas.

Icono Seleccionar panel

Una vez seleccionada la opción Seleccionar panel en la barra de herramientas de componentes, las pestañas configuradas se muestran como una lista desplegable.

  • La lista se ordena según la disposición asignada de las pestañas y se refleja en la numeración.
  • El tipo de componente de la pestaña se muestra primero, seguido de la descripción de la pestaña con la fuente más clara.

Seleccionar la ventana emergente del panel

  • Al tocar o hacer clic en una entrada de la lista desplegable, cambia la vista del editor a esa pestaña.
  • Las pestañas se pueden cambiar utilizando los controladores de arrastre.
NOTE
El autor no puede seleccionar las pestañas cuando se encuentra en modo Editar. Utilice el modo Vista previa o la opción Ver como publicado para interactuar con las pestañas como lector del contenido publicado.