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 Grids son los objetos con diferentes tamaños y relleno y mucha personalización que permite la creación de un contenedor receptivo versátil para el sitio web. La cuadrícula de Blaze facilita el canalón que rodea cada celda de la cuadrícula además de tener algo de relleno a cada lado. Podemos encenderlo y apagarlo según nuestra elección.
Blaze UI Grid Gutters Clases:
- o-grid–no-gutter: esta clase se puede usar para desactivar todos los canalones para las celdas contenedoras específicas.
- o-grid__cell–no-gutter : esta clase se puede usar para desactivar el canal para una sola celda o para una específica.
Sintaxis :
<div class="o-grid">
<div class="o-grid__cell">
<div class="o-grid-text">One</div>
</div>
<div class="o-grid__cell o-grid__cell--no-gutter">
<div class="o-grid-text">Two</div>
</div>
</div>
Ejemplo 1: En el siguiente ejemplo, la primera cuadrícula tiene un canalón mientras que la segunda cuadrícula no tiene canalón.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport"
content="width=device-width,
initial-scale=1.0" />
<title>GeeksforGeeks | BlazeUI</title>
<style>
.gfg {
border-width: 4px;
border-style: solid;
}
.gfg div {
border-width: 1px;
border-style: solid;
border-color: greenyellow;
}
</style>
<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 Grid Gutters</strong>
</center>
<div class="o-grid gfg">
<div class="o-grid__cell">
<div class="o-grid-text">One</div>
</div>
<div class="o-grid__cell">
<div class="o-grid-text">Two</div>
</div>
<div class="o-grid__cell">
<div class="o-grid-text">Three</div>
</div>
</div>
<br />
<div class="o-grid o-grid--no-gutter gfg">
<div class="o-grid__cell">
<div class="o-grid-text">One</div>
</div>
<div class="o-grid__cell">
<div class="o-grid-text">Two</div>
</div>
<div class="o-grid__cell">
<div class="o-grid-text">Three</div>
</div>
</div>
</div>
</body>
</html>
Producción
Ejemplo 2: En el siguiente ejemplo, podemos alternar las canaletas del contenedor con un botón de alternancia.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport"
content="width=device-width,
initial-scale=1.0" />
<title>GeeksforGeeks | BlazeUI</title>
<style>
#gfg {
border-width: 4px;
border-style: solid;
}
#gfg div {
border-width: 1px;
border-style: solid;
border-color: greenyellow;
}
</style>
<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 Grid Gutters</strong>
</center>
<div class="o-grid" id="gfg">
<div class="o-grid__cell">
<div class="o-grid-text">One</div>
</div>
<div class="o-grid__cell">
<div class="o-grid-text">Two</div>
</div>
<div class="o-grid__cell">
<div class="o-grid-text">Three</div>
</div>
</div>
<br />
<button class="c-button c-button--brand"
onclick="toggleGutter()">
Toggle Gutter
</button>
</div>
<script>
function toggleGutter() {
$('#gfg').toggleClass('o-grid--no-gutter')
}
</script>
</body>
</html>
Producción
Referencia: https://www.blazeui.com/objects/grid
Publicación traducida automáticamente
Artículo escrito por RajeevSarkar y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA