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

fix(menu): right side

Browse Source
This commit is contained in:
Manu Mtz.-Almeida
2018-02-10 00:53:09 +01:00
parent c960c1dc03
commit b68e79ab3c
1 changed files with 6 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
packages/core/src/components/menu/menu.tsx
View File

@ -1,4 +1,4 @@
import { Component, Element, Event, EventEmitter, Listen, Method, Prop, Watch } from '@stencil/core'; import { Component, Element, Event, EventEmitter, Listen, Method, Prop, State, Watch } from '@stencil/core';
import { Animation, Config, GestureDetail, SplitPaneAlert, StencilElement } from '../../index'; import { Animation, Config, GestureDetail, SplitPaneAlert, StencilElement } from '../../index';
import { Side, assert, checkEdgeSide, isRightSide } from '../../utils/helpers'; import { Side, assert, checkEdgeSide, isRightSide } from '../../utils/helpers';
@ -23,7 +23,6 @@ export class Menu {
mode: string; mode: string;
color: string; color: string;
isAnimating = false; isAnimating = false;
isRightSide = false;
width: number = null; width: number = null;
backdropEl: HTMLElement; backdropEl: HTMLElement;
@ -33,6 +32,8 @@ export class Menu {
@Element() private el: HTMLIonMenuElement; @Element() private el: HTMLIonMenuElement;
@State() isRightSide = false;
@Prop({ context: 'config' }) config: Config; @Prop({ context: 'config' }) config: Config;
@Prop({ connect: 'ion-menu-controller' }) lazyMenuCtrl: StencilElement; @Prop({ connect: 'ion-menu-controller' }) lazyMenuCtrl: StencilElement;
@Prop({ context: 'enableListener' }) enableListener: any; @Prop({ context: 'enableListener' }) enableListener: any;
@ -426,13 +427,14 @@ export class Menu {
} }
hostData() { hostData() {
const isRightSide = this.isRightSide;
const typeClass = 'menu-type-' + this.type; const typeClass = 'menu-type-' + this.type;
return { return {
role: 'complementary', role: 'complementary',
class: { class: {
'menu-enabled': !this.disabled, 'menu-enabled': !this.disabled,
'menu-side-right': this.isRightSide, 'menu-side-right': isRightSide,
'menu-side-left': !this.isRightSide, 'menu-side-left': !isRightSide,
[typeClass]: true, [typeClass]: true,
} }
}; };