Cajas de pilares de interfaz de usuario de Blaze

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 Pillar Boxes se usa para crear celdas con relleno igual en la dirección izquierda y derecha. Las celdas son simétricas a izquierda y derecha y parecen pilares. Podemos usarlos para mostrar elementos en una cuadrícula o flexionarlos en una cuadrícula o en línea.

Clases de Blaze UI Pillar Boxes: las siguientes son las diferentes clases según su relleno en orden descendente.

  • u-pillar-box-super: Tiene el acolchado más grande.
  • u-pillar-box-xlarge: tiene menos acolchado que el super.
  • u-pilar-caja-grande: Dispone de gran acolchado.
  • u-pillar-box-medium: Dispone de acolchado medio.
  • u-pillar-box-small: Tiene un acolchado más pequeño que el mediano.
  • u-pillar-box-xsmall: Tiene mayor acolchado que tiny.
  • u-pillar-box-tiny: Tiene muy menos acolchado.
  • u-pillar-box-none: No tiene acolchado.

Sintaxis: aplique las clases a cualquier elemento como contenedor de la siguiente manera:

<div class="u-pillar-box-super">....</div>

Ejemplo 1: en el siguiente ejemplo, tenemos tres elementos con un relleno de cuadro de pilar aplicado con jQuery y luego los modificamos con los botones proporcionados.

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 Pillar Boxes</strong>
    </center>
 
    <div class="u-pillar-box-super"></div>
    <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 pillarStyles = [
            'u-pillar-box-super',
            'u-pillar-box-xlarge',
            'u-pillar-box-large',
            'u-pillar-box-medium',
            'u-pillar-box-small',
            'u-pillar-box-xsmall',
            'u-pillar-box-tiny',
            'u-pillar-box-none',
        ]
        let current = pillarStyles[0]
        $('.item').addClass(current)
        function toggleStyle(index) {
            $('.item').removeClass(current)
            current = pillarStyles[index]
            $('.item').addClass(current)
        }
    </script>
</body>
 
</html>

Producción:          

 

Ejemplo 2: el siguiente código muestra los superpilares de Blaze UI con algunos detalles.

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 Pillar Boxes</strong>
    </center>
    <center class="u-display-flex">
        <div class="u-pillar-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-pillar-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-pillar-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>
</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

Deja una respuesta

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