Bootstrap 4.2 - spinners, notificaciones "toast", interruptores y otros detalles

A partir de la versión 4.2 de Bootstrap existen algunos controles y mejoras de los existentes que es interesante conocer. Vamos a verlos:

 

Spinners o indicadores de carga y progreso

En muchas ocasiones hay procesos que pueden tardar algo de tiempo en llevarse a cabo: la carga de una parte de la página o incluso de la página entera, una llamada a través de AJAX en segundo plano... Este tipo de cosas. En estos casos, para que el usuario tenga la sensación de que algo está funcionando y que debe esperar, lo normal es proporcionar algún tipo de feedback visual con una animación. Y para esto precisamente es para lo que sirve el primero de los componentes que se lanzan con la versión 4.2: el spinner.

Existen dos tipos de spinners que generan dos tipos de animaciones diferentes:

• El borde giratorio: que muestra un círculo dando vueltas.

• El punto creciente: que utiliza un punto que aparece poco a poco creciendo desde la nada.

Añadir uno a la página es realmente sencillo: basta con asignarle a cualquier elemento contenedor (por ejemplo un div) la clase .spinner-border o .spinner-grow respectivamente, siendo en su expresión más sencilla algo como esto:

<span class="spinner-border"></span>

que crearía un spinner de tipo borde giratorio con el tamaño y color por defecto, como el de la animación anterior.

Se puede controlar su color usando cualquiera de las clases predefinidas para colores de Bootstrap, es decir, text-primary, text-success, y similares... Por ejemplo, para tener un punto creciente de color rojo como indicador sería:

<span class="spinner-grow text-danger"></span>

Disponen de dos tamaños predefinidos: el que tienen por defecto y uno más pequeño que se consigue añadiéndoles el sufijo -sm (de "small") a su nombre de clase, aplicando ambas (la del spinner y la del tamaño), así:

<span class="spinner-border spinner-border-sm"></span>

Esto es útil, por ejemplo, para meterlos dentro de botones y elementos similares, que nos permite dar un efecto muy chulo cuando se genera alguna acción en segundo plano, como una llamada AJAX por ejemplo:

<button class="btn btn-primary text-nowrap" type="button">
  <span class="spinner-border spinner-border-sm mr-2"></span>
  Enviando datos...
</button>

que nos da algo como esto:

Ten en cuenta que para crear este tipo de spinners se utilizan por debajo animaciones CSS, no JavaScript. En ambos casos lo que se hace es poner los bordes redondeados, con uno de los cuatro bordes transparentes en el caso del que gira.

Esto tiene dos implicaciones importantes:

1. No es necesario incluir bootstrap.js para que funcionen.
2. Si le aplicas estas clases a un elemento que no esté vacío, afectará a todo lo que tenga dentro. Por ejemplo, si usas .spinner-border en un elemento que tiene texto se convertirá todo, en un elemento redondo y girará todo el contenido. Por ejemplo, si tenemos esto:

<div class="spinner-border text-danger">
    <div>Girando!!</div>
</div>

veremos por pantalla una animación como esta:

que en este caso es un poco "chusquera" pero que te dará una idea de las posibilidades.

Mediante JavaScript podemos iniciarlos y pararlos simplemente colocándoles o quitándoles la clase correspondiente. Así que, no tiene misterio alguno y son súper-fáciles de utilizar.

Accesibilidad de los spinners

Para conseguir que este tipo de elementos sean accesibles para lectores de pantalla deberíamos hacer dos cosas:

• Marcarlos con un atributo aria de tipo role
• Incluir un texto dentro que solo se vea en lectores de pantalla, que indique para qué valen

Por ejemplo, así:

<div class="spinner-border text-primary" role="status">
    <span class="sr-only">Procesando...</span>
</div>

En este caso el atributo role="status" indica que la función de este spinner es simplemente la obvia: un indicador de estado. La clase sr-only del texto que contiene es una clase de accesibilidad de Bootstrap que indica que solamente se verá para lectores de pantalla (screen readers, de ahí el prefijo). Con esto sería suficiente.

Notificaciones de tipo "toast"

Otro de los nuevos componentes que se incluyen con Bootstrap 4.2.0 es el que nos permite gestionar notificaciones de tipo "Toast", de las que aparecen cuando queremos dar un mensaje durante unos segundos.

Para construirlos necesitamos utilizar tres clases CSS específicas:

• .toast: para el elemento contenedor que encierra los contenidos de la notificación.
• .toast-header: para la cabecera de la notificación.
• .toast-body: para el cuerpo.

Por lo tanto, para construirla necesitamos como mínimo 3 elementos, aunque es recomendable incluir algunos más para darle un aspecto más agradable. La estructura básica de una notificación sería la siguiente:

<div class="toast">
    <div class="toast-header">
        Título de la notificación
    </div>
    <div class="toast-body">
        Cuerpo de la notificación
    </div>
</div>

Con esto llegaría, pero es interesante, por cuestione estáticas y funcionales, incluir algunos elementos más, por ejemplo:

<div class="toast">
    <div class="toast-header">
        <div class="rounded mr-2" style="height: 16px;width: 16px;background-color: red;"></div>
        <strong class="mr-auto">Título de la notificación</strong>
        <small>Hace 2 segundos</small>
        <button type="button" class="ml-2 mb-1 close" data-dismiss="toast">
          <span aria-hidden="true">&times;</span>
        </button>
    </div>
    <div class="toast-body">
        Cuerpo de la notificación
    </div>
</div>

En este caso dentro de la cabecera hemos incluido un pequeño div con los estilos en línea que lo único que hace es crear un cuadrado rojo para dar un toque estético más bonito. A continuación va el título, esta vez en negrita y con margen automático a la derecha (clase .mr-auto), ponemos en pequeño texto para indicar cuánto hace desde que se mostró (puesto a mano para el ejemplo), y finalmente un elemento con un aspa (× representa una cruz de multiplicar en HTML) que se usará para cerrar la notificación.

Nota: el efecto de cerrar la notificación cuando se pulse sobre el aspa se consigue de manera automática decorando el elemento que contiene el aspa (el botón) con el atributo data-dimiss="toast" que es reconocido por Bootstrap y añade automáticamente esta acción.

Este sería el aspecto de esta notificación básica:

Pero si incluyes el código anterior en una página no verás nada. Por defecto las notificaciones están ocultas (para ser exactos, tienen la opacidad a 0, por lo que son transparentes y hacen un efecto de difuminado sobre lo que tengan debajo).

Para lograr que se vea una notificación hay que usar un poco de JavaScript. En concreto lo único que hay que hacer es localizarlas, inicializarlas y mostrarlas, para lo cual usaremos jQuery, que como sabrás es una dependencia que tiene Bootstrap. Sería algo así:

//Durante la inicialización de la página
$('.toast').toast();

....

//Cuando la queramos mostrar
$('.toast').toast('show');

El método .toast() tiene varias sobrecargas y sirve tanto para inicializar las notificaciones como para mostrar y ocultarlas. Por defecto, cuando se inicializan, aplican una animación de la opacidad para mostrarse y se auto-cierran al cabo de medio segundo. Si queremos cambiar este comportamiento podemos pasarle al método toast() durante la inicialiación un objeto en formato JSON con tres posibles propiedades:

• animation: que por defecto vale true, pero que si le ponemos false hará que se muestre de inmediato sin animación alguna.
• autohide: para decidir si se quiere ocultar automáticamente o no. Si no queremos que se oculte le pasaremos false.
• delay: el tiempo en milisegundos para que se oculte automáticamente en caso de que lo anterior tenga el valor por defecto o true.

Así, por ejemplo, si queremos que se oculten solas pero al cabo de 2 segundos en vez de medio, podemos poner:

$('.toast').toast({ delay: 2000 });

y lo mismo con las demás propiedades, separándolas con comas en el objeto literal que le pasamos.

Luego se muestran llamando también al mismo método pero pasándole la cadena 'show'. Si queremos ocultarlas le pasaríamos la cadena 'hide'. Le podemos pasar la cadena 'dispose' que también la ocultará y la dejará en el DOM, pero que evitará que se pueda volver a mostrar la misma notificación aunque llamemos a .toast('show');.

Nota: si queremos que aparezcan colocadas, por ejemplo, en la parte superior de la pantalla y no en el flujo del DOM de la página, las tenemos que posicionar nosotros mismos usando CSS. Dentro de la propia notificación el estilo de visualización que se utiliza es Flexbox, por lo que puedes usar cualquiera de sus propiedades (o utilidades correspondientes de Bootstrap) para posicionar y alinear los sub-elementos dentro de la cabecera o el cuerpo.

El método toast() es asíncrono. Esto quiere decir que en cuanto lo llamas vuelve y, aunque no se haya mostrado la notificación todavía, el código que hubiera a continuación se seguirá ejecutando. Tenlo en cuenta.

La API de JavaScript para este tipo de elementos define además cuatro eventos:

• show.bs.toast: que salta cuando se llama a toast() para mostrar un elemento.
• shown.bs.toast que se notifica cuando la notificación se acaba de mostrar, tras la animación (si la tiene).
• hide.bs.toast: cuando se empieza a ocultar la notificación.
• hiden.bs.toast: cuando se ha terminado de ocultar la notificación y ha desaparecido por completo de la pantalla.

Interruptores estilo iOS

En los formularios es muy habitual incluir cuadros de verificación para marcar opciones de tipo "Sí o No". Por defecto son unos cuadraditos muy anodinos que podemos marcar o desmarcar, pero cuando se trata de opciones de configuración es mucho más habitual encontrar el tipo interruptor que puso de moda Apple con sus iPhone. Algo como esto:

Boostrap define estos interruptores mediante el uso de una clase de control personalizado llamada .custom-switch, por lo que hay que agregarle esta y además la genérica .custom-control. Además, es necesario incluir dentro un control input de tipo check y la etiqueta con el mensaje correspondiente. Algo así:

<div class="custom-control custom-switch">
  <input type="checkbox" class="custom-control-input" id="opcion1">
  <label class="custom-control-label" for="opcion1">
    Marca o desmarca el interruptor de la izquierda
  </label>
</div>

consiguiendo el efecto que se ve en la animación anterior.

Este control no necesita JavaScript para funcionar, arreglándonos tan solo con la hoja de estilos de Bootstrap 4.

Por debajo lo que hace es ocultar el check original y meter el nuevo elemento en un pseudo-elemento ::before de la etiqueta, que cambia de estado en función de la pseudo-clase :checked del control, por lo que no es fácil cambiarle el aspecto.

Otras novedades de Bootstrap 4.2

Aparte de lo que he explicado hasta ahora, hay unas cuantas novedades más en esta versión, entre las que cabe destacar las siguientes:

• Se da soporte para eventos táctiles en los carruseles, por lo que aparte de usar los controles, en los móviles podemos simplemente arrastrarlos con el dedo para cambiar lo que se muestra.
• Los campos de los formularios que se estén validando muestran unos nuevos iconos para los estados :valid e :invalid.
• Los "tooltips" y los desplegables de tipo popover ahora trabajan con el ShadowDOM para mayor rendimiento.
• Se añaden algunos estilos nuevos para aspecto: .font-weight-lighter, .font-weight-bolder y .text-decoration-none.

Puedes ver a lista completa aquí.

Aquí te dejo un archivo ZIP con los ejemplos que he hecho más arriba (37.3Kb), para que puedas verlos en acción y probarlos.

Y si lo que quieres es aprender Bootstrap te recomiendo que hagas el curso online de Maquetación web multi-dispositivo con Bootstrap, Flexbox y CSS Grid de campusMVP, del que yo soy co-autor y tutor. No solo aprenderás Bootstrap en sus versiones 3 y 4, sino que dominarás el Responsive Web Design utilizando solo CSS además de las tecnologías CSS más recientes como Flexbox y CSS Grid.

¡Espero que te resulte útil!