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.
El elemento de grupo de entrada de la interfaz de usuario de Blaze muestra muchos campos de entrada en forma de grupo utilizando las clases de la interfaz de usuario de Blaze. En este artículo, discutiremos las diversas clases requeridas para mostrar el ancho fijo para los elementos del grupo de entrada. El campo de entrada de ancho fijo se muestra usando la clase de interfaz de usuario de Blaze sin alterar el diseño de todo el grupo de entrada.
Clases de ancho fijo del grupo de entrada de Blaze UI:
- .c-input-group: esta clase se utiliza para establecer el grupo de entrada.
- .c-field: esta clase se utiliza para establecer el campo de entrada.
- .o-field: esta clase se utiliza para establecer un campo en el grupo de entrada.
- .o-field–fixed: esta clase se utiliza para establecer el ancho fijo del campo sin romper el diseño del grupo.
Sintaxis:
<div class="c-input-group">
<div class="o-field o-field--fixed" style="...">
<input class="c-field" placeholder="...">
</div>
....
</div>
Ejemplo 1: El siguiente código demuestra el ancho fijo del grupo de entrada usando las clases c-input-group , o-field-fixed , o-field y c-field .
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<title>Blaze UI</title>
<meta charset="utf-8">
<meta name="viewport" content=
"width=device-width, initial-scale=1">
<link rel="stylesheet" href=
"https://unpkg.com/@blaze/css@x.x.x/dist/blaze/blaze.css">
<style>
body {
margin-left: 10px;
margin-right: 10px;
}
</style>
</head>
<body>
<center>
<h1 style="color:green">GeeksforGeeks</h1>
<strong>Input group fixed width</strong>
</br></br>
<div class="c-input-group">
<div class="o-field">
<input class="c-field"
placeholder=".c-input-group">
</div>
<div class="o-field o-field--fixed"
style="width:500px">
<input class="c-field"
placeholder="Fixed 500px input width">
</div>
<div class="o-field o-field--fixed"
style="width:180px">
<input class="c-field"
placeholder="Fixed 180 px input width">
</div>
<div class="o-field">
<input class="c-field"
placeholder=".c-input-group">
</div>
</div>
</center>
</body>
</html>
Producción:
Ejemplo 2: El siguiente código demuestra el ancho fijo del grupo de entrada usando las clases c-input-group, o-field-fixed, o-field y c-field . El campo medio se fija como se muestra en la salida.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<title>Blaze UI</title>
<meta charset="utf-8">
<meta name="viewport" content=
"width=device-width, initial-scale=1">
<link rel="stylesheet" href=
"https://unpkg.com/@blaze/css@x.x.x/dist/blaze/blaze.css">
<style>
body {
margin-left: 10px;
margin-right: 10px;
}
</style>
</head>
<body>
<center>
<h1 style="color:green">GeeksforGeeks</h1>
<strong>Input group </strong>
</br></br>
<div class="c-input-group">
<div class="o-field">
<input class="c-field"
placeholder=".c-input-group">
</div>
<div class="o-field o-field--fixed"
style="width:60%">
<input class="c-field"
placeholder="FIXED 60% input width">
</div>
<div class="o-field">
<input class="c-field"
placeholder=".c-input-group">
</div>
</div>
</center>
</body>
</html>
Producción:
Enlace de referencia: https://www.blazeui.com/components/inputs
Publicación traducida automáticamente
Artículo escrito por geetanjali16 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA