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

问题描述 投票：0回答：4

我正在尝试在单击 

ion-icon
后使用自定义 src 更改 
ion-tab-button

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

有什么合适的方法可以改变这种hackish风格吗？

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';
}

...

如果有人愿意帮忙，不胜感激

javascript angular ionic-framework ionic4
4个回答
6
投票

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

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;
  }
}
5
投票

之前，我尝试将 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图标

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

更新2：

这是有效的 html 代码：

<ion-tabs>
  <ion-tab-bar class="tab-bar" slot="bottom">
    <ion-tab-button tab="news/home">
      <ion-icon class="icon-news" src="./assets/tabs/md-custom-home.svg"></ion-icon>
      <ion-label class="tab-title">News</ion-label>
    </ion-tab-button>
    <ion-tab-button tab="search">
      <ion-icon class="icon-search" src="./assets/tabs/md-custom-search.svg"></ion-icon>
      <ion-label class="tab-title">Search</ion-label>
    </ion-tab-button>
    <ion-tab-button tab="networking">
      <ion-icon class="icon-networking" src="./assets/tabs/md-custom-networking.svg"></ion-icon>
      <ion-label class="tab-title">Networking</ion-label>
    </ion-tab-button>
  </ion-tab-bar>
</ion-tabs>

SCSS：

ion-tab-button {
  --color: #000000;
  --color-selected: #00cee5;
}

只需确保使用正确的 SVG ;)

0
投票

首先在html中：

<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;
  }

添加此功能：

 changeIcon(page) {
    if (page == 'home') {
      this.activeHomepage = true;
      this.activeProfile = false;
      this.activeNotification = false;
      this.activeInfo = false;
    } else if (page == 'info') {
      this.activeHomepage = false;
      this.activeProfile = false;
      this.activeNotification = false;
      this.activeInfo = true;

    } else if (page == 'inbox') {
      this.activeHomepage = false;
      this.activeProfile = false;
      this.activeNotification = true;
      this.activeInfo = false;
    }
    else {
      this.activeHomepage = false;
      this.activeProfile = true;
      this.activeNotification = false;
      this.activeInfo = false;
    }

  }

result 它很简单并且工作正常。谢谢你:)

0
投票

这个问题很老了，但我不喜欢这里解释的任何解决方案。所以我有新的：

在 ion-tab-button 内放置 2 个图像，其类名如“normal”和“selected”。就像 ion-tab-button 在被选择时将具有“tab-selected”类一样，通过 css 将根据该类隐藏和显示每个图像。

示例：

html

<ion-tab-button tab="products">
    <img class="normal" src="/assets/img/tabs/products.svg" width="30" height="30" />
    <img class="selected" src="/assets/img/tabs/products-selected.svg" width="30" height="30" />
    {{"MENU.PRODUCTS_SHORT" | transloco}}
</ion-tab-button>

CSS

ion-tab-button{
    img.normal{
        display: block;
    }
    img.selected{
        display: none;
    }
    &.tab-selected{
        img.normal{
            display: none;
        }
        img.selected{
            display: block;
        }
    }
}

我认为这种方法非常简单，并且可以避免在选择选项卡而不单击它时出现问题。

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.