Átomo Expositivo: Tablas
Á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ónbody
es el cuerpo de la tabla y contiene múltiples renglonesfooter
es el pie de la tabla y contiene un renglóntype
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.
[
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.
Actualizado el: 09/08/2021
¡Gracias!