Question

我有以下标签：

<ion-tab [root]="HomeTab" tabTitle="Home" icon-off="customicon" icon-on="customicon-outline"></ion-tab>

这个想法是，当选择标签时，它会显示一个图标，如果没有，则会显示另一个图标。

但是，当我使用icon-off / icon-on时，图标甚至不显示。

但使用tabIcon="customicon"有效。

我的错误是什么？

tab.html：

<ion-tabs>
  <ion-tab [root]="HomeTab" tabTitle="Home" icon-off="customicon" icon-on="customicon-outline"></ion-tab>
  <ion-tab [root]="RecentTab" tabTitle="Letzte"></ion-tab>
  <ion-tab [root]="FavTab" tabTitle="Favoriten"></ion-tab>
  <ion-tab [root]="PersonalTab" tabTitle="Mein"></ion-tab>
  <ion-tab [root]="InfoTab" tabTitle="Info"></ion-tab>
</ion-tabs>

tab.scss：

.ion-ios-customicon,
.ion-md-customicon {
  content: url(../../assets/fonts/Homeblau.svg);
  width: 24px;
  height: 32px;
  padding: 6px 4px 2px;
  opacity: 0.9;
}

.ion-ios-customicon-outline,
.ion-md-customicon-outline {
  content: url(../../assets/fonts/Homegrau.svg);
  width: 24px;
  height: 32px;
  padding: 6px 4px 2px;
  opacity: 0.9;
}

Answer 1

您可以设置自定义图标，请使用以下代码

<强> tab.html

<ion-tabs>
  <ion-tab [root]="HomeTab" tabTitle="Home" tabIcon={{homeIcon}}></ion-tab>
</ion-tabs>

<强> tab.ts

根据您的要求设置homeIcon

this.homeIcon = 'custome-home-on-icon' // < -- here you can put your condition

<强> app.csss

ion-icon {
    &[class*="custome-"] {
        // Instead of using the font-based icons
        // We're applying SVG masks
        mask-size: contain;
        mask-position: 50% 50%;
        mask-repeat: no-repeat;
        background: 'black';
        width: 1em;
        height: 1em;
    }
    // custom icons
    &[class*="custome-home-on-icon"] {
        mask-image: url('../assets/fonts/Homegrau.svg');
    }
    &[class*="custome-home-off-icon"] {
        mask-image: url('../assets/fonts/Homeblau.svg');
    }
}

我希望它为你工作......

使用图标开启/图标关闭时，离子选项卡，图标不会显示

1 个答案: