Blaze UI es un kit de herramientas de interfaz de usuario de código abierto sin marco. Proporciona una gran base para construir sitios web escalables más rápido. Blaze UI viene con una gran cantidad de componentes prediseñados y muchas utilidades para que los desarrolladores no tengan que crear todo desde cero. Todos sus componentes se basan únicamente en las funciones nativas del navegador, por lo que se puede usar sin ninguna biblioteca o marco.
En este artículo, veremos los atributos modales de la interfaz de usuario de Blaze . Modal es un componente de una página web que se muestra delante de todo el contenido de la página web. Generalmente se utiliza para proporcionar o tomar información de los usuarios. El componente Modal en Blaze UI tiene cuatro atributos que se enumeran a continuación.
Atributos modales de la interfaz de usuario de Blaze:
- abierto: este es un atributo booleano que se usa para establecer el estado inicial del modal. si está configurado, modal se abrirá inicialmente.
- descartable: este atributo booleano permite cerrar el modal haciendo clic en el botón de cerrar o en la superposición.
- full: este atributo booleano alterna el estilo de pantalla completa del modal. Si se establece modal será pantalla completa.
- fantasma: este atributo booleano alterna el estilo fantasma del modal. Si está configurado, el modal será un modal fantasma sin el cuerpo.
Sintaxis:
<blaze-modal open dismissible full ghost>
...
</blaze-modal>
Ejemplo 1: El siguiente ejemplo muestra el uso de atributos abiertos y descartables en el modal. Estará abierto de forma predeterminada y se puede cerrar haciendo clic en el botón de cierre o en la superposición.
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">
<title> Modal Attributes | Blaze UI </title>
<link rel="stylesheet" href=
"https://unpkg.com/@blaze/css@10.0.4/dist/blaze/blaze.css">
<script type="module" src=
"https://unpkg.com/@blaze/atoms@x.x.x/dist/blaze-atoms/blaze-atoms.esm.js">
</script>
<style>
html {
font-family: sans-serif;
text-align: center;
}
</style>
</head>
<body>
<div>
<h2 style="color: green;">
GeeksforGeeks
</h2>
<h3>
Modal Attributes - Blaze UI
</h3>
</div>
<blaze-modal open dismissible>
<blaze-card>
<blaze-card-header>
<h2 class="c-heading u-super">
GeeksforGeeks
<div class="c-heading__sub">
A Computer Science Portal for Geeks.
</div>
</h2>
</blaze-card-header>
<blaze-card-body>
<p>
GeeksforGeeks is a online computer
science portal which offers content
related to various computer science
branches. It also offers courses for
GATE, DSA, Competitive Programming, etc.
</p>
</blaze-card-body>
</blaze-card>
</blaze-modal>
</body>
</html>
Producción:
Ejemplo 2: este ejemplo muestra el uso del atributo fantasma en el modal blaze.
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">
<title> Modal Attributes | Blaze UI </title>
<link rel="stylesheet" href=
"https://unpkg.com/@blaze/css@10.0.4/dist/blaze/blaze.css">
<script type="module" src=
"https://unpkg.com/@blaze/atoms@x.x.x/dist/blaze-atoms/blaze-atoms.esm.js">
</script>
<style>
html {
font-family: sans-serif;
text-align: center;
}
</style>
</head>
<body>
<div>
<h2 style="color: green;">
GeeksforGeeks
</h2>
<h3>
Modal Attributes - Blaze UI
</h3>
</div>
<blaze-modal open dismissible ghost>
<h2 class="c-heading u-super">
GeeksforGeeks
<div class="c-heading__sub">
A Computer Science Portal for Geeks.
</div>
</h2>
<p>
GeeksforGeeks is a online computer
science portal which offers content
related to various computer science
branches. It also offers courses for
GATE, DSA, Competitive Programming, etc.
</p>
</blaze-modal>
</body>
</html>
Producción:
Ejemplo 3: El siguiente ejemplo muestra el uso del atributo completo en el modal para que aparezca en pantalla completa.
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">
<title> Modal Attributes | Blaze UI </title>
<link rel="stylesheet" href=
"https://unpkg.com/@blaze/css@10.0.4/dist/blaze/blaze.css">
<script type="module" src=
"https://unpkg.com/@blaze/atoms@x.x.x/dist/blaze-atoms/blaze-atoms.esm.js">
</script>
<style>
html {
font-family: sans-serif;
text-align: center;
}
</style>
</head>
<body>
<div>
<h2 style="color: green;">
GeeksforGeeks
</h2>
<h3>
Modal Attributes - Blaze UI
</h3>
</div>
<blaze-modal open dismissible full>
<h2 class="c-heading u-super">
GeeksforGeeks
<div class="c-heading__sub">
A Computer Science Portal for Geeks.
</div>
</h2>
<p>
GeeksforGeeks is a online computer
science portal which offers content
related to various computer science
branches. It also offers courses for
GATE, DSA, Competitive Programming, etc.
</p>
</blaze-modal>
</body>
</html>
Producción:
Referencia: https://www.blazeui.com/objects/modals