Ionic3 自定义tabs菜单图标

最新推荐文章于 2022-05-05 20:59:41 发布

芒果·布丁

最新推荐文章于 2022-05-05 20:59:41 发布

阅读量563

点赞数

分类专栏： ionic 文章标签： ionic tabs

本文链接：https://blog.csdn.net/qq_37201926/article/details/84338505

版权

本文介绍了如何在Ionic3中自定义tabs菜单图标，通过scss预编译样式，利用数组$tabImageName进行循环操作，设置不同平台（ios和android）的选中与未选中状态样式。图标存放在assets/images/tabs目录下，并提供了实现效果的截图。

摘要由CSDN通过智能技术生成

tabs.scss

 .ion-tab-icon-base {
        width: 30px !important;
        height: 30px !important;
    }
    .ion-tab-icon-md-base {
        min-width: 0 !important;
        height: 30px;
    }
    
    $tabImageName: 'model' 'shop' ;  
    @for $i from 1 to 3 {
        //for ios
        .ion-ios-tab-#{nth($tabImageName, $i)} {
            @extend .ion-tab-icon-base;
            content: url("../../assets/images/tabs/icon_#{nth($tabImageName, $i)}_on.png");
        }
        .ion-ios-tab-#{nth($tabImageName, $i)}-outline {
            @extend .ion-tab-icon-base;
            content: url("../../assets/images/tabs/icon_#{nth($tabImageName, $i)}_off.png");
        }
        // for android
        .tabs-md .tab-button[aria-selected=true] {
            .ion-md-tab-#{nth($tabImageName, $i)} {
                @extend .ion-tab-icon-md-base;
                content: url("../../assets/images/t