Blaze UI es un kit de herramientas de interfaz de usuario ligero de código abierto de CSS 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.
Blaze UI Window Boxes se usa para crear celdas con relleno igual en todas las direcciones. Las celdas son simétricas a la izquierda, a la derecha y de arriba a abajo y parecen ventanas cuadradas. Podemos usarlos para mostrar elementos en una cuadrícula o flexionarlos en una cuadrícula o en línea.
Blaze UI Window Boxes Classes: Las siguientes son las diferentes clases según su relleno en orden descendente:
- u-window-box-super: Tiene el acolchado más grande.
- u-window-box-xlarge: tiene menos relleno que super.
- u-window-box-large: Dispone de gran acolchado.
- u-window-box-medium: Tiene acolchado medio.
- u-window-box-small: Tiene un acolchado más pequeño que el mediano.
- u-window-box-xsmall: Tiene mayor relleno que tiny.
- u-window-box-tiny: Tiene muy menos relleno.
- u-window-box-none: No tiene relleno.
Sintaxis: aplique las clases a cualquier elemento como contenedor de la siguiente manera:
<div class="u-window-box-super">...</div>
Ejemplo 1: en el siguiente ejemplo, tenemos tres elementos con un relleno de cuadro de ventana aplicado con jQuery y luego los modificamos con los botones provistos.
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>
<center>
<h1 style="color:green">GeeksforGeeks</h1>
<strong>Blaze UI window Boxes</strong>
</center>
<div style="border-width:1px;
border-color:black; border-style:solid;">
<div style="display:flex;">
<div class="item" style="border-width:1px;
border-color:green; border-style:solid;">
Car
</div>
<div class="item" style="border-width:1px;
border-color:green; border-style:solid;">
Chair
</div>
<div class="item" style="border-width:1px;
border-color:green; border-style:solid;">
Ludo
</div>
</div>
</div>
<center style="padding:4px;">
<button class="c-button c-button--success
u-small" onclick="toggleStyle(0)">
Super
</button>
<button class="c-button c-button--success
u-small" onclick="toggleStyle(1)">
Xlarge
</button>
<button class="c-button c-button--success
u-small" onclick="toggleStyle(2)">
Large
</button>
<button class="c-button c-button--success
u-small" onclick="toggleStyle(3)">
Medium
</button>
<button class="c-button c-button--success
u-small" onclick="toggleStyle(4)">
Small
</button>
<button class="c-button c-button--success
u-small" onclick="toggleStyle(5)">
Xsmall
</button>
<button class="c-button c-button--success
u-small" onclick="toggleStyle(6)">
Tiny
</button>
<button class="c-button c-button--success
u-small" onclick="toggleStyle(7)">
None
</button>
</center>
<script>
const windowStyles = [
'u-window-box-super',
'u-window-box-xlarge',
'u-window-box-large',
'u-window-box-medium',
'u-window-box-small',
'u-window-box-xsmall',
'u-window-box-tiny',
'u-window-box-none',
]
let current = windowStyles[0]
$('.item').addClass(current)
function toggleStyle(index) {
$('.item').removeClass(current)
current = windowStyles[index]
$('.item').addClass(current)
}
</script>
</body>
</html>
Producción:
Ejemplo 2: Tenemos cajas de súper ventana con algunos detalles relacionados con la programació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>
<style>
.card {
background-color: lightgreen;
margin: 8px;
border-radius: 4px;
}
.card h3 {
color: rgb(12, 58, 22);
}
</style>
</head>
<body>
<center>
<h1 style="color:green">GeeksforGeeks</h1>
<strong>Blaze UI Window Boxes</strong>
</center>
<center class="u-display-flex">
<div class="u-window-box-super card">
<h3>Data Structures</h3>
<p>
A data structure is a particular way
of organizing data in a computer
so that it can be used effectively.
</p>
</div>
<div class="u-window-box-super card">
<h3>Algorithms</h3>
<p>
an algorithm is a finite sequence
of well-defined instructions,
typically used to solve a class of
specific problems or to perform a
computation.
</p>
</div>
<div class="u-window-box-super card">
<h3>Machine Learning</h3>
<p>
Machine Learning is the field of
study that gives computers the
capability to learn without being
explicitly programmed.
</p>
</div>
</center>
<center style="padding:4px;">
<button class="c-button c-button--success
u-small" onclick="toggleStyle(0)">
Super
</button>
<button class="c-button c-button--success
u-small" onclick="toggleStyle(1)">
Xlarge
</button>
<button class="c-button c-button--success
u-small" onclick="toggleStyle(2)">
Large
</button>
<button class="c-button c-button--success
u-small" onclick="toggleStyle(3)">
Medium
</button>
<button class="c-button c-button--success
u-small" onclick="toggleStyle(4)">
Small
</button>
<button class="c-button c-button--success
u-small" onclick="toggleStyle(5)">
Xsmall
</button>
<button class="c-button c-button--success
u-small" onclick="toggleStyle(6)">
Tiny
</button>
<button class="c-button c-button--success
u-small" onclick="toggleStyle(7)">
None
</button>
</center>
<script>
const windowStyles = [
'u-window-box-super',
'u-window-box-xlarge',
'u-window-box-large',
'u-window-box-medium',
'u-window-box-small',
'u-window-box-xsmall',
'u-window-box-tiny',
'u-window-box-none',
]
let current = windowStyles[0]
$('.card').addClass(current)
function toggleStyle(index) {
$('.card').removeClass(current)
current = windowStyles[index]
$('.card').addClass(current)
}
</script>
</body>
</html>
Producción:
Referencia: https://www.blazeui.com/utils/boxing/
Publicación traducida automáticamente
Artículo escrito por RajeevSarkar y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA