Ionic Framework ukryj karty na określonej stronie

Question

Używam jonowego frameworku i stworzyłem nową aplikację kart.

Co muszę zrobić, to mieć stronę jako domyślną lub stronę główną, która nie ma kart, a następnie całą resztę, aby mieć zakładki jak zwykle.

Jak strona docelowa.

Jak mogę to zrobić?

Answer 1

W ostatnich wersjach jonowych, to łatwo osiągnąć poprzez ustalenie

$ionicTabsDelegate.showBar(false); 

Przykładowy kod:

.directive('hideTabs', function($rootScope, $ionicTabsDelegate) { 
    return { 
    restrict: 'A', 
    link: function($scope, $el) { 
     $scope.$on("$ionicView.beforeEnter", function() { 
     $ionicTabsDelegate.showBar(false); 
     }); 
     $scope.$on("$ionicView.beforeLeave", function() { 
     $ionicTabsDelegate.showBar(true); 
     }); 
    } 
    }; 
}) 

SOURCE

Answer 2

Plunker Demo

najpierw zdefiniować oddzielny $stateProvider do lądowania lub domyślnej strony [myślę, że już określił $stateProvider na innych stronach] w app.js .Powierzchnia app.js plik powinien być taki,

app.js

var app = angular.module('myApp', ['ionic']); 

app.config(function($stateProvider, $urlRouterProvider) { 
    $stateProvider 
    .state('tabs', { 
     url: '/tab', 
     controller: 'TabsCtrl', 
     templateUrl: 'tabs.html' 
    }) 
    .state('tabs.home', { 
     url: '/home', 
     views: { 
     'home-tab': { 
      controller: 'homeCtrl', 
      templateUrl: 'home.html' 
     } 
     } 
    }) 
    .state('tabs.settings', { 
     url: '/settings', 
     views: { 
     'settings-tab': { 
      controller: ' signOutCtrl', 
      templateUrl: 'settings.html' 
     } 
     } 
    }); 
    $stateProvider 
     .state('landing', { 
      url: '/landing', 
      controller: 'landingCtrl', 
      templateUrl: 'landing.html' 
    }); 

    $urlRouterProvider.otherwise('/landing'); 
}); 

Utwórz także stronę html dla kart.

tabs.html

<ion-view title="Home"> 
    <ion-nav-buttons side="left"> 
     <button class="button button-icon button-clear ion-navicon" ng-click="openMenu()"></button> 
    </ion-nav-buttons> 
    <ion-tabs class="tabs-icon-top tabs-positive"> 
     <ion-tab title="{{tab1Title}}" icon="ion-home" href="#/tab/home"> 
      <ion-nav-view name="home-tab"></ion-nav-view> 
     </ion-tab> 
     <ion-tab title="{{tab2Title}}" icon="ion-gear-a" href="#/tab/settings"> 
      <ion-nav-view name="settings-tab"></ion-nav-view> 
     </ion-tab> 
     <ion-tab title="{{tab3Title}}" href="#/landing" icon="ion-log-out"> 
     </ion-tab> 
    </ion-tabs> 
</ion-view> 

Również trzeba ukryć <ion-nav-bar> na stronie landing za pomocą hide-nav-bar="true ".

landing.html

<ion-view hide-nav-bar="true "> 
    <ion-nav-buttons side="left"> 
     <button class="button button-icon button-clear ion-navicon" ng-click="openMenu()"></button> 
    </ion-nav-buttons> 
    <ion-content padding="true"> 
     <h1 style="text-align: center;">Welcome To Landing Page</h1> 
     <a class="button icon-right ion-chevron-right button-calm" ng-click="open()">Lets Go</a> 
    </ion-content> 
</ion-view> 

Answer 3

<!-- in your tabs.html add this ng-class --> 
<ion-tabs ng-class="{'tabs-item-hide': hideTabs}"> 

</ion-tabs> 

<!-- add 'hide-tabs'in your view where you want to hide the tabs --> 
<ion-view hide-tabs> 

</ion-view> 

// in your app.js add a directive 
.directive('hideTabs', function($rootScope) { 
    return { 
     restrict: 'A', 
     link: function($scope, $el) { 
      $rootScope.hideTabs = true; 
      $scope.$on('$destroy', function() { 
       $rootScope.hideTabs = false; 
      }); 
     } 
    }; 
}) 

Answer 4

Wypróbuj prosty przykład ...

Krok 1) Domyślna aplikacja posiada trzy zakładki w pasku kart domyślnie mianowicie domu, o i kontakcie . Załóżmy, że chcemy ukryć pasek kart, gdy użytkownik przejdzie do zakładki about. W tym celu będziemy musieli dokonać zmian w pliku about.ts które można znaleźć w

about.ts

export class AboutPage { 
    tabBarElement: any; 
    constructor(public navCtrl: NavController) { 
    this.tabBarElement = document.querySelector('.tabbar.show-tabbar'); 
    } 

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

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

etap 2) temat.html

<ion-header> 
    <ion-navbar> 
     <ion-buttons left> 
     <button ion-button icon-only (click)="takeMeBack()"> 
      <ion-icon name="arrow-back"></ion-icon> 
     </button> 
    </ion-buttons> 
    <ion-title> 
     About 
    </ion-title> 
    </ion-navbar> 
</ion-header> 

<ion-content padding> 
    This is About Page Tab bar is Hidden. 
</ion-content> 
Step 3) 

about.ts

takeMeBack() { 
    this.navCtrl.parent.select(0); 
    }