我现在正在使用Ionic来开发一个简单的登录页面,但由于某种原因,标题的代码无法正常工作 - 错误的对齐和字体大小 - 输入表单的代码也不是 - 他们应该是全宽度,当我使用堆叠标签时,与输入区域顶部的标签完全不同,它们将位于输入区域的左侧。
这是我正在使用的代码:
<script src="cordova.js"></script>
<div class="bar bar-header bar-light">
<h1 class="title">Login</h1>
</div>
<ion-content class="login">
<div class="list">
<label class="item item-input">
<input type="text" placeholder="username" ng-model="data.username">
</label>
<label class="item item-input">
<input type="password" placeholder="password" ng-model="data.password">
</label>
</div>
<button type="submit" class="button-full button-positive" ng-click="login()">Login</button>
</ion-content>
这是.scss(附带示例):
.login {
}
这就是我的看法:
答案 0 :(得分:1)
您错过了html中的<ion-view></ion-view>
。在你的情况下它应该是这样的:
<ion-view view-title="Login" name="login-view">
<ion-content class="login">
<div class="list">
<label class="item item-input">
<input type="text" placeholder="username" ng-model="data.username">
</label>
<label class="item item-input">
<input type="password" placeholder="password" ng-model="data.password">
</label>
</div>
<button type="submit" class="button-full button-positive" ng-click="login()">Login</button>
</ion-content>
</ion-view>