如何在Ionic框架中隐藏标签

I chose the ionic tab view so I can use the templating system but I can't remove the tabs. I want a view like this and I did manage to remove the header bar but I cant remove the tabs bar

我选择了ionic选项卡视图，所以我可以使用模板系统，但是我不能删除选项卡。我想要一个这样的视图，我确实删除了标题栏，但是我不能删除标签栏

This is what I got so far:

这是我到目前为止得到的:

If I hide the tabs bar (ion-tabs{display:none}) it also removes the content, which is not what I want.

如果我隐藏选项卡栏(离子选项卡{display:none})，它也会删除内容，这不是我想要的。

9 个解决方案

#1

Have a look at the Ionic tab documentation:

看看Ionic tab文件:

To hide the tabbar but still show the content, add the "tabs-item-hide" class.

要隐藏选项卡但仍然显示内容，请添加“选项卡-项目-隐藏”类。

So you would change this:

所以你要改变这个:

<div class="tabs">
  <a class="tab-item" href="#">
    Home
  </a>
  ...
</div>

to this:

:

<div class="tabs tabs-item-hide">
  <a class="tab-item" href="#">
    Home
  </a>
  ...
</div>

#2

I know that this is answered already, but there's a more "angular way" of doing this that might be helpful. It's done by using a custom directive that you can apply on views that you don't want to show the bottom tab bar.

我知道这已经有答案了，但是有一个更“角度的方法”来做这个可能会有帮助。它是通过使用自定义指令完成的，该指令可以应用于不想显示底部选项卡栏的视图。

My solution to this on my app was:

我在app上的解决方案是:

1 - Use ng-hide binded to a rootScope variable on the tab bar, so I can hide/show it in any Controller/View of my app:

1 -使用ng-hide绑定到选项卡栏上的rootScope变量，这样我可以在我的app的任何控制器/视图中隐藏/显示它:

<ion-tabs ng-hide="$root.hideTabs" class="tabs-icon-only">
    <!-- tabs -->
</ion-tabs>

2 - Create a custom directive that, when present, will hide the tab bar (and will show the tab bar again when the view is destroyed/dismissed:

2 -创建一个自定义指令，当出现时，将隐藏标签栏(当视图被销毁/解散时，将再次显示标签栏:

var module = angular.module('app.directives', []);
module.directive('hideTabs', function($rootScope) {
    return {
        restrict: 'A',
        link: function($scope, $el) {
            $rootScope.hideTabs = true;
            $scope.$on('$destroy', function() {
                $rootScope.hideTabs = false;
            });
        }
    };
});

3 - Apply it to specific views that don't need the tab bar visible:

3 -将其应用于不需要可见标签栏的特定视图:

<ion-view title="New Entry Form" hide-tabs>
    <!-- view content -->
</ion-view>

ps: I think this can be improved even further avoiding the need of the ng-hide on the <ion-tabs> declaration, letting the directive do all the "dirty work".

ps:我认为这可以得到改进，甚至可以进一步避免在 声明上使用ng-hide，让指令执行所有的“脏工作”。

#3

Daniel's answer was very close (thanks!) but didn't quite work in my case:

丹尼尔的回答非常接近(谢谢!)但在我的例子中不太管用:

1. ng-hide hides the tab content as well as the tabs (for me, anyway)
2. ng-hide隐藏标签内容和标签(不管怎样，对我来说)
3. I want to to conditionally hide the tabs by passing an expression to the directive.
4. 我想通过将表达式传递给指令有条件地隐藏制表符。

So here's my modified template:

这是我修改过的模板

<ion-tabs ng-class="{'tabs-item-hide': $root.hideTabs}" class="tabs-icon-only">
    <!-- tabs -->
</ion-tabs>

Directive (again based on Daniel's):

指示(基于Daniel的指示):

var module = angular.module('app.directives', []);
module.directive('hideTabs', function($rootScope) {
    return {
        restrict: 'A',
        link: function(scope, element, attributes) {
            scope.$watch(attributes.hideTabs, function(value){
                $rootScope.hideTabs = value;
            });

            scope.$on('$destroy', function() {
                $rootScope.hideTabs = false;
            });
        }
    };
});

Usage:

用法:

<ion-view title="New Entry Form" hide-tabs='some-bool-expression'>
    <!-- view content -->
</ion-view>

#4

I used dotfrank's answer and it worked like a charm, except for when I went a few layers deep in a specific tab's view and then used the back button. Going back to a view that has the directive "hideTabs = 'true'" will actually have it set to "false" unless you wrap the $watch on hideTabs in the $ionicView.beforeEnter event.

我使用了dotfrank的答案，它就像一个魅力，除了当我在一个特定的标签的视图中深入几层，然后使用后退按钮。回到有指令“hideTabs = 'true'”的视图，实际上会将它设置为“false”，除非您将hideTabs上的$watch包装在$ionicView中。beforeEnter事件。

.directive('hideTabs', function($rootScope) {
    return {
        restrict: 'A',
        link: function(scope, element, attributes) {

            scope.$on('$ionicView.beforeEnter', function() {
                scope.$watch(attributes.hideTabs, function(value){
                    $rootScope.hideTabs = value;
                });
            });

            scope.$on('$ionicView.beforeLeave', function() {
                $rootScope.hideTabs = false;
            });
        }
    };
});

Hope this helps! (also, this is my first answer... so if I'm completely missing something, then forgive my noobness).

希望这可以帮助!(另外，这是我的第一个答案……)所以如果我完全错过了什么，那么请原谅我的无知)。

#5

Dunc's answer is very good, but does not work the best when it comes to Ionic's view caching.

Dunc的答案很好，但在Ionic的视图缓存方面效果不是最好的。

The $destroy event is used which will set the $rootScope variable when the parent view is torn down.

$destroy事件被使用，当父视图被拆除时，它将设置$rootScope变量。

However, as others have commented, this $destroy event happens too late when returning to a page that needs tabs. This causes a delayed jumpy behavior on page transitions. Additionally, the ion-content .has-tabs class does not get added until after the delay, so any content is covered by the tabs as well.

但是，正如其他人所评论的，当返回需要制表符的页面时，这个$destroy事件发生得太晚了。这将导致页面转换中出现延迟的跳跃行为。此外，ion-content .has-tabs类直到延迟之后才被添加，因此选项卡也覆盖了所有内容。

Instead we should reset on the Ionic event beforeLeave, to ensure the transition's digest cycle gets the variable change in time.

相反，我们应该在foreleave之前重置离子事件，以确保转换的摘要循环在时间上得到变量的改变。

Same template:

同样的模板:

<ion-tabs ng-class="{'tabs-item-hide': $root.hideTabs}" class="tabs-icon-only">
    <!-- tabs --> 
</ion-tabs>

Directive (again based on Dunc's):

指令(同样基于Dunc):

.directive('hideTabs', function($rootScope) {
  return {
      restrict: 'A',
      link: function(scope, element, attributes) {
          scope.$watch(attributes.hideTabs, function(value){
              $rootScope.hideTabs = value;
          });

          scope.$on('$ionicView.beforeLeave', function() {
              $rootScope.hideTabs = false;
          });
      }
  };
});

Usage is the same -

用法是一样的

<ion-view title="New Entry Form" hide-tabs='some-bool-expression'>
    <!-- view content -->
</ion-view>

For a bonus, if you're using SASS, you can get a nice popup transition for your tab bar if you add this to your .scss file:

作为奖励，如果你使用SASS，你可以为你的标签栏得到一个很好的弹出过渡如果你把这个添加到你的。scss文件:

.tabs {
  -webkit-transition: all linear 0.2s;
  transition: all linear 0.2s;
}

.tabs-item-hide > .tabs{
  -webkit-transition: all linear 0.2s;
  transition: all linear 0.2s;
  bottom: -$tabs-height;
  display: flex;
}

If using vanilla CSS, replace $tabs-height with the height of your bar.

如果使用香草CSS，将$tabs-height替换为bar的高度。

#6

Ng-if has been the only directive that has worked for me.

Ng-if是唯一对我有效的指令。

ng-if="$root.showList"

Hope it helps.

希望它可以帮助。

#7

Unfortunately the current answers have a lag before showing the tabs again. It seems the $scope gets $destroyed a bit late and when you go to a page that should have tabs, there's a lag before they're reshown. However, paul's link brought me to a better solution which has no lag:

不幸的是，当前的答案在再次显示标签之前有一个延迟。$scope似乎有点晚了，当你进入一个应该有选项卡的页面时，在它们被重新显示之前有一个延迟。但是，paul的链接给我带来了一个没有延迟的更好的解决方案:

app.controller('applicationController', function ($state, $rootScope) {  

    var hideTabsStates = ['tab.inbox-convo']; 

    $rootScope.$on('$ionicView.beforeEnter', function () {
        $rootScope.hideTabs = ~hideTabsStates.indexOf($state.current.name)
    });
});

<ion-tabs ng-class="{ 'tabs-item-hide': $root.hideTabs }">

#8

Simple CSS override worked for me example in codepen, my requirement was to hide main tabs for child/inner views, e.g popup views + this does not affect secondary tabs:

简单的CSS覆盖在codepen中对我起了作用，我的要求是隐藏子/内部视图的主标签。g弹出视图+这并不影响辅助选项卡:

<style>
    /* hide the main tabs */
    .tab-nav{
        display: none;
    }
    /* this takes care of the access margins bottom or top tabs */
    .has-tabs, .has-tabs-top, .has-tabs-bottom {
        bottom: 0px !important;
        top: 0px !important;
    }   
</style>

OR in directive example:

或指令的例子:

angular.element(".tab-nav").css("display":"none");

Dont forget:

不要忘记:

<ion-view hide-nav-bar="true"></ion-view>
<ion-content has-footer="false" has-header="false></ion-content>

#9

https://github.com/driftyco/ionic/issues/395 It appears that the tabs are kind tricky in Ionic. Check the link, it worked great for me

@ https://github.com/drift /ionic/issues/395似乎在Ionic中标签有点棘手。看看链接，它对我很有用