Complementos de formulario de Bulma

Posted on by Rudeus Greyrat

En este artículo, veremos complementos de formulario de Bulma. Bulma Form proporciona los controles de complementos que se pueden usar junto con el contenedor de campo. Bulma solo proporciona 3 complementos para agregar, es decir, entradas, botones y menú desplegable con el contenedor de campo de formulario. A continuación se muestran las clases utilizadas para adjuntar complementos de formulario.

Clase de complementos de Bulma Form:

  • has-addons: esta clase se usa para agregar controles adjuntos o complementos en un campo de formulario.
  • is-static: esta clase se usa para hacer un botón de naturaleza estática.
  • is-expanded: esta clase se usa para llenar un campo de entrada en todo el ancho de un campo de formulario.
  • is-fullwidth: esta clase se usa para llenar un campo desplegable en todo el ancho de un campo de formulario.
  • has-addons-centered: esta clase se usa para alinear los complementos en el centro.
  • has-addons-right: esta clase se usa para alinear los complementos a la derecha.

Sintaxis:

Complementos simples

<div class="field has-addons">
    <div class="control">
        <input class="input" type="text" 
            placeholder="Enter your details">
    </div>
    <div class="control">
        <a class="button is-primary">

            Search
        </a>
    </div>
</div>

Campo de entrada o menú desplegable de ancho completo

<div class="field has-addons">
    <div class="control">
    ....
    </div>
    <div class="control is-expanded">
        <input class="input " type="text">
    </div>
</div>

Menú desplegable de ancho completo

<div class="field has-addons">
    <div class="control">
    ....
    </div>
    <div class="control is-expanded">
        <div class="select is-fullwidth">
             <select>
               <option>java</option>
               ....
             </select>
         </div>
    </div>
</div>

Ejemplo: El siguiente ejemplo muestra todas las clases de complementos.

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>GFG</title>
  <link rel="stylesheet"
        href=
"https://cdn.jsdelivr.net/npm/bulma@0.9.3/css/bulma.min.css" />
</head>
 
<body>
  <div class="container content has-text-centered">
    <h1 class="title has-text-success">GeeksforGeeks</h1>
    <h1 class="subtitle">Bulma form addons</h1>
 
    <!-- Simple addons -->
    <div class="field has-addons">
      <label for="addons" class="subtitle p-2">
        Button with Input addon
      </label>
      <div class="control">
        <input class="input" type="text"
               placeholder="Search here">
      </div>
      <div class="control">
        <a class="button is-primary">
          Find
        </a>
      </div>
    </div>
 
    <!-- Combining Dropdown, Button, Input addons-->
    <div class="field has-addons">
      <label for="addons" class="subtitle p-2">
        Dropdown, Button, Input addon
      </label>
      <div class="control">
        <span class="select">
          <select>
            <option>java</option>
            <option>C++</option>
            <option>Python</option>
          </select>
        </span>
      </div>
      <div class="control">
        <input class="input" type="text"
               placeholder="Enter your choice">
      </div>
      <div class="control">
        <a class="button is-info">
          Add
        </a>
      </div>
    </div>
 
    <!-- addons with static button -->
    <div class="field has-addons">
      <label for="addons" class="subtitle p-2">
        Static Button with Input addon
      </label>
      <p class="control">
        <input class="input" type="text"
               placeholder="Enter your college">
      </p>
 
 
      <p class="control">
        <a class="button is-static">
          CS Only
        </a>
      </p>
 
 
    </div>
 
    <!-- Full width Input field with addons -->
    <div class="field has-addons">
      <label for="addons" class="subtitle p-2">
        Full width Input addon
      </label>
      <div class="control">
        <span class="select">
          <select>
            <option>java</option>
            <option>C++</option>
            <option>Python</option>
          </select>
        </span>
      </div>
      <div class="control is-expanded">
        <input class="input " type="text"
               placeholder="Enter your choice">
      </div>
      <div class="control">
        <a class="button is-info">
          Add
        </a>
      </div>
    </div>
 
    <!-- Full width dropdown addon -->
    <div class="field has-addons">
      <label for="addons" class="subtitle p-2">
        Full width dropdown addon
      </label>
      <div class="control is-expanded">
        <div class="select is-fullwidth">
          <select>
            <option>java</option>
            <option>C++</option>
            <option>Python</option>
          </select>
        </div>
      </div>
      <div class="control">
        <a class="button is-info">
          Add
        </a>
      </div>
    </div>
 
    <!-- Aligning addons -->
    <div class="field has-addons has-addons-centered">
      <label for="addons" class="subtitle p-2">
        Centered align addons
      </label>
      <div class="control">
        <span class="select">
          <select>
            <option>java</option>
            <option>C++</option>
            <option>Python</option>
          </select>
        </span>
      </div>
      <div class="control">
        <input class="input" type="text"
               placeholder="Enter your choice">
      </div>
      <div class="control">
        <a class="button is-info">
          Add
        </a>
      </div>
    </div>
 
    <div class="field has-addons">
      <label for="addons" class="subtitle p-2">
        Default align addons
      </label>
      <div class="control">
        <span class="select">
          <select>
            <option>java</option>
            <option>C++</option>
            <option>Python</option>
          </select>
        </span>
      </div>
      <div class="control">
        <input class="input" type="text"
               placeholder="Enter your choice">
      </div>
      <div class="control">
        <a class="button is-warning">
          Add
        </a>
      </div>
    </div>
 
    <div class="field has-addons has-addons-right">
      <label for="addons" class="subtitle p-2">
        Right align addons
      </label>
      <div class="control">
        <span class="select">
          <select>
            <option>java</option>
            <option>C++</option>
            <option>Python</option>
          </select>
        </span>
      </div>
      <div class="control">
        <input class="input" type="text"
               placeholder="Enter your choice">
      </div>
      <div class="control">
        <a class="button is-danger">
          Add
        </a>
      </div>
    </div>
  </div>
</body>
 
</html>

Producción:

Bulma Form addons

Complementos de Bulma Form

Referencia: https://bulma.io/documentation/form/general/#form-addons

Publicación traducida automáticamente

Artículo escrito por tarunsinghwap7 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 *