我正在尝试使用 Headers 和侧面菜单向现有项目添加新视图/页面 . 但是我似乎弄错了语法 .
离子侧菜单:
<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>
当我在标签中包装菜单部分和主视图时,它会显示 Headers 和主视图,但是当切换侧面菜单时,它位于我的主视图后面,不会向右滑动 . 此外, <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>
当我把它放在 Headers 的 <ion-side-menu-content>
标签内时一切正常 . HOwever,我在这个主题上找到的所有tutotials和演示都有两个代码分开 . 哪种方法合适?我可以将主视图保留在Header标签内吗?