Cuadrícula de interfaz de usuario de Blaze

Posted on by Rudeus Greyrat

Blaze UI es un conjunto de herramientas de interfaz de usuario de código abierto y sin marco que proporciona una estructura sólida para construir rápidamente sitios web con una base escalable y mantenible. Es de naturaleza receptiva ya que todos los componentes fueron diseñados para funcionar en cualquier tamaño de pantalla.

Blaze UI Grid es un componente necesario para cada sitio web, ya que alinea correctamente el espacio y mejora la interfaz de usuario. 

Blaze UI Grid Fixed Width es un componente proporcionado por el marco. Las celdas de una cuadrícula serán fluidas y receptivas en este componente. Nos permite dar a cada celda de la cuadrícula un ancho determinado.

Tipo de rejillas:

  • Cuadrícula básica: las clases de este tipo se utilizan para envolver los elementos en forma de cuadrícula.
  • Anchos: las clases de este tipo se utilizan para aplicar anchos a las celdas.
  • Compensaciones: las clases de este tipo se utilizan para empujar las celdas horizontalmente a lo largo de una cuadrícula.
  • Envoltura: las clases de este tipo se utilizan para envolver los elementos en una línea o se pueden envolver en varias líneas.
  • Anidamiento: las clases de este tipo se utilizan para anidar dos o más celdas en las cuadrículas.
  • Alineación vertical: si una de sus celdas tiene más altura que la habitual, entonces puede usar esta clase para ese caso.
  • Capacidad de respuesta: el uso de las clases en esta categoría maximiza el espacio de la pantalla y ofrece experiencias de usuario sobresalientes en una variedad de dispositivos, la cuadrícula puede cubrir todo el ancho en puntos de interrupción específicos.
  • Sufijos receptivos: las celdas individuales pueden cambiar el ancho en puntos de interrupción específicos mediante el uso de clases de este tipo.
  • Canalones: la cuadrícula de Blaze incluye un canalón que rodea cada celda de la cuadrícula, así como relleno en ambos lados. Es posible que desee que sus células estén niveladas entre sí a veces. Puede utilizar las clases de este tipo para eliminar el efecto de medianera.
  • Anchos fijos: las celdas de cuadrícula suelen ser fluidas y receptivas. Si desea que una celda tenga un ancho fijo, use las clases de este tipo para proporcionar un ancho fijo.

Ejemplo 1: el siguiente código muestra una cuadrícula básica que se utiliza como una cuadrícula normal.

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> Blaze UI Fixed Widths</title>
    <link rel="stylesheet" href=
"https://unpkg.com/@blaze/css@x.x.x/dist/blaze/blaze.css">
</head>
  
<body>
    <h1 style="color:green">
        GeeksforGeeks
        <div class="c-heading__sub">
            Blaze UI Grids
        </div>
    </h1>
    <br>
  
    <div class="o-grid o-grid--demo">
        <div class="o-grid__cell" 
            style="border:solid black;">
            <div class="o-grid-text">first</div>
        </div>
        <div class="o-grid__cell" 
            style="border:solid black;">
            <div class="o-grid-text">second</div>
        </div>
        <div class="o-grid__cell" 
            style="border:solid black;">
            <div class="o-grid-text">third</div>
        </div>
    </div>
</body>
  
</html>

Producción:

 

Ejemplo 2: El siguiente código demuestra la clase o-grid__cell–width-50 que se usa para agregar ancho a las celdas.

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> Blaze UI Fixed Widths</title>
    <link rel="stylesheet" href=
"https://unpkg.com/@blaze/css@x.x.x/dist/blaze/blaze.css">
</head>
  
<body>
    <h1 style="color:green">
        GeeksforGeeks
        <div class="c-heading__sub">
            Blaze UI Grids
        </div>
    </h1>
    <br>
  
    <div class="o-grid o-grid--demo" 
         style="border: solid black;">
        <div class="o-grid__cell o-grid__cell--width-50">
            <div class="o-grid-text">first</div>
        </div>
        <div class="o-grid__cell">
            <div class="o-grid-text">second</div>
        </div>
        <div class="o-grid__cell">
            <div class="o-grid-text">third</div>
        </div>
    </div>
</body>
  
</html>

Producción:

 

Ejemplo 3: El siguiente código demuestra la clase o-grid__cell–full que se usa para agregar la longitud total de todas las celdas.

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> Blaze UI Fixed Widths</title>
    <link rel="stylesheet" href=
"https://unpkg.com/@blaze/css@x.x.x/dist/blaze/blaze.css">
</head>
  
<body>
    <h1 style="color:green">
        GeeksforGeeks
        <div class="c-heading__sub">
            Blaze UI Grids
        </div>
    </h1>
    <br>
  
    <div class="o-grid o-grid--full o-grid--demo">
        <div class="o-grid__cell" style="border:solid black;">
          <div class="o-grid-text">first</div>
        </div>
        <div class="o-grid__cell" style="border:solid black;">
          <div class="o-grid-text">second</div>
        </div>
        <div class="o-grid__cell" style="border:solid black;">
          <div class="o-grid-text">third</div>
        </div>
    </div>
</body>
</html>

Producción:

 

Ejemplo 4: El siguiente código demuestra la clase o-grid__cell–offset-60 que se usa para empujar una celda a lo largo de la cuadrícula horizontalmente.

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> Blaze UI Fixed Widths</title>
    <link rel="stylesheet" href=
"https://unpkg.com/@blaze/css@x.x.x/dist/blaze/blaze.css">
</head>
  
<body>
    <h1 style="color:green">
        GeeksforGeeks
        <div class="c-heading__sub">
            Blaze UI Grids
        </div>
    </h1>
    <br>
    <div class="o-grid o-grid--demo">
        <div class="o-grid__cell o-grid__cell--width-20" 
              style="border:solid black;">
            <div class="o-grid-text">first</div>
        </div>
        <div class="o-grid__cell o-grid__cell--width-20 
             o-grid__cell--offset-60" 
             style="border: solid black;">
            <div class="o-grid-text">second</div>
        </div>
    </div>
</body>
</html>

Producción:

 

Ejemplo 5: este código demuestra la cuadrícula de anidamiento que se puede usar para realizar el anidamiento entre dos celdas.

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> Blaze UI Fixed Widths</title>
    <link rel="stylesheet" href=
"https://unpkg.com/@blaze/css@x.x.x/dist/blaze/blaze.css">
</head>
  
<body>
    <h1 style="color:green">
        GeeksforGeeks
        <div class="c-heading__sub">
            Blaze UI Grids
        </div>
    </h1>
    <br>
    <div class="o-grid o-grid--demo">
        <div class="o-grid__cell">
            <div class="o-grid" style="border: solid black;">
                <div class="o-grid__cell" style="border:solid black;">
                  <div class="o-grid-text">first</div>
                </div>
                <div class="o-grid__cell" style="border:solid black;">
                  <div class="o-grid-text">second</div>
                </div>
            </div>
            <div class="o-grid" style="border: solid black;">
                <div class="o-grid__cell" style="border:solid black;">
                  <div class="o-grid-text">third</div>
                </div>
                <div class="o-grid__cell" style="border:solid black;">
                  <div class="o-grid-text">fourth</div>
                </div>
            </div>
        </div>
        <div class="o-grid__cell" style="border:solid black;">
            <div class="o-grid-text">fifth</div>
        </div>
    </div>
</body>
</html>

Producción:             

 

Referencia: https://www.blazeui.com/objects/grid/

Publicación traducida automáticamente

Artículo escrito por nitinpatelco20b540 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *