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 el grupo de entrada de Blaze UI Stacked . Para hacer que todos los elementos de entrada se apilen unos sobre otros , se usa la clase c-input-group–stacked en el contenedor del grupo de entrada.
Clases apiladas del grupo de entrada de Blaze UI:
- c-input-group–stacked: esta clase se usa en el contenedor del grupo de entrada para apilar todos los elementos de entrada uno encima del otro.
Sintaxis:
<div class="c-input-group c-input-group--stacked">
...
</div>
Ejemplo 1: El siguiente ejemplo muestra cómo usar c-input-group–stacked para apilar elementos de entrada.
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 - Input Group Stacked</title>
<link rel="stylesheet" href=
"https://unpkg.com/@blaze/css@10.0.4/dist/blaze/blaze.css">
<style>
body{
font-family: sans-serif;
}
</style>
</head>
<body>
<div class="u-centered">
<h2 style="color: green;">GeeksforGeeks</h2>
<h3>Input Group Stacked - Blaze UI</h3>
</div>
<div class="u-window-box-super">
<div class="c-input-group c-input-group--stacked">
<div class="o-field">
<input class="c-field" placeholder="Input on Top">
</div>
<div class="o-field">
<input class="c-field" placeholder="Input in Middle">
</div>
<div class="o-field">
<input class="c-field" placeholder="Input in Last">
</div>
</div>
</div>
</body>
</html>
Producción:
Ejemplo 2: Este ejemplo muestra diferentes elementos de entrada apilados unos sobre otros.
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 - Input Group Stacked</title>
<link rel="stylesheet" href=
"https://unpkg.com/@blaze/css@10.0.4/dist/blaze/blaze.css">
<style>
body{
font-family: sans-serif;
}
</style>
</head>
<body>
<div class="u-centered">
<h2 style="color: green;">GeeksforGeeks</h2>
<h3>Input Group Stacked - Blaze UI</h3>
</div>
<div class="u-window-box-super">
<div class="c-input-group c-input-group--stacked">
<div class="o-field">
<input class="c-field" placeholder="Text Input">
</div>
<div class="o-field">
<textarea class="c-field"
placeholder="Textarea Input"></textarea>
</div>
<div class="o-field">
<select class="c-field">
<option>Choose an option</option>
<option>Option 1</option>
<option>Option 2</option>
</select>
</div>
</div>
</div>
</body>
</html>
Producción:
Referencia: https://www.blazeui.com/components/inputs
Publicación traducida automáticamente
Artículo escrito por prakhara306 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA