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