2016-01-23 19 views
4

Как скрыть навигационную панель с вкладками в Ionic 2?Как скрыть навигационную панель с вкладками в Ionic 2?

Я только хочу скрыть это на одной из страниц, за исключением других.

<ion-navbar *navbar > 
    <ion-title>Item Details</ion-title> 
</ion-navbar> 

Я попытался hide-nav-bar="true", но он не работает.

+0

Его проблема с ionic2 https://github.com/driftycoion/issues/5556 – davyzhang

ответ

0

У Hi Ionic2 есть кнопка Create Hide Back, вы можете попробовать это. Код приведен ниже

<ion-navbar *navbar hideBackButton> 
    <ion-title>Item Details</ion-title> 
    </ion-navbar> 
+0

Это только скроет кнопку «Назад», а не скрывает всю панель навигации или навигационные вкладки. – Jack

0

Вот обходной путь, который скрывает нав-бар:

//hide nav bar when we enter the page 
    onPageWillEnter() { 
     document.getElementsByTagName("ion-navbar-section")[0].style.display = "none"; 
    } 

//show nav bar when we leave the page 
    onPageDidLeave() { 
     document.getElementsByTagName("ion-navbar-section")[0].style.display = "block"; 
    } 

Кредита Marcus-Robinson здесь: https://github.com/driftyco/ionic/issues/5556

5

С закладке вы можете сделать:

this.nav.parent.parent.setRoot(LoginPage); 

До:

Nav -> Вкладки -> somepage

После того, как:

нав -> LoginPage

нав является корнем всех навигационных стеков в ионных 2

Кроме того, я odal хорошо работает для ситуации, когда вы хотите показать детали элемента списка в новом представлении без вкладок навигации или навигационной панели, занимающей ценное пространство экрана.

В настоящее время я не думаю, что есть способ скрыть вкладки, когда на дочернем представлении страницы вкладок, кроме использования CSS. Если вы решите пойти с параметром CSS, я бы предложил использовать атрибут Angler ngClass https://angular.io/docs/ts/latest/api/common/index/NgClass-directive.html, чтобы установить класс, чем скрыть вкладки nav или nav bar.

+1

Работает также в 2.0.0-rc.2 – Guus

+0

Но это по существу означает, что у вас больше нет кнопки «Назад», например, чтобы вернуться на страницу с вкладками, на которых вы что-то нажали, например, на странице с подробной информацией. Имо, возможность скрыть вкладки на определенных страницах будет полезна, так как функциональность задней панели полезна. – Johncl

+0

@Johncl Я получаю то, что вы говорите, но imo модальный был бы лучше подходит в этой ситуации, большую часть времени в любом случае. Конечно, будут исключения. – Jack

0

Другой способ - сделать это с помощью css. Вы можете добавить следующий код на constructor

tabBarElement: any; 

    constructor(
    public navCtrl: NavController) { 

    if (document.querySelector('.tabbar')) { 
     this.tabBarElement = document.querySelector('.tabbar.show-tabbar'); 
    } 


    } 

    ionViewWillEnter() { 
    if (this.tabBarElement) { 
     this.tabBarElement.style.display = 'none'; 
    } 

    } 

    ionViewWillLeave() { 
    if (this.tabBarElement) { 
     this.tabBarElement.style.display = 'flex'; 
    } 

    } 
0

немного поздно к партии, однако, это работает для меня:

page-<page-name> ion-navbar { 
    display: none !important; 
} 

Это скрывает только для данной страницы, без белого пространства или проблемы с запасом.