web-dev-qa-db-fra.com

champ de saisie ionique 3, coin arrondi et icône

Je travaille sur une application mobile ionic 3 dans laquelle je devais concevoir une page de connexion avec des champs de saisie comportant une icône à gauche et des coins arrondis. Mais quelqu'un dans ionic a décidé que les gens n’avaient plus besoin de frontières pour les éléments d’entrée et ils ont créé tous les styles d’entrée soulignés. 

J'ai essayé de nombreuses façons de le faire mais je n'ai pas réussi. Si j'utilise des éléments personnalisés au lieu d'éléments ioniques, je peux obtenir la mise en page, mais cela perturbe le design réactif et, en particulier avec le clavier, les claviers ne s'affichent pas. 

Quelqu'un peut-il m'aider à ce sujet? est mon balisage.

 <ion-content padding>
      <div text-center class="logo-container">
      <img class="login-logo" src="./assets/imgs/clean_connect.png" alt="Logo of clean connect">
        <h4>Sign in to your account</h4>
      </div>
      <form [formGroup]="signInForm" (submit) = "login(signInForm.value)" novalidate>
        <ion-list>  

          <ion-item>
            <ion-label><ion-icon name="ios-person-outline" item-left></ion-icon></ion-label>
            <ion-input type="text" value="agira" placeholder="Username" formControlName="username"></ion-input>
          </ion-item>
          <ion-item no-lines  *ngIf="!signInForm.controls.username.valid && (signInForm.controls.username.dirty)">
          <div>
            Please enter valid Username
          </div>
          </ion-item>
          <ion-item>
            <ion-label><ion-icon name="ios-lock-outline" item-left></ion-icon></ion-label>
            <ion-input type="password" value="Agira1" placeholder="Password" formControlName="password"></ion-input>
          </ion-item>
          <ion-item no-lines *ngIf="!signInForm.controls.password.valid && (signInForm.controls.password.dirty)">
          <div>
            Please enter Password
          </div>
          </ion-item>
        </ion-list>
        <button class="sign-in" type="submit" ion-button full favourite [disabled]="!signInForm.valid">Sign In</button>
      </form>
    </ion-content>
cordovaionic-frameworkionic3hybrid-mobile-app
4
Vignesh

Voici comment je l'ai fait:

ion-item:first-child {
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
  }
  ion-item:last-child {
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
  }
  ion-item.item {
    background-color: rgba(255, 255, 255, 0.4);
    margin-bottom: 1px;
    .label {
      width: 10%;
      color: rgba(0, 0, 0, 0.6);
      font-size: 1.2em;
    }
  }

Vous pouvez obtenir quelque chose comme ça:

 Round and transparent inputs - image

Vous devrez probablement utiliser les noms de classe au lieu de ion-item directement ...

5
Petrus Cyrino

je le fais dans mon projet voici le code, ce code rend votre ion-input arrondi. J'espère que cela fonctionne pour vous

 ion-item {
     border-radius: 30px !important;
     padding-left: 30px !important;
     font-size: 0.9em;
     margin-bottom: 10px;
     border: 1px solid #ffffff;
     border-bottom: 0px !important;
     box-shadow: none !important;
 }
1
Mustafa Lokhandwala