2016-05-23 78 views
0

我現在正在使用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 {

}

這它是如何找到我的:

incorrect look

+0

這是什麼例子?它有沒有默認的離子CSS? – thepio

+0

https://devdactic.com/simple-login-example-with-ionic-and-angularjs/ 這是我用過的例子。 我相信它使用默認的離子CSS。 – Arfons

回答

1

您在您的HTML中缺少​​。它應該是這樣的在你的情況下:

<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> 
+0

如果我已經遷移到離子v2,它將如何工作? – Arfons

+0

對不起,我還沒有試過ionic2。您需要閱讀文檔。 – thepio