Átomo Expositivo:

Este tipo de contenido muestra una forma de presentar información con una combinación de elementos.

El átomo más importante de esta construcción es Label, que es un átomo que permite insertar un elemento con cualquier tipo de contenido en una posición relativa de un bloque previo.

Personalización del Átomo:

Las partículas son los atributos del átomo, es decir, las configuraciones disponibles que se pueden personalizar dependiendo del ejercicio que desees realizar. En este caso, un Hotspot hace uso de una imagen fija, seguida de una o varias etiquetas con el átomo Label, las cuales contienen un contenido (dentro de la partícula content) y una particula llamada position, compuesta a la vez de dos valores, x y y que representan la posición del contenido.

En este átomo además se hace uso dentro de content de un átomo Modal que permite mostrar información al dar clic a un botón numerado, que a la vez está basado en un átomo Button con algunas partículas de formato relevantes, como class: is-rounded para redondear el botón, y una partícula style que limita el ancho del botón a un valor fijo.

No todos los tipos de contenido permiten la inserción de átomos Label. Te recomendamos mantener la estructura propuesta de este átomo para aprovechar imágenes con etiquetas que muestren información adicional.


En caso de que quieras modificarlo desde el Markup, esta es la estructura que debes de seguir:

Se muestra únicamente una partícula tipo Label dentro de este ejemplo de Hotspot

- page:
  - card m-5:
    - Image: cockpit.jpg
    - Label:
        position:
          x: 0.49
          y: 0.25
        content: 
        - Modal:
            header:
            - Button:
                content: <b>1
                class: is-rounded
                style: "width: 22px;"
            content:
            - box:
              - text: 'Lower Overhead Panel'

Donde - page: es la página que contiene los átomos, por lo que es necesario incluirlo al principio del Markup, - title: es un átomo de título y - subtitle: es un átomo de subtítulo.


Cuida el indentado del Markup para visualizar correctamente la conformación del contenido.

¿Quieres aprender paso a paso? Inscríbete al curso gratuito "Introducción a Bloom" de Yeira Academy

¿Necesitas ayuda? Contacta al Soporte de Yeira en: soporte@yeira.training

¿Aún no tienes cuenta en Yeira? Crea una gratis ahora aquí.

Actualizado el: 09/08/2021