Blaze UI es un marco de código abierto de CSS. Es un conjunto de herramientas de interfaz de usuario liviano y 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 Boxing proporciona un conjunto completo de celdas acolchadas. Obtenemos relleno como relleno de buzón donde el relleno está en la parte superior e inferior, cajas de pilares donde el relleno está a la izquierda y a la derecha por igual y el último es cajas de ventana donde el relleno se proporciona en las cuatro direcciones.
- Buzones de la interfaz de usuario de Blaze : el relleno se aplica por igual en la parte superior e inferior. Los diferentes tamaños son los siguientes:
- Blaze UI Pillar Boxes : el relleno se aplica a la derecha y a la izquierda por igual. Los diferentes tamaños son los siguientes:
- Cuadros de ventana de Blaze UI : el relleno se aplica en las cuatro direcciones por igual. Los diferentes tamaños son los siguientes:
Sintaxis: Utilice la siguiente sintaxis para crear el boxeo:
<div class="u-letter-box-none">
Data Structures
</div>
Ejemplo 1: En el siguiente ejemplo, tenemos el tipo de caja de buzó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" />
<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">
<center>
<h1 style="color: green;">
GeeksforGeeks
</h1>
<strong>Blaze UI Boxing</strong>
<br />
<strong>Letter Boxing</strong>
<br />
<button onclick="changeSize('u-letter-box-none')">
None
</button>
<button onclick="changeSize('u-letter-box-tiny')">
Tiny
</button>
<button onclick="changeSize('u-letter-box-xsmall')">
XSmall
</button>
<button onclick="changeSize('u-letter-box-small')">
Small
</button>
<button onclick="changeSize('u-letter-box-medium')">
Medium
</button>
<button onclick="changeSize('u-letter-box-large')">
Large
</button>
<button onclick="changeSize('u-letter-box-xlarge')">
XLarge
</button>
<button onclick="changeSize('u-letter-box-super')">
Super
</button>
</center>
<br />
<div id="container"
style="background-color: lightgreen;
text-align: center;"
class="u-round-corners u-letter-box-none">
Data Structures
</div>
</div>
<script>
let currentSize = 'u-letter-box-none'
function changeSize(size) {
$('#container').toggleClass(currentSize)
currentSize = size
$('#container').toggleClass(currentSize)
}
</script>
</body>
</html>
Producción:
Ejemplo 2: En el siguiente ejemplo, tenemos el tipo de caja pillarbox.
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@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">
<center>
<h1 style="color: green;">
GeeksforGeeks
</h1>
<strong>Blaze UI Boxing</strong>
<br />
<strong>Pillar Boxing</strong>
<br />
<button onclick="changeSize('u-pillar-box-none')">
None
</button>
<button onclick="changeSize('u-pillar-box-tiny')">
Tiny
</button>
<button onclick="changeSize('u-pillar-box-xsmall')">
XSmall
</button>
<button onclick="changeSize('u-pillar-box-small')">
Small
</button>
<button onclick="changeSize('u-pillar-box-medium')">
Medium
</button>
<button onclick="changeSize('u-pillar-box-large')">
Large
</button>
<button onclick="changeSize('u-pillar-box-xlarge')">
XLarge
</button>
<button onclick="changeSize('u-pillar-box-super')">
Super
</button>
</center>
<br />
<center class="u-display-flex">
<div id="container"
style="background-color: lightgreen;
margin-right: auto;
margin-left: auto;"
class="u-pillar-box-none">
Data Structures
</div>
</center>
</div>
<script>
let currentSize = 'u-pillar-box-none'
function changeSize(size) {
$('#container').toggleClass(currentSize)
currentSize = size
$('#container').toggleClass(currentSize)
}
</script>
</body>
</html>
Producción:
Ejemplo 3: En el siguiente ejemplo, tenemos el tipo de caja de ventana.
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@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">
<center>
<h1 style="color: green;">
GeeksforGeeks
</h1>
<strong>Blaze UI Boxing</strong>
<br />
<strong>Window Boxing</strong>
<br />
<button onclick="changeSize('u-window-box-none')">
None</button>
<button onclick="changeSize('u-window-box-tiny')">
Tiny</button>
<button onclick="changeSize('u-window-box-xsmall')">
XSmall</button>
<button onclick="changeSize('u-window-box-small')">
Small</button>
<button onclick="changeSize('u-window-box-medium')">
Medium</button>
<button onclick="changeSize('u-window-box-large')">
Large</button>
<button onclick="changeSize('u-window-box-xlarge')">
XLarge</button>
<button onclick="changeSize('u-window-box-super')">
Super</button>
</center>
<br />
<center class="u-display-flex">
<div id="container"
style="background-color: lightgreen;
margin-right: auto;
margin-left: auto;"
class="u-window-box-none">
Data Structures
</div>
</center>
</div>
<script>
let currentSize = 'u-window-box-none'
function changeSize(size) {
$('#container').toggleClass(currentSize)
currentSize = size
$('#container').toggleClass(currentSize)
}
</script>
</body>
</html>
Producción:
Referencia: https://www.blazeui.com/utils/boxing/
Publicación traducida automáticamente
Artículo escrito por manavsarkar07 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA