web-dev-qa-db-ja.com

ionic 3つの入力フィールドの丸い角とアイコン

私はionic 3モバイルアプリで作業しており、左のアイコンと角が丸い入力フィールドのあるログインページを設計する必要がありました。しかし、ionicは、人々が入力要素の境界線を必要としないことを決定し、すべての入力スタイルに下線を付けました。

私はそれを達成するために非常に多くの方法を試しましたが、それをうまくやることができませんでした。 ionic onesの代わりにカスタム要素を使用すると、レイアウトを取得できますが、レスポンシブデザイン、特にキーボードでは、キーボードが表示されません。

誰かが私を助けてくれますか？私のマークアップです。

 <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
5
Vignesh

作成方法は次のとおりです。

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;
    }
  }

あなたはこのようなものを得ることができます：

Round and transparent inputs - image

おそらく、ion-itemの代わりにクラス名を直接使用する必要があります...

7
Petrus Cyrino

私は私のプロジェクトでそれを作りましたここにコードがあります、このコードはあなたのion-input丸められます。これがうまくいくことを願っています

 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;
 }
2
Mustafa Lokhandwala