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 mantenible. 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.
Los tamaños de entrada de la interfaz de usuario de Blaze se utilizan para crear los campos de entrada con diferentes tamaños mediante las clases de tamaño de la interfaz de usuario de Blaze. Podemos crear el campo de entrada de tamaño extra pequeño a tamaño súper grande según nuestra necesidad.
Clases de tamaños de entrada de Blaze UI:
- u-xsmall: esta clase se utiliza para crear el campo de entrada de tamaño extrapequeño.
- u-pequeño: esta clase se utiliza para crear el campo de entrada de tamaño pequeño.
- u-medium: esta clase se utiliza para crear el campo de entrada de tamaño mediano.
- u-grande: esta clase se utiliza para crear el campo de entrada de gran tamaño.
- u-xlarge: esta clase se usa para crear el campo de entrada de tamaño extra grande.
- u-super: esta clase se utiliza para crear un campo de entrada de tamaño súper grande.
Sintaxis:
<input class="c-field Input-Sizes-Class"
placeholder="..." type="text">
Ejemplo 1: el siguiente código muestra los tamaños de entrada de la interfaz de usuario de Blaze con las clases u-xsmall, u-small y u-medium .
HTML
<!DOCTYPE html> <html lang="en"> <head> <title> Blaze UI Input Sizes </title> <link rel="stylesheet" href= "https://unpkg.com/@blaze/css@x.x.x/dist/blaze/blaze.css" /> </head> <body class="u-window-box-large"> <div class="u-centered "> <h1 style="color: green;"> GeeksforGeeks </h1> <h3> Blaze UI Input Sizes </h3> <input class="c-field u-xsmall" placeholder="GFG Extra small size" type="text" > <br> <input class="c-field u-small" placeholder="GFG small size" type="text" > <br> <input class="c-field u-medium" placeholder="GFG Medium size" type="text" > </div> </body> </html>
Producción:
Tamaños de entrada de la interfaz de usuario de Blaze
Ejemplo 2: el siguiente código muestra los tamaños de entrada de la interfaz de usuario de Blaze mediante las clases u-large, u-xlarge y u-super .
HTML
<!DOCTYPE html> <html lang="en"> <head> <title> Blaze UI Input Sizes </title> <link rel="stylesheet" href= "https://unpkg.com/@blaze/css@x.x.x/dist/blaze/blaze.css" /> </head> <body class="u-window-box-large"> <div class="u-centered "> <h1 style="color: green;"> GeeksforGeeks </h1> <h3> Blaze UI Input Sizes </h3> <input class="c-field u-large" placeholder="GFG Large size" type="text" > <br> <input class="c-field u-xlarge" placeholder="GFG Extra Large size" type="text" > <br> <input class="c-field u-super" placeholder="GFG Super size" type="text" > </div> </body> </html>
Producción:
Tamaños de entrada de la interfaz de usuario de Blaze
Referencia: https://www.blazeui.com/components/inputs/
Publicación traducida automáticamente
Artículo escrito por gopaldhangar y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA