Blaze UI es un marco gratuito y de código abierto con un kit de herramientas de interfaz de usuario liviano que proporciona una excelente estructura para crear sitios web rápidamente con una base escalable y mantenible. Todos los componentes de la interfaz de usuario de Blaze se desarrollan primero para dispositivos móviles y se basan únicamente en las funciones nativas del navegador, no en una biblioteca o marco por separado. Nos ayuda a crear un sitio web escalable y receptivo de manera rápida y eficiente con un estilo consistente.
En este artículo, veremos la superposición de interfaz de usuario de Blaze. El componente de superposición se usa en muchos otros componentes, como modal, para oscurecer el contenido de la página. Para hacer uso de superposiciones se utiliza la clase c-overlay . De forma predeterminada, las superposiciones están ocultas. Para hacer visibles las superposiciones, podemos usar la clase c-overlay–visible .
- Superposición básica de la interfaz de usuario de Blaze : la superposición básica tiene clases que podrían usarse para la superposición básica.
- Variaciones de la interfaz de usuario de Blaze : las variaciones se utilizan para superposiciones para cambiar las clases de variación.
Sintaxis:
<div class="c-overlay c-overlay--visible"></div>
Ejemplo 1: En el siguiente ejemplo, no hemos usado la clase c-overlay .
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@10.0.4/dist/blaze/blaze.css">
<style>
body {
font-family: sans-serif;
text-align: center;
}
</style>
</head>
<body>
<h2 style="color:green;">
GeeksforGeeks
</h2>
<h3>Basic Overlay - Blaze UI</h3>
<div class="u-window-box-super">
<h2>What is GeeksforGeeks?</h2>
<p>
GeeksforGeeks is a computer science portal
for geeks around the globe.One can study
about different topics of Computer Science
domain and can share his/her knowledge with
the community to help everyone learn better.
</p>
</div>
<div class="c-overlay" aria-hidden="true"></div>
</body>
</html>
Producción:
Superposiciones de interfaz de usuario de Blaze
Ejemplo 2: En el siguiente ejemplo, hemos usado la clase c-overlay con la clase c-overlay–visible .
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@10.0.4/dist/blaze/blaze.css">
<style>
body {
font-family: sans-serif;
text-align: center;
}
</style>
</head>
<body>
<h2 style="color:green;">
GeeksforGeeks
</h2>
<h3>Basic Overlay - Blaze UI</h3>
<div class="u-window-box-super">
<h2>What is GeeksforGeeks?</h2>
<p>
GeeksforGeeks is a computer science portal
for geeks around the globe. One can study
about different topics of Computer Science
domain and can share his/her knowledge with
the community to help everyone learn better.
</p>
</div>
<div class="c-overlay c-overlay--visible"
aria-hidden="true">
</div>
</body>
</html>
Producción:
Superposiciones de interfaz de usuario de Blaze
Referencia: https://www.blazeui.com/components/overlays/
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