Blaze UI es un marco de código abierto de CSS . Es un kit de herramientas de interfaz de usuario liviano que proporciona excelentes herramientas para crear aplicaciones personalizadas y escalables. Puede funcionar con cualquier framework que exista. Puede adaptarse a cualquier ecosistema. Todos los diseños o CSS son móviles primero y, por lo tanto, receptivos. Su proyecto está disponible en código abierto, por lo que una gran comunidad lo mantiene.
Blaze UI Calendars es uno de los calendarios más simples que se implementarán en la página web. El calendario también se puede diseñar y podemos seleccionar las fechas del calendario.
Atributos de los calendarios de Blaze UI:
- fecha : Establece la fecha seleccionada inicialmente del calendario.
- seleccionado : este evento se activa cuando se selecciona una fecha.
- type : Esto le da estilo al calendario.
Sintaxis:
<blaze-calendar date="..."></blaze-calendar>
Ejemplo 1: En el siguiente ejemplo, tenemos un calendario simple con una fecha inicial establecida.
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> GeeksforGeeks | BlazeUI </title> <link rel="stylesheet" href= "https://unpkg.com/@blaze/css@x.x.x/dist/blaze/blaze.css" /> <script type="module" src= "https://unpkg.com/@blaze/atoms@x.x.x/dist/blaze-atoms/blaze-atoms.esm.js"> </script> <script nomodule="" src= "https://unpkg.com/@blaze/atoms@x.x.x/dist/blaze-atoms/blaze-atoms.js"> </script> <script src= "https://code.jquery.com/jquery-3.6.0.min.js"> </script> </head> <body> <div class="o-container" style="padding: 1em;"> <center> <div> <h1 style="color: green;"> GeeksforGeeks </h1> </div> <strong> Blaze UI Calendars </strong> <br> <br> <blaze-calendar date="April 24, 1973"> </blaze-calendar> </center> </div> </body> </html>
Producción:
Calendarios de interfaz de usuario de Blaze
Ejemplo 2: En el siguiente ejemplo, cambiaremos el estilo del calendario usando botones.
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> GeeksforGeeks | BlazeUI </title>
<link rel="stylesheet" href=
"https://unpkg.com/@blaze/css@x.x.x/dist/blaze/blaze.css" />
<script type="module" src=
"https://unpkg.com/@blaze/atoms@x.x.x/dist/blaze-atoms/blaze-atoms.esm.js">
</script>
<script nomodule="" src=
"https://unpkg.com/@blaze/atoms@x.x.x/dist/blaze-atoms/blaze-atoms.js">
</script>
<script src=
"https://code.jquery.com/jquery-3.6.0.min.js">
</script>
</head>
<body>
<div class="o-container" style="padding: 1em;">
<center>
<div>
<h1 style="color: green;">
GeeksforGeeks
</h1>
</div>
<strong>
Blaze UI Calendars
</strong>
<br> <br>
<div style="display: flex; justify-content: space-evenly;">
<button class="c-button c-button--brand"
onclick="changeType('brand')">
Brand
</button>
<button class="c-button c-button--success"
onclick="changeType('success')">
Success
</button>
<button class="c-button c-button--warning"
onclick="changeType('warning')">
Warning
</button>
<button class="c-button c-button--info"
onclick="changeType('info')">
Info
</button>
</div>
<blaze-calendar date="April 24, 1973">
</blaze-calendar>
</center>
</div>
<script>
const changeType = (type) => {
$('blaze-calendar').attr('type', type)
}
</script>
</body>
</html>
Producción:
Calendarios de interfaz de usuario de Blaze
Referencia: https://www.blazeui.com/components/calendars
Publicación traducida automáticamente
Artículo escrito por manavsarkar07 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA