Question

给出Ionic 3中的一组标签，例如：

<ion-tabs tabsHighlight="true">
<ion-tab [root]="tab1Root" tabTitle="News" tabIcon="home"></ion-tab>
<ion-tab [root]="tab2Root" tabTitle="Agenda" tabIcon="time"></ion-tab>
<ion-tab [root]="tab3Root" tabTitle="Album" tabIcon="image"></ion-tab>
</ion-tabs>

tabsHighlight属性设置为true，完美无缺。然而，由于样式，我希望小“高亮条带”在特定选项卡上消失。现在我真的不在乎它是如何消失的，它可能会消失或什么的。（如果它只是变成宽度较小的几个像素就足够了。）

但是，由于这个带有.tab-highlight和.animate类的元素是由Ionic添加的，所以我不知道如何访问这个元素。在任何地方我都会通过ViewChild访问Angular中的元素，但是，为此，我必须标记元素，例如使用＃my-ref，我不能这样做，因为它是由Ionic添加的。

更改tabsHightlight属性也不起作用。显然，一旦渲染了这个东西，就不会再次检查该属性。（据我的测试建议。）任何帮助都非常感激。

Answer 1

您可以在tab-highlight中为app.scss设置样式，但它适用于整个应用。你不能只在css中为特定的标签做这件事。你需要写一些逻辑代码：
在tabs.html：

<ion-tabs tabsHighlight="true">
    <ion-tab [root]="tab1Root" tabTitle="News" (ionSelect)="showHighlight()" tabIcon="home"></ion-tab>
    <ion-tab [root]="tab2Root" tabTitle="Agenda" (ionSelect)="hideHighlight()" tabIcon="time"></ion-tab> //Assume that you want to hide tab-highlight in this tab
    <ion-tab [root]="tab3Root" tabTitle="Album" (ionSelect)="showHighlight()()" tabIcon="image"></ion-tab>
</ion-tabs>

在tabs.ts：

highlightElement: HTMLElement;
ionViewDidLoad() {
   this.highlightElement = <HTMLElement>document.querySelector(".tabs .tab-highlight"); 
}
showHighlight(){
    if(this.highlightElement)
      this.highlightElement.style.display = "block";
}
hideHighlight(){
    if(this.highlightElement)
      this.highlightElement.style.display = "none";
}

Answer 2

如果它生成类似.tab-highlight的类，那么您可以访问它。

app.scss

.tab-highlight{
   //give your change here
}

注意：大多数情况下，当您覆盖Ionic默认设置时，需要使用!important。

隐藏选项卡 - 突出显示特定选项卡Ionic 3

2 个答案: