Blaze UI es un marco front-end receptivo y un kit de herramientas de interfaz de usuario de código abierto gratuito que se utiliza para crear sitios fácilmente. Nos proporciona una estructura excepcional que nos ayuda a formar una base sólida y fácil de mantener para los sitios web. Todos los componentes se desarrollan manteniendo la capacidad de respuesta móvil como una prioridad para que funcionen en cualquier tamaño de pantalla. También nos da la libertad de integrar el otro marco si lo deseamos. Con variables y mixins fáciles de usar, ofrece una fácil configuración de compilaciones personalizadas. Nos ofrece muchos componentes como acordeones, autocompletar, avatares, migas de pan, etc., lo que nos permite diseñar y construir sitios cómodamente.
Blaze UI Visibility nos ayuda a alternar la visibilidad y la apariencia de un elemento. 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. Uno de los mejores usos de esto es hacer que nuestra página web responda.
Mostrar clases de visibilidad:
- u-display-none: Se utiliza para hacer desaparecer el elemento.
- u-display-initial: Se utiliza para revertir las características de visualización de un elemento a las predeterminadas.
- u-display-inline: muestra un elemento como un elemento en línea, ninguna propiedad de alto o ancho tiene ningún efecto.
- u-display-inline-block: Muestra un elemento como un contenedor de bloques de nivel en línea. El elemento en sí se presenta como un elemento en línea, pero se pueden aplicar valores de alto y ancho.
- u-display-block: Muestra un elemento como un elemento de bloque. Comienza desde una nueva línea y ocupa todo el ancho disponible.
- u-display-table: Muestra un elemento como un elemento de tabla
- u-display-table-cell: Representa el elemento como una celda de una tabla o como un elemento <td>.
- u-display-flex: muestra el elemento como un contenedor flexible a nivel de bloque.
- u-display-inline-flex: muestra el elemento como un contenedor flexible de nivel en línea.
Clases de visibilidad:
- u-visible: Mantiene el elemento visible. Es el valor predeterminado.
- u-invisible: Oculta el elemento. Pero el espacio sigue ocupado.
- u-visually-hidden: está oculto en pantallas normales pero visible en tecnologías de asistencia como lectores de pantalla.
Sintaxis:
<div class="class_name">
...
</div>
Utilidad receptiva: estas clases de visualización se pueden usar para aplicar estas propiedades de visualización en ciertos tamaños de pantalla. Por ejemplo, u-display-none@large ocultará el elemento cuando la ventana gráfica tenga un ancho grande o mayor.
Ejemplo 1: 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> <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: green; width: 3rem; color: white">Geeks</span> <span class="" style="background: green; width: 3rem; color: white">for</span> <span class="" style="background: green; 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: green; width: 3rem; color: white">Geeks</span> <span style="background: green; width: 3rem; color: white">for</span> <span style="background: green; 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: green; width: 3rem; color: white">Geeks</span> <span style="background: green; width: 3rem; color: white">for</span> <span style="background: green; 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: green; width: 3rem; color: white">Geeks</span> <span style="background: green; width: 3rem; color: white">for</span> <span style="background: green; width: 3rem; color: white">Geeks</span> </div> </body> </html>
Producción:
Ejemplo 2: El siguiente código muestra el uso de u-display-none@small para hacer que las páginas web respondan.
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> <h1 style="color: green">GeeksforGeeks</h1> <h3>Blaze UI Visibility</h3> <p class="u-display-none u-display-block@medium u-large" style="color: blue"> Hello! I'm Visible on screens bigger than medium size. </p> <p class="u-display-none u-display-block@large u-large" style="color: olive"> Hello! I'm Visible on large screen. </p> </body> </html>
Producción:
Referencia: https://www.blazeui.com/utils/visibility
Publicación traducida automáticamente
Artículo escrito por priyanshuchatterjee01 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA