Átomo Expositivo: Tablas

Este átomo de Bloom permite insertar tablas en línea, en un formato con estilos que visualmente ayudan a la lectura de la información contenida dentro de la tabla.

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, el elemento Table cuenta con las siguientes partículas:

header es el encabezado de la tabla y contiene un renglón
body es el cuerpo de la tabla y contiene múltiples renglones
footer es el pie de la tabla y contiene un renglón
type permite agregar varios modificadores de estilo para adecuar visualmente la tabla

Dentro de las partículas header, body y footer es necesario incluir uno o varios elementos de tipo - row:, dentro del cual se debe agregar un listado de elementos.

Los elementos al interior de - row: pueden ser de cualquier tipo dentro de Bloom, inclusive átomos o estructuras más complejas.

Para modificar una tabla desde el Markup, esta es la estructura que debes de seguir:

- page:
  - Table:
      header:
      - row:
        - is-size-5: Características 
        - is-size-5: xAPI
        - is-size-5: SCORM
      body:
      - row: [<b>Interoperabilidad, Alta, Baja]
      - row: [<b>Expresividad, Alta, Media]
      - row: [<b>Facilidad de Uso, Media, Alta]
      footer: 
      - row:
        - text: Resultado
        - text has-text-success: Seleccionado
        - text has-text-danger: Rechazado
      type: is-bordered is-narrow is-hoverable is-fullwidth

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.

En el ejemplo se muestran dos tipos de estructuras de elementos, en el caso del elemento header se ve una estructura extendida que tiene cada elemento en un renglón separado, mientras que en body se muestran renglones con una estructura de arreglo con los caracteres [ y ] (formato de arreglo), que puede ser más compacto y de utilidad cuando los elementos internos son de texto sin formato.

En cuanto a lo que la partícula type puede contener, se tienen nombres de clases de estilo que pueden aplicarse a la tabla, por ejemplo:

is-bordered, agrega bordes a los elementos de la tabla.
is-striped, marca cada renglón con un formato alternado de sombras.
is-narrow, hace la tabla lo más angosta posible en dirección horizontal.
is-hoverable, agrega un efecto de marcado bajo el apuntador del ratón.
is-fullwidth, extiende la tabla al ancho máximo disponible en la sección.


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