Question

点击ion-icon后，我尝试使用自定义src更改ion-tab-button

我尝试过的操作，使用（单击）事件来触发功能并更改离子图标内的[src] =“ ...”

有什么适当的方法可以改变这种骇客风格？

HTML：

 <ion-tabs>
  <ion-tab-bar slot="bottom">
    <ion-tab-button tab="news/home" (click)="changeNewsIcon()">
      <ion-icon [src]="newsIcon"></ion-icon>
      <ion-label class="tab-title">News</ion-label>
    </ion-tab-button>
    <ion-tab-button tab="user" (click)="changeSearchIcon()">
      <ion-icon [src]="searchIcon"></ion-icon>
      <ion-label class="tab-title">Search</ion-label>
    </ion-tab-button>
    <ion-tab-button tab="networking" (click)="changeNetworkIcon()">
      <ion-icon [src]="notiIcon"></ion-icon>
      <ion-label class="tab-title">Networking</ion-label>
    </ion-tab-button>
    <ion-tab-button tab="chat" (click)="changeChatIcon()">
      <ion-icon [src]="chatIcon"></ion-icon>
      <ion-label class="tab-title">Chat</ion-label>
    </ion-tab-button>
    <ion-tab-button tab="profile" (click)="changeProfIcon()">
      <ion-icon [src]="profIcon"></ion-icon>
      <ion-label class="tab-title">Profile</ion-label>
    </ion-tab-button>
  </ion-tab-bar>
</ion-tabs>

TS：

newsIcon = './assets/tabs/home.svg';
searchIcon = './assets/tabs/search.svg';
notiIcon = './assets/tabs/group.svg';
chatIcon = './assets/tabs/chat.svg';
profIcon = './assets/tabs/user.svg';

changeNewsIcon(): void {    
  // change news icon
  this.newsIcon = './assets/tabs/clicked-home.svg';

  // reset others icon
  this.searchIcon = './assets/tabs/search.svg';
  this.notiIcon = './assets/tabs/group.svg';
  this.chatIcon = './assets/tabs/chat.svg';
  this.profIcon = './assets/tabs/user.svg';
}

changeSearchIcon(): void {
  // change user icon
  this.searchIcon = './assets/tabs/clicked-search.svg';

  // reset others icon
  this.newsIcon = './assets/tabs/home.svg';
  this.notiIcon = './assets/tabs/group.svg';
  this.chatIcon = './assets/tabs/chat.svg';
  this.profIcon = './assets/tabs/user.svg';
}

...

感谢任何人的帮助

Answer 1

我不确定我的方法会更好，但这可能是做同一件事的另一种方式。

HTML：

<ion-tabs>
    <ion-tab-bar slot="bottom">
      <ion-tab-button tab="news/home" (click)="changeNewsIcon()">
        <ion-icon [src]="isNewsSelected ? newsIcon : clickedNewsIcon"></ion-icon>
        <ion-label class="tab-title">News</ion-label>
      </ion-tab-button>
      <ion-tab-button tab="user" (click)="changeSearchIcon()">
        <ion-icon [src]="isSearchSelected ? searchIcon clickedSearchIcon"></ion-icon>
        <ion-label class="tab-title">Search</ion-label>
      </ion-tab-button>
    </ion-tab-bar>
</ion-tabs>

TypeScript组件：

export class SomeComponent {

  newsIcon = './assets/tabs/home.svg';
  clickedNewsIcon = './assets/tabs/clicked-home.svg';
  searchIcon = './assets/tabs/search.svg';
  clickedSsearchIcon = './assets/tabs/clicked-search.svg';

  isNewsSelected = false;
  isSearchSelected= false;

  changeNewsIcon(): void {    
    resetAll();
    this.isNewsSelected = true;
  }

  changeSearchIcon(): void {
   resetAll();
   this.isSearchSelected = true;
  }

  resetAll(){
    this.isNewsSelected = false;
    this.isSearchSelected= false;
  }
}

Answer 2

之前，我尝试使用离子图标将css颜色放入ion-tab-button和ion-icon中。颜色更改符合预期，但没有使用自定义图标。

<ion-tab-button tab="news/home" style="color: blue">
  <ion-icon name="home"></ion-icon>
  <ion-label class="tab-title">News</ion-label>
</ion-tab-button>

一天后，我尝试检查如果我们喜欢此方法，为什么自定义图标不会更改颜色。然后，我尝试在Adobe Illustrator CC中检查Ionic SVG图标层。就是了。

如您所见，第1层（离子图标）中有<path>

问题是我的SVG文件。要使此属性与CSS属性配合使用，我只需要编辑图层。

这是编辑图层后的结果，按预期方式运行：）

解决方案：您只需要添加颜色CSS并获取正确的SVG图标层

此外，我将更新选项卡处于活动状态时如何使用自定义图标。

Answer 3

html首位

index.js

TYPESCRIPT ：

<ion-tabs>
  <ion-tab-bar slot="bottom">
    <ion-tab-button tab="home" (click)="changeIcon('home')">
      <ion-icon [hidden]="!activeHomepage" name="md-homepage"></ion-icon>
      <ion-icon [hidden]="activeHomepage" name="md-homepage-inactive"></ion-icon>
      <ion-label></ion-label>
    </ion-tab-button>

    <ion-tab-button tab="info" (click)="changeIcon('info')">
      <ion-icon [hidden]="!activeInfo" name="md-info"></ion-icon>
      <ion-icon [hidden]="activeInfo" name="md-info-inactive"></ion-icon>
      <ion-label></ion-label>
    </ion-tab-button>

    <ion-tab-button tab="inbox" (click)="changeIcon('inbox')">
      <ion-icon [hidden]="!activeNotification" name="md-notification"></ion-icon>
      <ion-icon [hidden]="activeNotification" name="md-notification-inactive"></ion-icon>
      <ion-label></ion-label>
    </ion-tab-button>


    <ion-tab-button tab="profile" (click)="changeIcon('profile')">
      <ion-icon [hidden]="!activeProfile" name="md-profile"></ion-icon>
      <ion-icon [hidden]="activeProfile" name="md-profile-inactive"></ion-icon>
      <ion-label></ion-label>
    </ion-tab-button>
  </ion-tab-bar>
</ion-tabs>

添加此功能：

activeHomepage = false;
  activeInfo = false;
  activeNotification = false;
  activeProfile = false;

  constructor() {
    this.activeHomepage = true;
  }

result 这很简单并且可以正常工作。谢谢：）

带自定义图标的离子4更改离子选项卡按钮

3 个答案: