Blaze UI es un kit de herramientas de interfaz de usuario de código abierto gratuito 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 básica de Blaze UI . 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 .
Clases superpuestas básicas de Blaze UI:
- c-overlay: esta clase se utiliza para crear la superposición.
- c-overlay–visible: esta clase se usa con la clase c-overlay para hacer visible la superposición.
Sintaxis:
<div class="c-overlay c-overlay--visible"
aria-hidden="true">
</div>
Ejemplo 1: este ejemplo muestra el uso de la clase c-overlay para crear una superposición. No habrá ningún cambio visual ya que la superposición está oculta de forma predeterminada.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Blaze UI - Basic Overlay</title>
<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:
Ejemplo 2: Este ejemplo muestra el uso de c-overlay–visible para hacer visible la superposición. Puede ver una superposición grisácea sobre el contenido en la imagen de salida.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Blaze UI - Basic Overlay</title>
<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:
Referencia: https://www.blazeui.com/components/overlays
Publicación traducida automáticamente
Artículo escrito por prakhara306 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA