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:
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:
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