es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

Espaciado de los componentes secundarios en Bulma y React

Estoy luchando para obtener el relleno correcto de algunos campos de formulario usando React y Bulma. Quiero construir un componente de campo de contraseña en React donde el renderizado se vea así:

<div classname="field">
  <div classname="field has-addons">
    <p classname="control has-icons-left is-expanded">
      <input classname="input" type="{passwordFieldType}" placeholder="Contraseña" value="{props.value}" required="{true}" onchange="{e" ==""> props.update(e.target.value)}
      />
      <span classname="icon is-small is-left">
        <fontawesomeicon icon="{faLock}"></fontawesomeicon>
      </span>
    </p>
    <p classname="control">
      <a classname="button" onclick="{()" ==""> setPasswordVisible(!passwordVisible)}>
        <span classname="icon is-small is-right">
          <fontawesomeicon icon="{passwordVisibleIcon}"></fontawesomeicon>
        </span>
      </a>
    </p>
  </div>
  {props.children}
</div>

He agregado una barra de progreso que indica la fortaleza de la contraseña como componente hijo:

<passwordfield value="{password}" update="{props.update}">
  <progress classname="{`progress" is-small="" ${passwordindicatorcolor}`}="" max="{MAX_PASSWORD_SCORE}" value="{passwordScore}"></progress>
  {props.children}
</passwordfield>

Luego, el componente se utiliza junto con un campo de correo electrónico y un contenedor para crear la vista de registro:

<a href="https://i.stack.imgur.com/kVOtn.png">
  <img src="https://i.stack.imgur.com/kVOtn.png" alt="Formulario actual">
</a>

Esto está cerca de lo que quiero, el único problema es que la barra de progreso está demasiado lejos del campo de contraseña. He intentado cambiar el margen superior de la barra de progreso a 0, como se describe aquí: https://bulma.io/documentation/helpers/spacing-helpers/, pero no hizo nada.

Aquí hay un boceto de lo que busco:

<a href="https://i.stack.imgur.com/wNyuN.png">
  <img src="https://i.stack.imgur.com/wNyuN.png" alt="Formulario deseado">
</a>

¿Cómo puedo acercar el campo de contraseña y la barra de progreso?

Tags:  , ,

Answer

  1. Avatar for davy.ai

    Para acercar el campo de contraseña y la barra de progreso, puedes ajustar el margen entre los dos elementos. Puedes hacer esto agregando una clase personalizada a la barra de progreso y estableciendo la propiedad margin-top en tu archivo CSS.

    Primero, agrega una clase personalizada al elemento de la barra de progreso:

    <progress classname="{`progress" is-small="" ${colorindicadorcontraseña}="" clase-personalizada`}="" max="{MAX_PUNTUACIÓN_CONTRASEÑA}" value="{puntuaciónContraseña}"></progress>
    

    A continuación, en tu archivo CSS, agrega una regla para la clase personalizada y establece la propiedad margin-top con el valor que necesites:

    .clase-personalizada {
      margin-top: 5px; /* ajusta según sea necesario */
    }
    

    Esto debería acercar el campo de contraseña y la barra de progreso. Puedes ajustar el valor de margin-top para afinar el espaciado entre los dos elementos.

Comments are closed.