如何在Ionic 3中以編程方式隱藏橫向模式下的標題和標籤？

我在肖像模式下有一個視圖，在橫向模式下我想顯示圖表，並隱藏標籤和標題（全屏模式，不滾動）。我在橫向模式視圖會是這個樣子：如何在Ionic 3中以編程方式隱藏橫向模式下的標題和標籤？

<div showWhen="landscape" class="chart-settings split-container"> 
<ion-toolbar showWhen="landscape"> 
    <ion-grid> 
    <ion-row> 
     <ion-col col-6> 
     <ion-item> 
      <ion-label>Period</ion-label> 
      <ion-select [(ngModel)]="period"> 
      //options 
      </ion-select> 
     </ion-item> 
     </ion-col> 
     <ion-col col-6> 
     <ion-item> 
      <ion-label>Won/Lost</ion-label> 
      <ion-select [(ngModel)]="gender"> 
      //options 
      </ion-select> 
     </ion-item> 
     </ion-col> 
    </ion-row> 
    </ion-grid> 
</ion-toolbar> 
<div class="flexChart"> 
    <div id="chartdiv" [style.width.%]="100" [style.height.%]="100"></div> 
</div>

我使用Flex填寫頁面，並創建「無全屏滾動效應」。

感謝

來源

2017-07-01 ACES

那麼它似乎還有這個： http://ionicframework.com/docs/api/platform/Platform/

它具有：

isPortrait() 
isLandscape()

所以你可以做： platform.isPortrait()或platform.isLandscape() 如果你注入平臺引入構造。

與*NgIf結合本：
https://angular.io/guide/template-syntax#ngif

CSS溢出，overflow-x，overflow-y是你期待的預防我們滾動只要它是一個塊級容器：
https://developer.mozilla.org/en/docs/Web/CSS/overflow

UPDATE

根據此評論：

這是我最初的想法。與此問題是，它離開填充頂部。我解決了它的配置風格，但它似乎很骯髒的解決方案給我

您可以通過獲取Content的情況下解決這個填充問題，並調用resize()方法是這樣的：

import { Component, ViewChild } from '@angular/core'; 
import { Content } from 'ionic-angular'; 

@Component({...}) 
export class MyPage{ 
    @ViewChild(Content) content: Content; 

    public yourMethod(): void { 
    this.content.resize(); 
    } 
}

https://ionicframework.com/docs/api/components/content/Content/#resize

告訴內容重新計算其尺寸。在動態添加/刪除頁眉，頁腳或製表符後，這應該被稱爲。

來源

2017-07-04 21:32:54 JGFMK

這是我最初的想法。問題在於它在頂部留下填充。我通過配置樣式來解決它，但對我來說這似乎很髒。 – ACES

我已經對您的帖子進行了編輯，包括如何解決用戶提到的填充問題。希望你不要介意:) – sebaferreras

您可以檢查橫向或縱向與平臺，那麼你可以從模板得到資產淨值的裁判：

<ion-header> 
    <ion-navbar #navBar> 
    ... 
    </ion-navbar> 
</ion-header>

，並與它的引用調用setHidden(true)在組件：

@ViewChild('navBar') navBar: Navbar 
// call in proper place 
this.navBar.setHidden(true)

爲標籤，我想你可以用同樣的方法做

來源

2017-08-23 13:30:41 Mavlarn

如何在Ionic 3中以編程方式隱藏橫向模式下的標題和標籤？

回答

相關問題