Question

我正在尝试使用标题和侧面菜单向现有项目添加新视图/页面。但是我似乎弄错了语法。

离子侧菜单：

     <ion-side-menus >

<!-- Center content -->
<ion-side-menu-content drag-content="false">
  <ion-header-bar style=" background-color:#3A5B89">
      <button menu-toggle="left"  class="button button-clear button-light "> menu</button>
    <h1 class="title" style=" text-align:left; color:white;">Medexter Demo KIS</h1>
      <div class="BTNright">
      <button class="button button-clear button-light smallFont">Print</button>
      <button class="button button-clear button-light smallFont">Back</button>
      <button class="button button-clear button-light smallFont">Redo</button>
      <button class="button button-clear button-light smallFont">Search</button>
      <button class="button button-clear button-light smallFont">Help</button>
      <button class="button button-clear button-light smallFont">Log Out</button>
      </div>
  </ion-header-bar>

</ion-side-menu-content>


<!-- Left menu -->
<ion-side-menu side="left" expose-aside-when="large" width="150" >
  <ion-header-bar >
    <h1 class="title">Projects</h1>
  </ion-header-bar >
    <ion-content >
       <ion-list >
    <ion-item >
      Dashoboard
    </ion-item>
    <ion-item >
      Patients
    </ion-item>
    <ion-item >
      Laboratory
    </ion-item>
    <ion-item >
      Ambulance
    </ion-item>
    <ion-item >
      Forms
    </ion-item>
    <ion-item >
      Medication
    </ion-item>
    <ion-item >
      Reporting
    </ion-item>
    <ion-item >
      Preferences
    </ion-item>
  </ion-list>
    </ion-content>
</ion-side-menu>

“页面”内容：

<ion-content scroll="false"  class="has-header">

        <ion-list style="float:left; overflow-y:scroll; height:100vh">
          <ion-item ng-repeat=" patient in patientList" style="font-size:80%;" >
            {{patient.Lname}}, {{patient.Fname}}
          </ion-item>
          </ion-list>



          <h1>Search</h1>

        <ion-list>
    <ion-item >
      Search
    </ion-item>
    <ion-item >
      Browse
    </ion-item>
    <ion-item >
      Playlists
    </ion-item>
  </ion-list>
  </ion-content>

当我在标签中包装菜单部分和主视图时，它会显示标题和主视图，但是当切换侧面菜单时，它位于我的主视图后面，不会向右滑动。此外，<h1>Search</h1>消失了。

        <!-- Center content -->
    <ion-side-menu-content drag-content="false">
      <ion-header-bar style=" background-color:#3A5B89">
          <button menu-toggle="left"  class="button button-clear button-light "> menu</button>
        <h1 class="title" style=" text-align:left; color:white;">Medexter Demo KIS</h1>
          <div class="BTNright">
          <button class="button button-clear button-light smallFont">Print</button>
          <button class="button button-clear button-light smallFont">Back</button>
          <button class="button button-clear button-light smallFont">Redo</button>
          <button class="button button-clear button-light smallFont">Search</button>
          <button class="button button-clear button-light smallFont">Help</button>
          <button class="button button-clear button-light smallFont">Log Out</button>
          </div>
      </ion-header-bar>
< ion-content>
 MAIN VIEW CODE
 </ion-content>

    </ion-side-menu-content>

当我把它放在标题的<ion-side-menu-content>标签内时，一切正常。 HOwever，我在这个主题上找到的所有tutotials和演示都有两个代码分开。哪种方法合适？我可以将主视图保留在Header标签内吗？

离子侧菜单不显示

0 个答案: