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 fácil de mantener. 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 los buzones de la interfaz de usuario de Blaze. Los cuadros de letras proporcionan relleno en la parte superior e inferior de un elemento. Los buzones están disponibles en ocho tamaños diferentes que se mencionan a continuación.
Blaze UI Letter Boxes Clases:
- u-letter-box-super: Esta clase se usa cuando necesitamos un buzón de gran tamaño.
- u-letter-box-xlarge: Esta clase se utiliza cuando necesitamos un buzón de tamaño extra grande.
- u-letter-box-large: Esta clase se utiliza cuando necesitamos un buzón de gran tamaño.
- u-letter-box-medium: Esta clase se utiliza cuando necesitamos un buzón de tamaño medio.
- u-letter-box-small: Esta clase se utiliza cuando necesitamos un buzón de pequeño tamaño.
- u-letter-box-xsmall: Esta clase se utiliza cuando necesitamos un buzón extra pequeño.
- u-letter-box-tiny: Esta clase se utiliza cuando necesitamos un buzón de tamaño minúsculo.
- u-letter-box-none: esta clase se usa cuando necesitamos un buzón con cero relleno.
Sintaxis:
<div class="u-letter-box-small">
...
</div>
Ejemplo 1: El siguiente ejemplo muestra el uso de buzones de tamaño súper, extragrande, grande y mediano. El relleno tiene un color verde claro y el contenido tiene un color verde.
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>Letter Boxes | Blaze UI</title>
<link rel="stylesheet" href=
"https://unpkg.com/@blaze/css@10.0.4/dist/blaze/blaze.css">
<style>
html {
font-family: sans-serif;
text-align: center;
}
.box{
margin-top: 30px;
background-color: #99e399;
}
</style>
</head>
<body>
<div>
<h2 style="color: green;">GeeksforGeeks</h2>
<h3>Letter Boxes - Blaze UI</h3>
</div>
<div class="u-letter-box-super box">
<p style="background-color: green;">u-letter-box-super</p>
</div>
<div class="u-letter-box-xlarge box">
<p style="background-color: green;">u-letter-box-xlarge</p>
</div>
<div class="u-letter-box-large box">
<p style="background-color: green;">u-letter-box-large</p>
</div>
<div class="u-letter-box-medium box">
<p style="background-color: green;">u-letter-box-medium</p>
</div>
</body>
</html>
Producción:
Ejemplo 2: El siguiente ejemplo muestra los Letter Boxes pequeño, extrapequeño, diminuto y de tamaño cero.
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>Letter Boxes | Blaze UI</title>
<link rel="stylesheet" href=
"https://unpkg.com/@blaze/css@10.0.4/dist/blaze/blaze.css">
<style>
html {
font-family: sans-serif;
text-align: center;
}
.box{
margin-top: 30px;
background-color: #99e399;
}
</style>
</head>
<body>
<div>
<h2 style="color: green;">GeeksforGeeks</h2>
<h3>Letter Boxes - Blaze UI</h3>
</div>
<div class="u-letter-box-small box">
<p style="background-color: green;">u-letter-box-small</p>
</div>
<div class="u-letter-box-xsmall box">
<p style="background-color: green;">u-letter-box-xsmall</p>
</div>
<div class="u-letter-box-tiny box">
<p style="background-color: green;">u-letter-box-tiny</p>
</div>
<div class="u-letter-box-none box">
<p style="background-color: green;">u-letter-box-none</p>
</div>
</body>
</html>
Producción:
Referencia: https://www.blazeui.com/utils/boxing/