javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2026-03-13 10:22:08 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix(menu): fix content going under header

Browse Source 
Closes #7084
This commit is contained in:
Adam Bradley
2016-06-28 16:22:39 -05:00
parent 4980659bd6
commit 3cd31c3d17
15 changed files with 132 additions and 72 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
demos/events/app.html
View File

@@ -1,8 +1,10 @@
<ion-menu #menu [content]="content">
<ion-toolbar secondary>
<ion-title>Left Menu</ion-title>
</ion-toolbar>
<ion-header>
<ion-toolbar secondary>
<ion-title>Left Menu</ion-title>
</ion-toolbar>
</ion-header>
<ion-content>

16
demos/menu/app.html
View File

@@ -1,8 +1,10 @@
<ion-menu [content]="content" id="menu1">
<ion-toolbar secondary>
<ion-title>Menu 1</ion-title>
</ion-toolbar>
<ion-header>
<ion-toolbar secondary>
<ion-title>Menu 1</ion-title>
</ion-toolbar>
</ion-header>
<ion-content>
<ion-list>
@@ -17,9 +19,11 @@
<ion-menu [content]="content" id="menu2">
<ion-toolbar danger>
<ion-title>Menu 2</ion-title>
</ion-toolbar>
<ion-header>
<ion-toolbar danger>
<ion-title>Menu 2</ion-title>
</ion-toolbar>
</ion-header>
<ion-content>
<ion-list>

8
src/components/app/test/cordova/app.html
View File

@@ -1,8 +1,10 @@
<ion-menu [content]="content" side="left">
<ion-toolbar secondary>
<ion-title>Left Menu</ion-title>
</ion-toolbar>
<ion-header>
<ion-toolbar secondary>
<ion-title>Left Menu</ion-title>
</ion-toolbar>
</ion-header>
<ion-content>

6
src/components/menu/menu.scss
View File

@@ -23,6 +23,12 @@ ion-menu {
transform: translate3d(-9999px, 0, 0);
}
ion-menu > ion-header,
ion-menu > ion-content,
ion-menu > ion-footer {
position: relative;
}
ion-menu[side=right] {
right: 0;
left: auto;

22
src/components/menu/test/basic/main.html
View File

@@ -1,8 +1,10 @@
<ion-menu [content]="content" side="left" persistent="true" (ionDrag)="onDrag($event)" (ionOpen)="onOpen($event)" (ionClose)="onClose($event)">
<ion-toolbar secondary>
<ion-title>Left Menu</ion-title>
</ion-toolbar>
<ion-header>
<ion-toolbar secondary>
<ion-title>Left Menu</ion-title>
</ion-toolbar>
</ion-header>
<ion-content>
@@ -63,14 +65,22 @@
</ion-list>
</ion-content>
<ion-footer>
<ion-toolbar secondary>
<ion-title>Footer</ion-title>
</ion-toolbar>
</ion-footer>
</ion-menu>
<ion-menu [content]="content" side="right">
<ion-toolbar danger>
<ion-title>Right Menu</ion-title>
</ion-toolbar>
<ion-header>
<ion-toolbar danger>
<ion-title>Right Menu</ion-title>
</ion-toolbar>
</ion-header>
<ion-content>

16
src/components/menu/test/disable-swipe/main.html
View File

@@ -1,8 +1,10 @@
<ion-menu [content]="content" side="left">
<ion-toolbar secondary>
<ion-title>Left Menu</ion-title>
</ion-toolbar>
<ion-header>
<ion-toolbar secondary>
<ion-title>Left Menu</ion-title>
</ion-toolbar>
</ion-header>
<ion-content>
@@ -18,9 +20,11 @@
<ion-menu [content]="content" side="right" swipeEnabled="false">
<ion-toolbar danger>
<ion-title>Right Menu</ion-title>
</ion-toolbar>
<ion-header>
<ion-toolbar danger>
<ion-title>Right Menu</ion-title>
</ion-toolbar>
</ion-header>
<ion-content>

24
src/components/menu/test/enable-disable/main.html
View File

@@ -1,8 +1,10 @@
<ion-menu [content]="content" id="menu1">
<ion-toolbar secondary>
<ion-title>Menu 1</ion-title>
</ion-toolbar>
<ion-header>
<ion-toolbar secondary>
<ion-title>Menu 1</ion-title>
</ion-toolbar>
</ion-header>
<ion-content>
<ion-list>
@@ -26,9 +28,11 @@
<ion-menu [content]="content" id="menu2">
<ion-toolbar danger>
<ion-title>Menu 2</ion-title>
</ion-toolbar>
<ion-header>
<ion-toolbar danger>
<ion-title>Menu 2</ion-title>
</ion-toolbar>
</ion-header>
<ion-content>
<ion-list>
@@ -51,9 +55,11 @@
<ion-menu [content]="content" id="menu3">
<ion-toolbar primary>
<ion-title>Menu 3</ion-title>
</ion-toolbar>
<ion-header>
<ion-toolbar primary>
<ion-title>Menu 3</ion-title>
</ion-toolbar>
</ion-header>
<ion-content>
<ion-list>

16
src/components/menu/test/multiple/main.html
View File

@@ -1,8 +1,10 @@
<ion-menu [content]="content" id="menu1">
<ion-toolbar secondary>
<ion-title>Menu 1</ion-title>
</ion-toolbar>
<ion-header>
<ion-toolbar secondary>
<ion-title>Menu 1</ion-title>
</ion-toolbar>
</ion-header>
<ion-content>
<ion-list>
@@ -17,9 +19,11 @@
<ion-menu [content]="content" id="menu2">
<ion-toolbar danger>
<ion-title>Menu 2</ion-title>
</ion-toolbar>
<ion-header>
<ion-toolbar danger>
<ion-title>Menu 2</ion-title>
</ion-toolbar>
</ion-header>
<ion-content>
<ion-list>

16
src/components/menu/test/overlay/main.html
View File

@@ -1,8 +1,10 @@
<ion-menu [content]="content" id="myMenuId" type="overlay" side="left">
<ion-toolbar secondary>
<ion-title>Left Menu</ion-title>
</ion-toolbar>
<ion-header>
<ion-toolbar secondary>
<ion-title>Left Menu</ion-title>
</ion-toolbar>
</ion-header>
<ion-content>
@@ -22,9 +24,11 @@
<ion-menu [content]="content" id="myMenuId2" type="overlay" side="right">
<ion-toolbar danger>
<ion-title>Right Menu</ion-title>
</ion-toolbar>
<ion-header>
<ion-toolbar danger>
<ion-title>Right Menu</ion-title>
</ion-toolbar>
</ion-header>
<ion-content>

16
src/components/menu/test/push/main.html
View File

@@ -1,8 +1,10 @@
<ion-menu [content]="content" type="push" side="left">
<ion-toolbar secondary>
<ion-title>Left Menu</ion-title>
</ion-toolbar>
<ion-header>
<ion-toolbar secondary>
<ion-title>Left Menu</ion-title>
</ion-toolbar>
</ion-header>
<ion-content>
@@ -22,9 +24,11 @@
<ion-menu [content]="content" type="push" side="right">
<ion-toolbar danger>
<ion-title>Right Menu</ion-title>
</ion-toolbar>
<ion-header>
<ion-toolbar danger>
<ion-title>Right Menu</ion-title>
</ion-toolbar>
</ion-header>
<ion-content>

16
src/components/menu/test/reveal/main.html
View File

@@ -1,8 +1,10 @@
<ion-menu [content]="content" type="reveal">
<ion-toolbar secondary>
<ion-title>Left Menu</ion-title>
</ion-toolbar>
<ion-header>
<ion-toolbar secondary>
<ion-title>Left Menu</ion-title>
</ion-toolbar>
</ion-header>
<ion-content>
@@ -19,9 +21,11 @@
<ion-menu [content]="content" type="reveal" side="right">
<ion-toolbar danger>
<ion-title>Right Menu</ion-title>
</ion-toolbar>
<ion-header>
<ion-toolbar danger>
<ion-title>Right Menu</ion-title>
</ion-toolbar>
</ion-header>
<ion-content>

8
src/components/nav/test/nested/index.ts
View File

@@ -32,9 +32,11 @@ export class Login {
@Component({
template: `
<ion-menu [content]="content">
<ion-toolbar secondary>
<ion-title>Account Menu</ion-title>
</ion-toolbar>
<ion-header>
<ion-toolbar secondary>
<ion-title>Account Menu</ion-title>
</ion-toolbar>
</ion-header>
<ion-content>
<ion-list>
<button ion-item (click)="goToProfile()">

16
src/components/range/test/basic/main.html
View File

@@ -1,8 +1,10 @@
<ion-menu [content]="content" side="left" persistent="true">
<ion-toolbar secondary>
<ion-title>Left Menu</ion-title>
</ion-toolbar>
<ion-header>
<ion-toolbar secondary>
<ion-title>Left Menu</ion-title>
</ion-toolbar>
</ion-header>
<ion-content>
@@ -64,9 +66,11 @@
<ion-menu [content]="content" side="right">
<ion-toolbar danger>
<ion-title>Right Menu</ion-title>
</ion-toolbar>
<ion-header>
<ion-toolbar danger>
<ion-title>Right Menu</ion-title>
</ion-toolbar>
</ion-header>
<ion-content>

8
src/components/tabs/test/basic/index.ts
View File

@@ -219,9 +219,11 @@ export class Tab3 {
@Component({
template: `
<ion-menu [content]="content">
<ion-toolbar secondary>
<ion-title>Menu</ion-title>
</ion-toolbar>
<ion-header>
<ion-toolbar secondary>
<ion-title>Menu</ion-title>
</ion-toolbar>
</ion-header>
<ion-content>
<ion-list>
<button ion-item menuClose detail-none>

8
src/components/tabs/test/ghost/index.ts
View File

@@ -87,9 +87,11 @@ class QuesaritoPage {
@Component({
template: `
<ion-menu [content]="content">
<ion-toolbar secondary>
<ion-title>Secret Menu</ion-title>
</ion-toolbar>
<ion-header>
<ion-toolbar secondary>
<ion-title>Secret Menu</ion-title>
</ion-toolbar>
</ion-header>
<ion-content>
<ion-list>
<button ion-item menuClose detail-none (click)="openPage('quesarito')">