我正在开发一个 ionic 3 移动应用程序,我必须在其中设计一个登录页面,其中的输入字段在左侧有一个图标并带有圆角。但是 ionic 中的某个人决定人们不再需要输入元素的边框,并且他们将所有输入样式都设置为下划线。
我尝试了很多方法来完成它,但我无法实现它。如果我使用自定义元素而不是 ionic 元素,我可以获得布局,但它会干扰响应式设计,尤其是键盘,键盘不会出现。
谁可以帮我这个事?是我的标记。
<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>
最佳答案
这是我如何做到的:
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;
}
}
你可以得到这样的东西:
可能你需要直接使用类名而不是 ion-item ......
关于cordova - ionic 3 输入框圆角和图标,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/47550295/