mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2025-08-20 04:14:21 +08:00
add a left sidemenu to tabs example
This commit is contained in:
@ -8,7 +8,7 @@ $aside-transition: 0.3s linear transform;
|
||||
|
||||
background: #eee;
|
||||
|
||||
&.type-overlay {
|
||||
&[type=overlay] {
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
|
@ -27,14 +27,12 @@ const contentManipulator = {
|
||||
}
|
||||
|
||||
export class AsideType {
|
||||
constructor(aside) {
|
||||
constructor(aside: Aside) {
|
||||
this.aside = aside;
|
||||
|
||||
aside.domElement.classList.add(`type-${aside.type}`);
|
||||
|
||||
//FIXME(ajoslin): have to wait for for bindings to apply in a component
|
||||
setTimeout(() => {
|
||||
this.aside.content.domElement.classList.add('aside-content')
|
||||
aside.content.domElement.classList.add('aside-content')
|
||||
})
|
||||
}
|
||||
}
|
||||
|
@ -1,92 +0,0 @@
|
||||
import {Aside} from 'ionic2/components/aside/aside';
|
||||
//TODO: figure out way to get rid of all the ../../../../
|
||||
import {SlideEdgeGesture} from 'ionic2/gestures/slide-edge-gesture';
|
||||
|
||||
class AsideGesture extends SlideEdgeGesture {
|
||||
constructor(aside: Aside) {
|
||||
// TODO figure out the sliding element, dont just use the parent
|
||||
let slideElement = aside.domElement.parentNode;
|
||||
super(slideElement, {
|
||||
direction: (aside.side === 'left' || aside.side === 'right') ? 'x' : 'y',
|
||||
edge: aside.side,
|
||||
threshold: 75
|
||||
});
|
||||
this.aside = aside;
|
||||
this.slideElement = slideElement;
|
||||
this.listen();
|
||||
}
|
||||
|
||||
canStart(ev) {
|
||||
// Only restrict edges if the aside is closed
|
||||
return this.aside.isOpen ? true : super.canStart(ev);
|
||||
}
|
||||
|
||||
// Set CSS, then wait one frame for it to apply before sliding starts
|
||||
onSlideBeforeStart(slide, ev) {
|
||||
this.aside.setSliding(true);
|
||||
this.aside.setChanging(true);
|
||||
return new Promise(resolve => {
|
||||
requestAnimationFrame(resolve);
|
||||
});
|
||||
}
|
||||
onSlide(slide, ev) {
|
||||
this.aside.setTransform('translate3d(' + slide.distance + 'px,0,0)');
|
||||
}
|
||||
onSlideEnd(slide, ev) {
|
||||
this.aside.setTransform('');
|
||||
this.aside.setSliding(false);
|
||||
if (Math.abs(ev.velocityX) > 0.2 || Math.abs(slide.delta) > Math.abs(slide.max) * 0.5) {
|
||||
this.aside.setOpen(!this.aside.isOpen);
|
||||
}
|
||||
}
|
||||
|
||||
getElementStartPos(slide, ev) {
|
||||
return this.aside.isOpen ? slide.max : slide.min;
|
||||
}
|
||||
getSlideBoundaries() {
|
||||
return {
|
||||
min: 0,
|
||||
max: this.aside.domElement.offsetWidth
|
||||
};
|
||||
}
|
||||
}
|
||||
|
||||
export class LeftAsideGesture extends AsideGesture {}
|
||||
|
||||
export class RightAsideGesture extends LeftAsideGesture {
|
||||
getElementStartPos(slide, ev) {
|
||||
return this.aside.isOpen ? slide.min : slide.max;
|
||||
}
|
||||
getSlideBoundaries() {
|
||||
return {
|
||||
min: -this.aside.domElement.offsetWidth,
|
||||
max: 0
|
||||
};
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
export class TopAsideGesture extends AsideGesture {
|
||||
onSlide(slide, ev) {
|
||||
this.aside.setTransform('translate3d(0,' + slide.distance + 'px,0)');
|
||||
}
|
||||
getSlideBoundaries() {
|
||||
return {
|
||||
min: 0,
|
||||
max: this.aside.domElement.offsetHeight
|
||||
};
|
||||
}
|
||||
}
|
||||
|
||||
export class BottomAsideGesture extends TopAsideGesture {
|
||||
getElementStartPos(slide, ev) {
|
||||
return this.aside.isOpen ? slide.min : slide.max;
|
||||
}
|
||||
getSlideBoundaries() {
|
||||
return {
|
||||
min: -this.aside.domElement.offsetHeight,
|
||||
max: 0
|
||||
};
|
||||
}
|
||||
}
|
||||
|
@ -1,80 +0,0 @@
|
||||
import {Aside} from 'ionic2/components/aside/aside';
|
||||
|
||||
// TODO use setters instead of direct dom manipulation
|
||||
const asideManipulator = {
|
||||
setSliding(sliding) {
|
||||
this.aside.domElement.classList[sliding ? 'add' : 'remove']('no-transition');
|
||||
},
|
||||
setOpen(open) {
|
||||
this.aside.domElement.classList[open ? 'add' : 'remove']('open');
|
||||
},
|
||||
setTransform(t) {
|
||||
this.aside.domElement.style.transform = t;
|
||||
}
|
||||
}
|
||||
const contentManipulator = {
|
||||
setSliding(sliding) {
|
||||
this.aside.content.domElement.classList[sliding ? 'add' : 'remove']('no-transition');
|
||||
},
|
||||
setOpen(open) {
|
||||
this.aside.content.domElement.classList[open ? 'add' : 'remove'](
|
||||
`aside-open-${this.aside.side}`
|
||||
)
|
||||
},
|
||||
setTransform(t) {
|
||||
this.aside.content.domElement.style.transform = t;
|
||||
}
|
||||
}
|
||||
|
||||
export class AsideType {
|
||||
constructor(aside) {
|
||||
this.aside = aside;
|
||||
|
||||
aside.domElement.classList.add(`type-${aside.type}`);
|
||||
|
||||
//FIXME(ajoslin): have to wait for for bindings to apply in a component
|
||||
setTimeout(() => {
|
||||
this.aside.content.domElement.classList.add('aside-content')
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
export class AsideTypeOverlay extends AsideType {
|
||||
setSliding(sliding) {
|
||||
asideManipulator.setSliding.call(this, sliding);
|
||||
}
|
||||
setOpen(open) {
|
||||
asideManipulator.setOpen.call(this, open);
|
||||
}
|
||||
setTransform(t) {
|
||||
asideManipulator.setTransform.call(this, t);
|
||||
}
|
||||
}
|
||||
|
||||
export class AsideTypePush extends AsideType {
|
||||
setSliding(sliding) {
|
||||
asideManipulator.setSliding.call(this, sliding);
|
||||
contentManipulator.setSliding.call(this, sliding);
|
||||
}
|
||||
setOpen(open) {
|
||||
asideManipulator.setOpen.call(this, open);
|
||||
contentManipulator.setOpen.call(this, open);
|
||||
}
|
||||
setTransform(t) {
|
||||
asideManipulator.setTransform.call(this, t);
|
||||
contentManipulator.setTransform.call(this, t);
|
||||
}
|
||||
}
|
||||
|
||||
export class AsideTypeReveal extends AsideType {
|
||||
setSliding(sliding) {
|
||||
contentManipulator.setSliding.call(this, sliding);
|
||||
}
|
||||
setOpen(sliding) {
|
||||
asideManipulator.setOpen.call(this, sliding);
|
||||
contentManipulator.setOpen.call(this, sliding);
|
||||
}
|
||||
setTransform(t) {
|
||||
contentManipulator.setTransform.call(this, t);
|
||||
}
|
||||
}
|
5
src/components/tabs/test/advanced/main.html
Normal file
5
src/components/tabs/test/advanced/main.html
Normal file
@ -0,0 +1,5 @@
|
||||
<ion-aside side="left" [content]="viewport">
|
||||
Hello!
|
||||
</ion-aside>
|
||||
<ion-nav-viewport #viewport [initial]="initial">
|
||||
</ion-nav-viewport>
|
@ -1,13 +1,13 @@
|
||||
import {Component, Template, bootstrap} from 'angular2/angular2'
|
||||
import {NavViewport} from 'ionic2/components'
|
||||
import {NavViewport, Aside} from 'ionic2/components'
|
||||
import {SignInPage} from 'app/pages/sign-in'
|
||||
|
||||
@Component({
|
||||
selector: '[ion-app]'
|
||||
})
|
||||
@Template({
|
||||
inline: '<ion-nav-viewport [initial]="initial"></ion-nav-viewport>',
|
||||
directives: [NavViewport]
|
||||
url: 'main.html',
|
||||
directives: [NavViewport, Aside]
|
||||
})
|
||||
class App {
|
||||
constructor() {
|
||||
|
@ -38,7 +38,7 @@ export class IonicComponent {
|
||||
}
|
||||
|
||||
invoke(instance) {
|
||||
let config = this
|
||||
const config = this
|
||||
instance.domElement.classList.add(this.componentCssName)
|
||||
instance.domElement.classList.add(`${this.componentCssName}-${platformName}`)
|
||||
|
||||
@ -53,13 +53,16 @@ export class IonicComponent {
|
||||
|
||||
return {
|
||||
getDelegate(delegateName) {
|
||||
let cases = (config.delegates || {})[delegateName] || []
|
||||
let cases = (config.delegates || {})[delegateName] || [];
|
||||
for (let i = 0; i < cases.length; i++) {
|
||||
let delegateCase = cases[i]
|
||||
let delegateCase = cases[i];
|
||||
if (util.isArray(delegateCase)) {
|
||||
if (delegateCase[0](instance)) return new delegateCase[1](instance)
|
||||
let [ check, DelegateConstructor ] = delegateCase;
|
||||
if (check(instance)) {
|
||||
return new DelegateConstructor(instance);
|
||||
}
|
||||
} else {
|
||||
return new delegateCase(instance)
|
||||
return new delegateCase(instance);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
Reference in New Issue
Block a user