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