mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2025-08-18 19:21:34 +08:00
toolbar menu-toggle to use link
This commit is contained in:
@ -1,9 +1,9 @@
|
||||
|
||||
<ion-navbar *navbar>
|
||||
|
||||
<button menu-toggle id="e2eHeaderToggleMenu">
|
||||
<a menu-toggle id="e2eHeaderToggleMenu">
|
||||
<icon menu></icon>
|
||||
</button>
|
||||
</a>
|
||||
|
||||
<ion-title>
|
||||
Menu
|
||||
|
@ -1,9 +1,9 @@
|
||||
|
||||
<ion-navbar *navbar>
|
||||
|
||||
<button menu-toggle id="e2eHeaderToggleMenu">
|
||||
<a menu-toggle id="e2eHeaderToggleMenu">
|
||||
<icon menu></icon>
|
||||
</button>
|
||||
</a>
|
||||
|
||||
<ion-title>
|
||||
Menu
|
||||
|
@ -5,9 +5,9 @@ import {App, ActionMenu, IonicApp, IonicView, Register} from 'ionic/ionic';
|
||||
@IonicView({
|
||||
template: '<ion-navbar *navbar primary>' +
|
||||
'<ion-title>Heading</ion-title>' +
|
||||
'<button menu-toggle="menu">' +
|
||||
'<a menu-toggle="menu">' +
|
||||
'<icon menu></icon>' +
|
||||
'</button>' +
|
||||
'</a>' +
|
||||
'<ion-nav-items secondary>' +
|
||||
'<button><ion-icon md="ion-android-search" ios="ion-ios-search-strong"></i></button>' +
|
||||
'<button (click)="showMoreMenu()"><i class="icon ion-android-more-vertical"></i></button>' +
|
||||
|
@ -4,9 +4,9 @@ import {IonicView} from 'ionic/ionic';
|
||||
@IonicView({
|
||||
template: `
|
||||
<ion-navbar *navbar>
|
||||
<button menu-toggle>
|
||||
<a menu-toggle>
|
||||
<icon menu></icon>
|
||||
</button>
|
||||
</a>
|
||||
<ion-title>Battery</ion-title>
|
||||
</ion-navbar>
|
||||
<ion-content class="padding">
|
||||
|
@ -5,9 +5,9 @@ import {Camera} from 'ionic/ionic';
|
||||
@IonicView({
|
||||
template: `
|
||||
<ion-navbar *navbar>
|
||||
<button menu-toggle>
|
||||
<a menu-toggle>
|
||||
<icon menu></icon>
|
||||
</button>
|
||||
</a>
|
||||
<ion-title>Camera</ion-title>
|
||||
</ion-navbar>
|
||||
<ion-content class="padding">
|
||||
|
@ -5,9 +5,9 @@ import {Contacts} from 'ionic/ionic';
|
||||
@IonicView({
|
||||
template: `
|
||||
<ion-navbar *navbar>
|
||||
<button menu-toggle>
|
||||
<a menu-toggle>
|
||||
<icon menu></icon>
|
||||
</button>
|
||||
</a>
|
||||
<ion-title>Contacts</ion-title>
|
||||
</ion-navbar>
|
||||
<ion-content class="padding">
|
||||
|
@ -4,9 +4,9 @@ import {IonicView} from 'ionic/ionic';
|
||||
@IonicView({
|
||||
template: `
|
||||
<ion-navbar *navbar>
|
||||
<button menu-toggle>
|
||||
<a menu-toggle>
|
||||
<icon menu></icon>
|
||||
</button>
|
||||
</a>
|
||||
<ion-title>Device Motion</ion-title>
|
||||
</ion-navbar>
|
||||
<ion-content class="padding">
|
||||
|
@ -4,9 +4,9 @@ import {IonicView} from 'ionic/ionic';
|
||||
@IonicView({
|
||||
template: `
|
||||
<ion-navbar *navbar>
|
||||
<button menu-toggle>
|
||||
<a menu-toggle>
|
||||
<icon menu></icon>
|
||||
</button>
|
||||
</a>
|
||||
<ion-title>Vibration</ion-title>
|
||||
</ion-navbar>
|
||||
<ion-content class="padding">
|
||||
|
@ -5,9 +5,9 @@ import {Geolocation} from 'ionic/ionic';
|
||||
@IonicView({
|
||||
template: `
|
||||
<ion-navbar *navbar>
|
||||
<button menu-toggle>
|
||||
<a menu-toggle>
|
||||
<icon menu></icon>
|
||||
</button>
|
||||
</a>
|
||||
<ion-title>Vibration</ion-title>
|
||||
</ion-navbar>
|
||||
<ion-content class="padding">
|
||||
|
@ -5,9 +5,9 @@ import {Vibration} from 'ionic/ionic';
|
||||
@IonicView({
|
||||
template: `
|
||||
<ion-navbar *navbar>
|
||||
<button menu-toggle>
|
||||
<a menu-toggle>
|
||||
<icon menu></icon>
|
||||
</button>
|
||||
</a>
|
||||
<ion-title>Vibration</ion-title>
|
||||
</ion-navbar>
|
||||
<ion-content class="padding">
|
||||
|
@ -5,7 +5,7 @@ import {Directive} from 'angular2/angular2';
|
||||
* TODO
|
||||
*/
|
||||
@Directive({
|
||||
selector: 'button,[button]',
|
||||
selector: 'button,[button],[menu-toggle]',
|
||||
host: {
|
||||
'[class.icon-left]': 'iconLeft',
|
||||
'[class.icon-right]': 'iconRight',
|
||||
|
@ -11,7 +11,8 @@ import {IonicApp} from '../app/app';
|
||||
'menuToggle'
|
||||
],
|
||||
host: {
|
||||
'(click)': 'toggle($event)'
|
||||
'(click)': 'toggle($event)',
|
||||
'button': ''
|
||||
}
|
||||
})
|
||||
export class MenuToggle {
|
||||
|
@ -1,9 +1,9 @@
|
||||
|
||||
<ion-navbar *navbar>
|
||||
|
||||
<button menu-toggle id="e2eHeaderToggleMenu">
|
||||
<a menu-toggle id="e2eHeaderToggleMenu">
|
||||
<icon menu></icon>
|
||||
</button>
|
||||
</a>
|
||||
|
||||
<ion-title>
|
||||
Menu
|
||||
|
@ -1,9 +1,9 @@
|
||||
|
||||
<ion-navbar *navbar>
|
||||
|
||||
<button menu-toggle id="e2eHeaderToggleMenu">
|
||||
<a menu-toggle id="e2eHeaderToggleMenu">
|
||||
<icon menu></icon>
|
||||
</button>
|
||||
</a>
|
||||
|
||||
<ion-title>
|
||||
Menu
|
||||
|
@ -1,9 +1,9 @@
|
||||
|
||||
<ion-navbar *navbar>
|
||||
|
||||
<button menu-toggle="leftMenu">
|
||||
<a menu-toggle="leftMenu">
|
||||
<icon menu></icon>
|
||||
</button>
|
||||
</a>
|
||||
|
||||
<ion-title>
|
||||
Overlay Menu
|
||||
|
@ -1,9 +1,9 @@
|
||||
|
||||
<ion-navbar *navbar>
|
||||
|
||||
<button menu-toggle="leftMenu">
|
||||
<a menu-toggle="leftMenu">
|
||||
<icon menu></icon>
|
||||
</button>
|
||||
</a>
|
||||
|
||||
<ion-title>
|
||||
Reveal Menu
|
||||
|
@ -35,6 +35,7 @@ $toolbar-ios-title-font-size: 1.7rem !default;
|
||||
|
||||
[menu-toggle] {
|
||||
order: map-get($toolbar-order-ios, 'menu-toggle');
|
||||
margin-left: 10px;
|
||||
}
|
||||
|
||||
ion-title {
|
||||
|
@ -46,15 +46,11 @@ $toolbar-md-button-font-size: 1.4rem !default;
|
||||
min-width: 28px;
|
||||
}
|
||||
|
||||
button[menu-toggle],
|
||||
a[menu-toggle],
|
||||
[menu-toggle].activated {
|
||||
margin: -$toolbar-padding 0 -$toolbar-padding -$toolbar-padding;
|
||||
margin: ($toolbar-padding * -1) 20px ($toolbar-padding * -1) 8px;
|
||||
padding-bottom: $toolbar-padding / 2;
|
||||
height: $toolbar-md-height;
|
||||
}
|
||||
|
||||
[menu-toggle] icon {
|
||||
padding: 0 33px 0 20px;
|
||||
}
|
||||
|
||||
}
|
||||
|
@ -1,8 +1,8 @@
|
||||
|
||||
<ion-toolbar>
|
||||
<button menu-toggle>
|
||||
<a menu-toggle>
|
||||
<icon menu></icon>
|
||||
</button>
|
||||
</a>
|
||||
<ion-title>menu-toggle left. This is the title that never ends. It just goes on and on my friend.</ion-title>
|
||||
</ion-toolbar>
|
||||
|
||||
|
Reference in New Issue
Block a user