web-dev-qa-db-ja.com

Ionicフレームワークは特定のページのタブを非表示にします

ionicフレームワークを使用していて、新しいタブアプリケーションを作成しました。

私がする必要があるのは、タブを持たないデフォルトのページまたはホームページを作成し、残りのすべてのページを通常どおりに設定することです。

ランディングページのように。

これどうやってするの？

ionic-frameworkionic
15
Satch3000

最近のionicバージョンでは、これは設定することで簡単に実現できます

$ionicTabsDelegate.showBar(false);

サンプルコード：

.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);
      });
    }
  };
})

[〜＃〜]ソース[〜＃〜]

8
Ladmerc

プランカーデモ

まず、ランディングページまたはデフォルトページ用に別の$stateProviderを定義します[他のページ用に$stateProviderをすでに定義していると思います]app.js。app.jsファイルは次のようになります。

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');
});

また、タブのhtmlページを作成します。

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>

また、<ion-nav-bar>を使用して、landingページで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>
8
Muhsin

これを試すのはとても簡単です

<!-- 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;
                });
            }
        };
    })
7
Pritish

これは簡単な例です…

ステップ1）デフォルトのアプリでは、タブバーにデフォルトで3つのタブがあります。つまり、home、about、contactです。 。ユーザーが[概要]タブに移動したときにタブバーを非表示にしたいとします。そのためには、次の場所にあるabout.tsファイルに変更を加える必要があります。

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';
  }

ステップ2）about.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);
  }
2
core114