这里我将分享我学到的几种ionic登陆界面

最新推荐文章于 2024-08-25 21:04:45 发布

FZLE

最新推荐文章于 2024-08-25 21:04:45 发布

阅读量7.7k

点赞数 1

分类专栏：登陆文章标签：登陆界面代码前端

本文链接：https://blog.csdn.net/qq_28499043/article/details/47121589

版权

登陆专栏收录该内容

0 篇文章 0 订阅

订阅专栏

在index.html文件里的内容是

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
    <title></title>

    <link href="lib/ionic/css/ionic.css" rel="stylesheet">
    <link href="css/style.css" rel="stylesheet">

    <!-- IF using Sass (run gulp sass first), then uncomment below and remove the CSS includes above
    <link href="css/ionic.app.css" rel="stylesheet">
    -->

    <!-- ionic/angularjs js -->
    <script src="lib/ionic/js/ionic.bundle.js"></script>

    <!-- cordova script (this will be a 404 during development) -->
    <script src="cordova.js"></script>

    <!-- your app's js -->
    <script src="js/app.js"></script>
    <script src="js/controllers.js"></script>
    <script src="js/services.js"></script>
  </head>
  <body ng-app="starter">
    <!--
      The nav bar that will be updated as we navigate between views.
    -->

    <ion-nav-bar class="bar-stable">
      <ion-nav-back-button>
      </ion-nav-back-button>
    </ion-nav-bar>

    <!--
      The views will be rendered in the <ion-nav-view> directive below
      Templates are in the /templates folder (but you could also
      have templates inline in this html file if you'd like).
    -->
    <ion-nav-view></ion-nav-view>
  </body>
</html>

在 controller.js 文件的代码：

angular.module('starter.controllers', [])

.controller('LogonCtrl',function($scope,$state){
    $scope.back = function(){
        $state.go('carousel');
    }

});

在app.js文件的代码：

angular.module('starter', ['ionic', 'starter.controllers', 'starter.services'])

.run(function($ionicPlatform) {
  $ionicPlatform.ready(function() {
 
    if (window.cordova && window.cordova.plugins && window.cordova.plugins.Keyboard) {
        cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
        cordova.plugins.Keyboard.disableScroll(true);

    }
    if (window.StatusBar) {
      StatusBar.styleLightContent();
    }
  });
})

.config(function($stateProvider, $urlRouterProvider) {

  $stateProvider

 .state('logon',{
        url:'/logon',
        templateUrl:'templates/logon.html',
        controller:'LogonCtrl'
      });

  // if none of the above states are matched, use this as the fallback
  $urlRouterProvider.otherwise('/logon');

});

在这里，我新建了一个空白html文件，定义名称为logon.html

第一种是placeholder（占位符）模拟输入，当用户输入时，占位符将会隐藏

在logon.html里的代码如下：

<ion-view title="登陆页面">
    <ion-content>
        <div class="list">
            <label class="item item-input">
                <input type="text" placeholder="First Name">
            </label>
            <label class="item item-input">
                <input type="text" placeholder="Last Name">
            </label>
            <label class="item item-input">
                <input type="text" placeholder="password">
            </label>
        </div>
        <button class="button button-full">登陆</button>
    </ion-content>
</ion-view>

接下来，第二个是内联标签，使用输入标签将标签放在输入元素的左边，当用户输入内容时标签不隐藏

在logon.html里的代码：

<ion-view title="登陆页面">
    <ion-content>
        <div class="list">
            <label class="item item-input">
                <span class="input-label">Username</span>
                 <input type="text">
            </label>
            <label class="item item-input">
                <span class="input-label">Password</span>
                <input type="password">
            </label>
        </div>
        <button class="button button-full">登陆</button>
    </ion-content>
</ion-view>

第三个是堆叠标签，既使用占位符标签，也使用内联标签，当然，主要是它自身的堆叠效果（stacked）

在logon.html里的代码如下：

<ion-view title="登陆页面">
    <ion-content>
        <div class="list">
            <label class="item item-input item-stacked-label">
                <span class="input-label">Username</span>
                <input type="text" placeholder="Mary">
            </label>
            <label class="item item-input item-stacked-label">
                <span class="input-label">Password</span>
                <input type="password"placeholder="Password">
            </label>
        </div>
        <button class="button button-full">登陆</button>
    </ion-content>
</ion-view>



第四种是浮动标签

在logon.html里的代码如下：
<ion-view title="登陆页面">
    <ion-content>
        <div class="list">
            <label class="item item-input item-floating-label">
                <span class="input-label">Username</span>
                <input type="text" placeholder="Username">
            </label>
            <label class="item item-input item-floating-label">
                <span class="input-label">Password</span>
                <input type="password" placeholder="Password">
            </label>
        </div>
        <button class="button button-full">登陆</button>
    </ion-content>
</ion-view>


第五种 插图的形式

在logon.html里的代码如下：

<ion-view title="登陆页面">
    <ion-content>
        <div class="list list-inset">
            <label class="item item-input">
                <input type="text"placeholder="Username">
            </label>
            <label class="item item-input">
                <input type="password" placeholder="Password">
            </label>
        </div>
        <button class="button button-full">登陆</button>
    </ion-content>
</ion-view>

第六种插入输入

在logon.html里的代码如下：

<ion-view title="登陆页面">
    <ion-content>
        <div class="list">
            <div class="item-input-inset">
            <label class="item-input-wrapper">
                <input type="text"placeholder="Username">
            </label>
            </div>
             <div class="item-input-inset">
             <label class="item-input-wrapper">
                <input type="password" placeholder="Password">
             </label>
            </div>
         </div>
         <button class="button button-full">登陆</button>
     </ion-content>
 </ion-view>

第七种输入图标

在logon.html里的代码如下：

  <ion-view title="登陆页面">
    <ion-content>
        <div class="list list-inset">
            <label class="item item-input">
                <i class="icon ion-person"></i>
                <input type="text" placeholder="Username">
            </label>
            <label class="item item-input">
                <i class="icon ion-locked"></i>
                <input type="password"placeholder="Password">
            </label>
        </div>
        <button class="button button-full">登陆</button>
    </ion-content>
</ion-view>

第八种

代码：

<ion-view>
    <div class="bar bar-header">
        <div class="title">登陆</div>
    </div>
    <ion-view>
        <ion-content style="margin-top: 40px">
            <div class="list item-input-inset">
                <h4>Username：</h4>
                <label class="item item-input">
                    <input type="text">
                </label>
            </div>
            <div class="list item-input-inset">
                <h4>Password：</h4>
                <label class="item item-input">
                    <input type="tel">
                </label>
            </div>
            <div class="list item-input-inset">
                <h4>Email：</h4>
                <label class="item item-input">
                    <input type="email">
                </label>
            </div>
        </ion-content>
    </ion-view>
</ion-view>