离子2侧面菜单总是可见 [英] Ionic 2 side menu always visible

问题描述

当我的应用程式加载到平板电脑时，我必须在标题列中显示侧栏选单和隐藏选单图示。我试了很多，但没有成功。

I have a requirement to always display side menu and hide menu icon in the title bar when my app is loaded in tablet devices. I tried a lot but no success. Can anyone though some light here?

推荐答案

我想你正在寻找 showWhen 和 hideWhen 属性。文档此处。确实，有一个平板电脑 平台。但是你会遇到这样的情况：当用户点击菜单外面的时候，他关闭它。

I think you are looking for the showWhen and hideWhen properties. Documentation here. Indeed, there is a tablet platform. But you will be confronted with this : when a user clicks outside a menu, he closes it.

正如我解释这里，我会做什么这样的行为是在菜单内容中使用组件包装并使用 showWhen 属性在 tablet 在< ion-content> 中。

As I explained here, what I would do to have a such behavior is to use a component wrapper inside the menu content and use this same wrapper with a showWhen property on tablet in the <ion-content>.

编辑：添加代码来说明我提出的解决方案 >

Cordova CLI: 6.2.0 
Ionic Framework Version: 2.0.0-rc.3
Ionic CLI Version: 2.1.8
Ionic App Lib Version: 2.1.4
Ionic App Scripts Version: 0.0.45
ios-deploy version: Not installed
ios-sim version: Not installed
OS: Linux 3.19
Node Version: v6.9.1
Xcode version: Not installed

应用程式

./ src / app / app.component.html：

App

./src/app/app.component.html :

<ion-menu
    [content]="root"
>
    <ion-header>
        <ion-toolbar>
            <ion-title>
                Menu
            </ion-title>
        </ion-toolbar>
    </ion-header>
    <ion-content>
        <sitemap-component
            hideWhen="tablet, phablet"
        >
        </sitemap-component>
    </ion-content>
</ion-menu>
<ion-nav
    #root
    [root]="rootPage"
>
</ion-nav>

./ src / app / app.component.ts：

./src/app/app.component.ts :

import { Component } from '@angular/core';
import { Platform } from 'ionic-angular';
import { StatusBar, Splashscreen } from 'ionic-native';

import { HomePage } from '../pages/home/home';


@Component({
  templateUrl: "app.component.html"
})
export class MyApp {
  rootPage = HomePage;

  constructor(platform: Platform) {
    platform.ready().then(() => {
      // Okay, so the platform is ready and our plugins are available.
      // Here you can do any higher level native things you might need.
      StatusBar.styleDefault();
      Splashscreen.hide();
    });
  }
}

./ src / app / app.module.ts ：

./src/app/app.module.ts :

import { NgModule, ErrorHandler } from '@angular/core';
import { IonicApp, IonicModule, IonicErrorHandler } from 'ionic-angular';
import { MyApp } from './app.component';
import { HomePage } from '../pages/home/home';

import { SitemapComponent } from '../components/sitemap/sitemap.component';
import { ContentComponent } from '../components/content/content.component';

@NgModule({
  declarations: [
    MyApp,
    HomePage,
    SitemapComponent,
    ContentComponent
  ],
  imports: [
    IonicModule.forRoot(MyApp)
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    MyApp,
    HomePage,
    SitemapComponent,
    ContentComponent
  ],
  providers: [{provide: ErrorHandler, useClass: IonicErrorHandler}]
})
export class AppModule {}

主要内容（平台无关）

。 /src/components/content/content.component.html：

Main content (platform independent)

./src/components/content/content.component.html :

<p>
    Here is the main content.
</p>
<button
    ion-button
    menuToggle
>
    Menu
</button>

./ src / components / content / content.component.scss：

./src/components/content/content.component.scss :

content-component {
}

./ src / components / content / content.component.ts：

./src/components/content/content.component.ts :

import {Component} from '@angular/core'

@Component(
    {
        selector    : 'content-component'
      , templateUrl : 'content.component.html'
    }
)
export class ContentComponent
{
    constructor()
    {
    }
}

Sitemap（根据平台在菜单或主要内容部分）

./ src / components / sitemap / sitemap.component.html：

Sitemap (in menu or in main content part, according to the platform)

./src/components/sitemap/sitemap.component.html :

<p
    hideWhen="tablet, phablet"
>
    Here is the menu content on a platform that is neither a tablet nor a phablet.
</p>
<p
    showWhen="tablet, phablet"
>
    Here is the menu content on a platform that is a tablet or a phablet.
</p>
<ion-list
>
    <ion-item
        *ngFor="let item of item_array"
    >
        {{item}}
    </ion-item>
</ion-list>

./ src / components / sitemap / sitemap.component.scss：

./src/components/sitemap/sitemap.component.scss :

sitemap-component {
}

./ src / components / sitemap / sitemap.component.ts：

./src/components/sitemap/sitemap.component.ts :

import {Component} from '@angular/core'

@Component(
    {
        selector    : 'sitemap-component'
      , templateUrl : 'sitemap.component.html'
    }
)
export class SitemapComponent
{
    item_array =
    [
        "foo"
      , "bar"
    ]

    constructor()
    {
    }
}

首页

./ src / pages / home / home.html：

Home page

./src/pages/home/home.html :

<ion-header>
    <ion-navbar>
        <ion-title>
            Ionic Blank
        </ion-title>
    </ion-navbar>
</ion-header>
<ion-content
    padding
>
    <div
        showWhen="tablet, phablet"
    >
        <ion-row>
            <ion-col
                width-20
            >
                <sitemap-component>
                </sitemap-component>
            </ion-col>
            <ion-col
                width-80
            >
                <content-component>
                </content-component>
            </ion-col>
        </ion-row>
    </div>
    <div
        hideWhen="tablet, phablet"
    >
        <content-component>
        </content-component>
    </div>
</ion-content>

./ src / pages / home / home.scss：

./src/pages/home/home.scss :

page-home {
}

./ src / pages / home / home.ts：

./src/pages/home/home.ts :

import { Component } from '@angular/core';

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {
    constructor()
    {
    }
}

希望这有助于！

这篇关于离子2侧面菜单总是可见的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！