mirror of
https://github.com/NaN-tic/ionic-menu.git
synced 2023-12-14 04:32:53 +01:00
initial commit
This commit is contained in:
commit
186f16c077
4 changed files with 113 additions and 0 deletions
17
menu.html
Normal file
17
menu.html
Normal file
|
@ -0,0 +1,17 @@
|
||||||
|
|
||||||
|
|
||||||
|
<ion-header>
|
||||||
|
<!-- Hide back button for this specific view-->
|
||||||
|
<ion-navbar>
|
||||||
|
<ion-title>{{ title | translate}}</ion-title>
|
||||||
|
</ion-navbar>
|
||||||
|
</ion-header>
|
||||||
|
|
||||||
|
<ion-content padding>
|
||||||
|
<ion-list class="list-items">
|
||||||
|
<button [disabled]="entry.disabled" ion-button *ngFor="let entry of menu" (click)="entryTapped($event, entry)" class="list-items" round block>
|
||||||
|
<!-- <ion-icon name="{{item.icon}}" item-left></ion-icon> -->
|
||||||
|
{{entry.name | translate}}
|
||||||
|
</button>
|
||||||
|
</ion-list>
|
||||||
|
</ion-content>
|
20
menu.scss
Normal file
20
menu.scss
Normal file
|
@ -0,0 +1,20 @@
|
||||||
|
page-menu {
|
||||||
|
|
||||||
|
}
|
||||||
|
/* portrait */
|
||||||
|
@media screen and (orientation:portrait) {
|
||||||
|
.list-items {
|
||||||
|
margin-top: 45px;
|
||||||
|
height: 50px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@media screen and (orientation:landscape) {
|
||||||
|
.list-items {
|
||||||
|
margin-top: 35px;
|
||||||
|
height: 50px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.title {
|
||||||
|
text-align: center;
|
||||||
|
}
|
36
menu.spec.ts
Normal file
36
menu.spec.ts
Normal file
|
@ -0,0 +1,36 @@
|
||||||
|
import { ComponentFixture } from '@angular/core/testing';
|
||||||
|
import { async } from '@angular/core/testing';
|
||||||
|
import {} from 'jasmine';
|
||||||
|
import { TestUtils } from '../../test';
|
||||||
|
|
||||||
|
import { MenuPage } from './menu'
|
||||||
|
|
||||||
|
let fixture: ComponentFixture<MenuPage> = null;
|
||||||
|
let instance: any = null;
|
||||||
|
|
||||||
|
describe('Menu Page', () => {
|
||||||
|
|
||||||
|
beforeEach(async(() => TestUtils.beforeEachCompiler([MenuPage]).then(compiled => {
|
||||||
|
fixture = compiled.fixture;
|
||||||
|
instance = compiled.instance;
|
||||||
|
fixture.detectChanges()
|
||||||
|
instance.menu = [
|
||||||
|
{ 'Test title1': MenuPage },
|
||||||
|
{ 'Test title2': MenuPage }
|
||||||
|
];
|
||||||
|
})));
|
||||||
|
it('initialises', () => {
|
||||||
|
expect(instance).toBeTruthy();
|
||||||
|
});
|
||||||
|
it('Checks menu items', () => {
|
||||||
|
expect(instance.menu.length).toEqual(2);
|
||||||
|
})
|
||||||
|
// TODO: Make events work with navbar (cant seem to make it work as of yet)
|
||||||
|
/*
|
||||||
|
it('does a click', () => {
|
||||||
|
fixture.detectChanges();
|
||||||
|
spyOn(instance, 'entryTapped');
|
||||||
|
TestUtils.eventFire(fixture.nativeElement.querySelectorAll('button')[0], 'click');
|
||||||
|
expect(instance.entryTapped).toHaveBeenCalled();
|
||||||
|
});*/
|
||||||
|
});
|
40
menu.ts
Normal file
40
menu.ts
Normal file
|
@ -0,0 +1,40 @@
|
||||||
|
import { Component } from '@angular/core';
|
||||||
|
import { NavController } from 'ionic-angular';
|
||||||
|
|
||||||
|
@Component({
|
||||||
|
selector: 'page-menu',
|
||||||
|
templateUrl: 'menu.html',
|
||||||
|
|
||||||
|
})
|
||||||
|
/**
|
||||||
|
* Menu page.
|
||||||
|
* This class display the different menu options and go to their
|
||||||
|
* views once they are clicked.
|
||||||
|
*
|
||||||
|
* This is the base of all the menus, all menus should inherit from this class
|
||||||
|
*
|
||||||
|
* DO NOT MODIFY THIS CLASS, EXTEND IT INSTEAD
|
||||||
|
*/
|
||||||
|
export class MenuPage {
|
||||||
|
/**
|
||||||
|
* Array contaning the menus
|
||||||
|
* @type {Array}
|
||||||
|
*/
|
||||||
|
menu: Array<{name: string, page: any, params?: {}, disabled?: boolean}>;
|
||||||
|
title: string;
|
||||||
|
|
||||||
|
constructor(public navCtrl: NavController) {
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Listener for the menu buttons, when a button is pressed in the menu
|
||||||
|
* it calls this method.
|
||||||
|
* @param {Object} $event Event that happend
|
||||||
|
* @param {Object} entry Entry information (name and page to go)
|
||||||
|
*/
|
||||||
|
entryTapped($event, entry) {
|
||||||
|
console.log("Tapped entry", entry, entry.params);
|
||||||
|
this.navCtrl.push(entry.page, {params: entry.params});
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
Loading…
Reference in a new issue