在ionic2中使用带有选项卡的自定义图标

Question

我需要在离子2中使用带有标签的海关图标.

此外,如果选中该选项卡,我需要更改标题颜色和图标.

例:

离子标签

Answer 1

这是我发现的最简单的方法,来自https://forum.ionicframework.com/t/anyway-to-custom-the-tabbars-icon-with-my-own-svg-file/46131/的论坛36.

在app.scss文件中,添加以下代码:

ion-icon {
    &[class*="custom-"] {
        // Instead of using the font-based icons
        // We're applying SVG masks
        mask-size: contain;
        mask-position: 50% 50%;
        mask-repeat: no-repeat;
        background: currentColor;
        width: 1em;
        height: 1em;
    }
    // custom icons
    &[class*="custom-icon1"] {
        mask-image: url(../assets/img/customicon1.svg);
    }
    &[class*="custom-icon2"] {
        mask-image: url(../assets/img/customicon2.svg);
    }
    &[class*="custom-icon3"] {
        mask-image: url(../assets/img/customicon3.svg);
    }
}

然后在模板中,您可以使用以下HTML来创建图标:

<ion-icon class="custom-icon1"></ion-icon>

在其他问题中,人们建议使用基于字体的方法.这个答案虽然使用起来要复杂得多,但只要你不添加数百个图标就应该没问题.需要注意的是,每个图像都作为单独的请求发送,与字体方法一样,所有图像都包含在一个文件中,因此效率会更高一些.

Answer 2

3个海关图标的例子

scss文件

.tabbar, .tabs-ios, .tabs-md , .tabs-wp{
        .tab-button-icon {
            background-repeat:no-repeat;
            background-position:center;
            height:24px;
            width:24px;
            background-size:contain;
            -webkit-background-size: contain;
            -moz-background-size: contain;
            -o-background-size: contain;
            &:before {
                display:none;
            }
        }
    }

    .tabs-ios {
      a[aria-selected=false]{
         .tab-button-icon[ng-reflect-name=categories], .tab-button-icon[aria-label="categories"] {
          background-image: url(../assets/img/categories_inactive.png);
        }
        .tab-button-icon[ng-reflect-name=home], .tab-button-icon[aria-label=home] {
          background-image: url(../assets/img/explore_inactive.png);
        }
        .tab-button-icon[ng-reflect-name=hot], .tab-button-icon[aria-label=hot] {
          background-image: url(../assets/img/hot_inactive.png);
        }
      }
     a[aria-selected=true] {
       //führ eventuellen text
       //span {
          //color: #f00; //whatever colour you want to use for the text
        //}
        .tab-button-icon[ng-reflect-name=categories], .tab-button-icon[aria-label=categories] {
          background-image: url(../assets/img/categories_active.png);
        }
        .tab-button-icon[ng-reflect-name=home], .tab-button-icon[aria-label=home] {
          background-image: url(../assets/img/explore_active.png);
        }
        .tab-button-icon[ng-reflect-name=hot], .tab-button-icon[aria-label=hot] {
          background-image: url(../assets/img/hot_active.png);
        }
      }
    }

    .tabs-md {
      a[aria-selected=false]{
         .tab-button-icon[ng-reflect-name=categories], .tab-button-icon[aria-label="categories"] {
          background-image: url(../assets/img/categories_inactive.png);
        }
        .tab-button-icon[ng-reflect-name=home], .tab-button-icon[aria-label=home] {
          background-image: url(../assets/img/explore_inactive.png);
        }
        .tab-button-icon[ng-reflect-name=hot], .tab-button-icon[aria-label=hot] {
          background-image: url(../assets/img/hot_inactive.png);
        }
      }

     a[aria-selected=true] {
       //führ eventuellen text
       //span {
          //color: #f00; //whatever colour you want to use for the text
        //}
        .tab-button-icon[ng-reflect-name=categories], .tab-button-icon[aria-label=categories] {
          background-image: url(../assets/img/categories_active.png);
        }
        .tab-button-icon[ng-reflect-name=home], .tab-button-icon[aria-label=home] {
          background-image: url(../assets/img/explore_active.png);
        }
        .tab-button-icon[ng-reflect-name=hot], .tab-button-icon[aria-label=hot] {
          background-image: url(../assets/img/hot_active.png);
        }
      }
    }

    .tabs-wp {
      a[aria-selected=false]{
         .tab-button-icon[ng-reflect-name=categories], .tab-button-icon[aria-label="categories"] {
          background-image: url(../assets/img/categories_inactive.png);
        }
        .tab-button-icon[ng-reflect-name=home], .tab-button-icon[aria-label=home] {
          background-image: url(../assets/img/explore_inactive.png);
        }
        .tab-button-icon[ng-reflect-name=hot], .tab-button-icon[aria-label=hot] {
          background-image: url(../assets/img/hot_inactive.png);
        }
      }

     a[aria-selected=true] {
       //führ eventuellen text
       //span {
          //color: #f00; //whatever colour you want to use for the text
        //}
        .tab-button-icon[ng-reflect-name=categories], .tab-button-icon[aria-label=categories] {
          background-image: url(../assets/img/categories_active.png);
        }
        .tab-button-icon[ng-reflect-name=home], .tab-button-icon[aria-label=home] {
          background-image: url(../assets/img/explore_active.png);
        }
        .tab-button-icon[ng-reflect-name=hot], .tab-button-icon[aria-label=hot] {
          background-image: url(../assets/img/hot_active.png);
        }
      }
    }

Html文件

  <ion-tab [root]="tab2Root" tabIcon="categories"></ion-tab>
  <ion-tab [root]="tab1Root" tabIcon="home"></ion-tab>
  <ion-tab [root]="tab3Root" tabIcon="hot"></ion-tab>

来源及更多详情:https://forum.ionicframework.com/t/ionic2-tutorial-tabs-with-custom-active-inactive-icons/75163

Answer 3

在这里查看tabsionic 2 的成分。

有关使用自定义图标以及如何在选项卡上显示它们的信息，请参阅此内容。

另外，我认为你可以通过类更改标题和图标的 CSS 属性.animate。

如果没有，则从浏览器窗口检查元素并找到在选择选项卡时发生更改的类。您可以通过在浏览器中运行您的项目ionic serve。