Grupo de entrada de la interfaz de usuario de Blaze apilado

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

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *