javascript www يتداخل أيون المحتوى مع شريط رأس أيون




www w3schools com html5 (4)

أنا بناء تطبيقات phonegap على أساس الأيونية الإطار. في صفحة html واحدة ، أحتاج إلى رأس واحد ومحتوى واحد. ولكن يتداخل رأس الصفحة مع المحتوى. أنا آسف ليس لدي سمعة كافية لنشر الصورة.

الرمز هو التالي. توجد صفحة html في نفس المجلد مع مجلد lib ، الذي يحتوي على مجلدات css و js الأيونية.

    <html>
    <head>
    <meta charset="utf-8">
    <title>Weather</title>

    <!-- Sets initial viewport load and disables zooming  -->
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
    <link rel="stylesheet" href="lib/css/ionic.css">

    <script src="lib/js/ionic.bundle.js"></script>
    <script src="lib/js/angular/angular-resource.js"></script>
    </head>
    <body>
        <ion-header-bar class="bar bar-header bar-dark">
          <h1 class="title">Settings</h1>
          <button class="button button-clear" ng-click="closeSettings()">Close</button>
        </ion-header-bar>
        <ion-content has-header="true">
          <div class="padding">
            <div class="list">
              <label class="item item-input">
                <span class="input-label">Units</span>

                <ion-radio-buttons ng-model="settings.tempUnits">
                  <button class="button button-positive button-radio" ng-value="'f'">&deg;F</button>
                  <button class="button button-positive button-radio" ng-value="'c'">&deg;C</button>
                </ion-radio-buttons>
              </label>
            </div>
          </div>
        </ion-content>

    <!-- <ion-pane id="wrapper"> -->
<!--        <ion-header-bar class="bar bar-header bar-dark">
            <button class="button icon-left ion-chevron-left button-clear button-dark" onclick="goBack()">Back</button>
            <div class="title">xxx</div>
            <button class="button button-icon icon ion-navicon"></button>
        </ion-header-bar>
    </body>
</html>

<ion-view view-title="BBS">
    <ion-header-bar class="bar bar-subheader">
        <div class="button-bar">
            <a class="button">web game</a>
            <a class="button">mobile game</a>
        </div>
    </ion-header-bar>
    <ion-content class="has-header">

    </ion-content>
</ion-view>

أتيت هنا تواجه نفس المشكلة مع أيوني 2: تداخل نافبار المحتوى. في حالتي ، كان ذلك بسبب وجود * ngIf على محتوى أيون. كان الحل هو نقل * ngIf إلى عنصر داخلي ، على سبيل المثال حاوية ng (شكرًاTwitchBronBron):

<ion-header>
  <ion-navbar>
    <ion-title>
      ...
    </ion-title>
  </ion-navbar>
</ion-header>
<ion-content padding>
  <ng-container *ngIf="...">...</ng-container>
</ion-content>

انظر: http://jsbin.com/pagacohovohe/1/edit

Give class = "has-header" to ion-content.

<ion-content class="has-header">
</ion-content>

وتحتاج إلى تهيئة تطبيقك الزاوي - انظر javascript على مثالِي. ملاحظة ng-controller و ng-app.






ionic-framework