隐藏导航栏也隐藏导航按钮。我想保留视图标题和离子导航按钮 [英] hide-nav-bar hides nav-buttons too. I want to retain the view title and the ion-nav-buttons

问题描述

我添加了hide-nav-bar属性，希望隐藏个人资料页面上的导航栏。它会删除整个导航栏以及按钮和标题。

Profile.html

 < ion-view view-title =Profilehide-nav-bar =true> 
< ion-content> 
< / ion-content> 
< ion-footer-bar align-title =leftclass =bar-balanced> 
< a class =button-icon titlehref => 
< i class =icon ion-ios-telephone-outline>< / i> 
< / a> 
< / ion-footer-bar> 
< / ion-view> 
  

侧面选单程式码片段：

 < ion-side-menu-content> 
< ion-nav-bar class =bar-balanced> 
< ion-nav-back-button> 
< / ion-nav-back-button> 
 
< ion-nav-buttons side =left> 
< button class =button button-icon button-clear ion-naviconmenu-toggle =left> 
< / button> 
< / ion-nav-buttons> 
< / ion-nav-bar> 
< ion-nav-view name =menuContent>< / ion-nav-view> 
< / ion-side-menu-content>这是否有任何CSS或Angular解决方法？
 
 
 
 
 
 
 
 < b 
我想保留nav-back-button和nav-buttons以及视图标题。我如何做到这一点？
 
 
 
我研究了几种方法，但这些需要cordova插件，并且iOS特定像： http://ionicframework.jp/tutorials/fullscreen-apps/  
 
 
 
和
 
 
 
这个： http://codepen.io / ciastek / pen / lxmyC  
 
 
 
这些不能达到我的目的。请建议一个类似css头栏的替代方法 - 透明的或一些$ ionic委托，使用angular只删除bar而不是按钮。
解决方案
 
好的，这是事情，做一个css类
  .make-border-trasparent {
 background-color：rgba（0，0，0，0.0）！important; 
 border：none; 
 .bar.bar-light {
 background-color：rgba（0,0,0,0）！important; 
} 
} 
  
现在使用 ng-class  with conidtion 
 < ion-nav-bar ng-class ={'make-border-trasparent'：hideBar，'bar-balanced'：！hideBar}> 
  
对于哪个页面你想让nav bar完全透明， / p> 
 
 
  $ rootScope.hideBar = true; 
  
这将只使你的酒吧总trasparent。按钮和其他内容仍会显示在导航栏上。
 
I added hide-nav-bar attribute expecting to hide the navigation bar on profile page. It removes the entire navigation bar along with buttons and title.

Profile.html
<ion-view view-title="Profile" hide-nav-bar="true">
    <ion-content>
    </ion-content>
    <ion-footer-bar align-title="left" class="bar-balanced">
        <a class="button-icon title" href="">
            <i class="icon ion-ios-telephone-outline"></i>
        </a>
    </ion-footer-bar>
</ion-view>
Side-menu code snippet :
 <ion-side-menu-content>
        <ion-nav-bar class="bar-balanced">
            <ion-nav-back-button>
            </ion-nav-back-button>

            <ion-nav-buttons side="left">
                <button class="button button-icon button-clear ion-navicon" menu-toggle="left">
                </button>
            </ion-nav-buttons>
        </ion-nav-bar>
        <ion-nav-view name="menuContent"></ion-nav-view>
    </ion-side-menu-content>
Is there any CSS or Angular workaround for this?

I want to keep the nav-back-button and nav-buttons along with the view title. How do I do it?

I have researched into a few methods,but these need cordova plugin and are iOS specific like : http://ionicframework.jp/tutorials/fullscreen-apps/

and also

this: http://codepen.io/ciastek/pen/lxmyC

These don't serve my purpose. Please suggest an alternative like a css header bar-transparent or some $ionic delegate that works with angular to remove only the bar and not the buttons.
解决方案
Ok, here is the thing, make a css class 
.make-border-trasparent{
  background-color: rgba(0, 0, 0, 0.0) !important;
  border: none;
  .bar.bar-light {
    background-color: rgba(0,0,0,0) !important;
  }
}
Now add this class to your nav bar using ng-class with conidtion
<ion-nav-bar ng-class="{'make-border-trasparent': hideBar,'bar-balanced': !hideBar }">
And for which page you want to make nav bar total transparent,write this line on that particular controller
$rootScope.hideBar = true;
This will make only your bar total trasparent. Buttons and other things will remain visible on navigation bar.

                        
这篇关于隐藏导航栏也隐藏导航按钮。我想保留视图标题和离子导航按钮的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！