Ionic自定义tabbar图标

ionic tabbar 可以使用ionic自带的图标,但是往往我们需要设置成自己ui给的图标。
在assets文件夹下可以创建一个空文件夹来存放图标,也可以放在icon文件夹中,
然后在tabs.scss或者app.scss中加入以下代码:

.ion-page {
  .ion-tab-icon-base {
    width: 32px !important;
    height: 32px !important;
    padding: 4px 4px 2px;
  }
  .ion-tab-icon-md-base {
    width: 32px !important;
    min-width: 0 !important;
    height: 32px;
  }
  $tabImageName: 'home' 'address' 'my';
  @for $i from 1 to 4 {
    //for ios
    .ion-ios-tab-#{nth($tabImageName, $i)} {
      @extend .ion-tab-icon-base;
      content: url("../../assets/icon/#{nth($tabImageName, $i)}_fill.svg"); //IOS下被激活的图标
    }
    .ion-ios-tab-#{nth($tabImageName, $i)}-outline {
      @extend .ion-tab-icon-base;
      content: url("../../assets/icon/#{nth($tabImageName, $i)}.svg"); //IOS下未被激活的图标
    }
     // for android
    .tabs-md {
      .tab-button[aria-selected=true] {
        .ion-md-tab-#{nth($tabImageName, $i)} {
          @extend .ion-tab-icon-md-base;
          content: url("../../assets/icon/#{nth($tabImageName, $i)}_fill.svg") !important;
        }
        //这里自定义 android tabbar被激活的文字颜色
        .tab-button-text{
          color: #06c1aE;
        }
      }
    }
    .tabs-md .tab-button[aria-selected=false] {
      .ion-md-tab-#{nth($tabImageName, $i)} {
        @extend .ion-tab-icon-md-base;
        content: url("../../assets/icon/#{nth($tabImageName, $i)}.svg") !important;
      }

    }
  }
  .ion-ios-tab-task,
  .ion-ios-tab-task-outline,
  .ion-ios-tab-master,
  .ion-ios-tab-master-outline {
    width: 32px !important;
    height: 32px !important;
  }
}
//这里自定义 ios tabbar被激活的文字颜色
.tabs-ios .tab-button:hover:not(.disable-hover), .tabs-ios .tab-button[aria-selected=true]{
    color: #06c1aE;
}

这里图片推荐选用svg格式,因为不会因放大而失真,另外图标的文件名需要和$tabImageName数组中的保持一致,利用sass的for循环逐一取出数组中的图片,有效避免书写大量重复的代码。
以下是我的图片的命名(命名的格式对于for循环极其重要)
这是我的图片命名
下面是自定义后的Tabbar图标:
这里写图片描述
当然,不止可以使用图片,.png .svg ,也可以使用字体图标。
后续发现问题再补充。

发布了65 篇原创文章 · 获赞 56 · 访问量 10万+
展开阅读全文

没有更多推荐了,返回首页

©️2019 CSDN 皮肤主题: 像素格子 设计师: CSDN官方博客

分享到微信朋友圈

×

扫一扫,手机浏览