Tamaños de la interfaz de usuario de Blaze

Blaze UI es un kit de herramientas de interfaz de usuario de código abierto gratuito que proporciona una excelente estructura para crear sitios web rápidamente con una base escalable y fácil de mantener. Todos los componentes de la interfaz de usuario de Blaze se desarrollan primero para dispositivos móviles y se basan únicamente en las funciones nativas del navegador, no en una biblioteca o marco por separado. Nos ayuda a crear un sitio web escalable y receptivo de manera rápida y eficiente con un estilo consistente.

En este artículo, veremos los tamaños de la interfaz de usuario de Blaze . Blaze UI proporciona seis clases de utilidad para controlar el tamaño de un elemento que se enumeran a continuación.

Clases de tamaños de interfaz de usuario de Blaze:

  • u-xsmall: esta clase se usa para hacer que el tamaño del elemento sea extrapequeño.
  • u-small: esta clase se utiliza para hacer que el tamaño del elemento sea pequeño.
  • u-medium: Esta clase se usa para hacer que el tamaño del elemento sea mediano.
  • u-large: esta clase se usa para hacer que el tamaño del elemento sea grande.
  • u-xlarge: esta clase se usa para hacer que el tamaño del elemento sea extra grande.
  • u-super: esta clase se utiliza para hacer que el tamaño del elemento sea super, que es más grande que extra grande.

Sintaxis:

<div class="u-medium"> ... </div>

Ejemplo 1: este ejemplo ilustra el uso de las seis clases de utilidad de tamaño anteriores proporcionadas por Blaze UI en el elemento de botó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">
    <title> Blaze UI - Sizes </title>
    <link rel="stylesheet" href=
"https://unpkg.com/@blaze/css@10.0.4/dist/blaze/blaze.css">
  
    <style>
        body {
            font-family: sans-serif;
            text-align: center;
        }
        .wrapper{
            display: flex;
            flex-direction: column;
            align-items: center;
        }
        /* Bottom margin to separate the buttons */
        .wrapper>button{
            margin-bottom: 10px;
        }
    </style>
</head>
  
<body>
    <h2 style="color: green;"> GeeksforGeeks </h2>
    <h3> Blaze UI - Sizes </h3>
  
    <div class="u-window-box-large wrapper">
        <button type="button" class="c-button u-xsmall">
            Extra Small Button
        </button>
        <button type="button" class="c-button u-small">
            Small Button
        </button>
        <button type="button" class="c-button u-medium">
            Medium Button
        </button>
        <button type="button" class="c-button u-large">
            Large Button
        </button>
        <button type="button" class="c-button u-xlarge">
            Extra Large Button
        </button>
        <button type="button" class="c-button u-super">
            Super Sized Button
        </button>
    </div>
</body>
  
</html>

Producción:

Tamaños de la interfaz de usuario de Blaze

Nota: Las clases de utilidad de tamaño no tienen efecto en el elemento de imagen. 

Ejemplo 2: Este ejemplo muestra el uso de clases de utilidad de tamaño con las imágenes.

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 - Sizes </title>
    <link rel="stylesheet" href=
"https://unpkg.com/@blaze/css@10.0.4/dist/blaze/blaze.css">
  
    <style>
        body {
            font-family: sans-serif;
            text-align: center;
        }
        .wrapper{
            display: flex;
            flex-direction: column;
            align-items: center;
        }
        /* Bottom margin to separate the images */
        .wrapper>img{
            margin-bottom: 20px;
        }
    </style>
</head>
  
<body>
    <h2 style="color: green;"> GeeksforGeeks </h2>
    <h3> Blaze UI - Sizes </h3>
      
    <div class="u-window-box-large wrapper">
        <img class="u-small" src=
"https://media.geeksforgeeks.org/wp-content/uploads/20220408213837/gfg200x200min.png" 
             alt="gfg_logo"
        />
  
        <img class="u-large" src=
"https://media.geeksforgeeks.org/wp-content/uploads/20220408213837/gfg200x200min.png" 
             alt="gfg_logo"
        />
    </div>
</body>
  
</html>

Producción:

Tamaños de la interfaz de usuario de Blaze

Referencia: https://www.blazeui.com/utils/sizes

Publicación traducida automáticamente

Artículo escrito por prakhara306 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 *