Blaze UI es un marco front-end gratuito de código abierto. Nos proporciona una estructura sobresaliente que nos ayuda a formar una base sólida y mantenible para los sitios web y todos los componentes se desarrollan manteniendo la capacidad de respuesta móvil como una prioridad para que funcionen en cualquier tamaño de pantalla. Nos ofrece muchos componentes útiles como acordeones, autocompletar, avatares, migas de pan, etc., lo que nos permite diseñar y construir sitios cómodamente.
En este artículo, aprenderemos sobre la visualización de la visibilidad mediante la interfaz de usuario de Blaze. La visibilidad es la clase de interfaz de usuario de Blaze que nos ayuda a alternar la visibilidad y la apariencia de un elemento y el objetivo principal de usar estas clases es permitirnos alternar la visibilidad y la apariencia de los elementos en puntos de interrupción específicos. Puede hacer que cualquier página web responda usando esta clase.
Mostrar clases de visibilidad:
- u-display-none: Esta clase se utiliza para hacer desaparecer el elemento.
- u-display-initial: esta clase se utiliza para revertir las características de visualización de un elemento a las predeterminadas.
- u-display-inline: esta clase se usa para mostrar un elemento como un elemento en línea, ninguna propiedad de alto o ancho tiene ningún efecto.
- u-display-inline-block: esta clase se utiliza para mostrar un elemento como un contenedor de bloques de nivel en línea.
- u-display-block: Esta clase se utiliza para mostrar un elemento como un elemento de bloque y comienza desde una nueva línea y ocupa todo el ancho disponible.
- u-display-table: esta clase se utiliza para mostrar un elemento como un elemento de tabla.
- u-display-table-cell: Esta clase se utiliza para representar el elemento como una celda de una tabla o como un elemento <td>.
- u-display-flex: esta clase se usa para mostrar el elemento como un contenedor flexible a nivel de bloque.
- u-display-inline-flex: esta clase se usa para mostrar el elemento como un contenedor flexible de nivel en línea.
Clases de visibilidad:
- u-visible: esta clase se utiliza para mantener el elemento visible. Es el valor predeterminado.
- u-invisible: Esta clase se utiliza para ocultar el elemento. Pero el espacio sigue ocupado.
- u-visually-hidden: esta clase se usa para ocultarse en pantallas normales pero es visible en tecnologías de asistencia como lectores de pantalla.
Sintaxis:
<div class="class_name"> ... </div>
Ejemplo: El siguiente código muestra el uso de u-display-inline-block.
HTML
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href= "https://unpkg.com/@blaze/css@x.x.x/dist/blaze/blaze.css"> <title>Blaze UI Visibility</title> </head> <body> <center> <h1 style="color: green">GeeksforGeeks</h1> <h3>Blaze UI Visibility</h3> <div class="u-display-inline-block u-large" style="background: grey; height: 3rem; padding: 0.7rem; margin: 2rem"> <span style="background: black; width: 3rem; color: white"> Geeks </span> <span class="" style="background: black; width: 3rem; color: white"> for </span> <span class="" style="background: black; width: 3rem; color: white"> Geeks </span> </div> <div class="u-display-inline-block u-large" style="background: grey; height: 3rem; padding: 0.7rem; margin: 2rem"> <span style="background: black; width: 3rem; color: white"> Geeks </span> <span style="background: black; width: 3rem; color: white"> for </span> <span style="background: black; width: 3rem; color: white"> Geeks </span> </div> <div class="u-display-flex u-large" style="background: grey; height: 3rem; padding: 0.7rem; margin: 2rem"> <span style="background: black; width: 3rem; color: white"> Geeks </span> <span style="background: black; width: 3rem; color: white"> for </span> <span style="background: black; width: 3rem; color: white"> Geeks </span> </div> <div class="u-display-flex u-large" style="background: grey; height: 3rem; padding: 0.7rem; margin: 2rem"> <span style="background: black; width: 3rem; color: white"> Geeks </span> <span style="background: black; width: 3rem; color: white"> for </span> <span style="background: black; width: 3rem; color: white"> Geeks </span> </div> </center> </body> </html>
Producción:
Interfaz de usuario de Blaze | Visibilidad
Ejemplo 2: El siguiente código muestra el uso de u-display-inline-flex.
HTML
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href= "https://unpkg.com/@blaze/css@x.x.x/dist/blaze/blaze.css"> <title>Blaze UI Visibility</title> </head> <body style="background:lightgrey;"> <center> <h1 style="color: green">GeeksforGeeks</h1> <h3>Blaze UI Visibility</h3> <div class="u-display-inline-flex u-large" style="background: black; height: 3rem; padding: 0.7rem; margin: 2rem"> <span style=" width: 3rem; color: white"> Geeks </span> <span style=" width: 3rem; color: white"> for </span> <span style=" width: 3rem; color: white"> Geeks </span> </div> <div class="u-display-inline-flex u-large" style="background: black; height: 3rem; padding: 0.7rem; margin: 2rem"> <span style=" width: 3rem; color: white"> Geeks </span> <span style=" width: 3rem; color: white"> for </span> <span style=" width: 3rem; color: white"> Geeks </span> </div> <div class="u-display-flex u-large" style="background: black; height: 3rem; padding: 0.7rem; margin: 2rem"> <span style=" width: 3rem; color: white"> Geeks </span> <span style=" width: 3rem; color: white"> for </span> <span style=" width: 3rem; color: white"> Geeks </span> </div> <div class="u-display-flex u-large" style="background: black; height: 3rem; padding: 0.7rem; margin: 2rem"> <span style=" width: 3rem; color: white"> Geeks </span> <span style=" width: 3rem; color: white"> for </span> <span style=" width: 3rem; color: white"> Geeks </span> </div> </center> </body> </html>
Producción:
Interfaz de usuario de Blaze | visibilidad
Referencia: https://www.blazeui.com/utils/visibility/
Publicación traducida automáticamente
Artículo escrito por krishna_97 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA