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