美文网首页ionic 3 学习笔记
Ionic 3 自定义 tabs 菜单图标

Ionic 3 自定义 tabs 菜单图标

作者: 与蟒唯舞 | 来源:发表于2018-10-26 18:20 被阅读7次

    ionic 的 tabs 组件默认图标更换方式可以通过自定义图标样式来替换。自定义图标可以是图标字体库,也可以是png图标等。

    可以在 tabs.scss 文件或者全局 app.scss 文件定义都行。下边是在 app.scss 中定义代码:

    .ion-tab-icon-base {
        width: 32px !important;
        height: 32px !important;
        padding: 4px 4px 2px;
    }
    .ion-tab-icon-md-base {
        min-width: 0 !important;
        height: 32px;
    }
    $tabImageName: 'home' 'about' 'contact';
    @for $i from 1 to 4 {
        //for ios
        .ion-ios-tab-#{nth($tabImageName, $i)} {
            @extend .ion-tab-icon-base;
            content: url("../../assets/ui/tabs/icon_#{nth($tabImageName, $i)}_on.png");
        }
        .ion-ios-tab-#{nth($tabImageName, $i)}-outline {
            @extend .ion-tab-icon-base;
            content: url("../../assets/ui/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/ui/tabs/icon_#{nth($tabImageName, $i)}_on.png");
            }
        }
        .tabs-md .tab-button[aria-selected=false] {
            .ion-md-tab-#{nth($tabImageName, $i)} {
                @extend .ion-tab-icon-md-base;
                content: url("../../assets/ui/tabs/icon_#{nth($tabImageName, $i)}_off.png");
            }
        }
    }
    .ion-ios-tab-task,.ion-ios-tab-task-outline,.ion-ios-tab-master,.ion-ios-tab-master-outline{
        width: 30px !important;
        height: 32px !important;
    }
    

    使用 scss 的语法,定义数组 $tabImageName: 'home' 'about' 'contact';,然后通过循环 #{nth($tabImageName, $i)} 取出每个元素,定义每个图标的样式,这个就是 scss 预编译样式的好处,省去重复的内容。

    从样式代码可以看出,定义了两份代码,一份是 ios 的 ion-ios- 前缀,一份是 android 的 ion-md-.tabs-md 前缀,这个是 ionic 对不同平台有不同的样式处理,如果了解一看就明白了。-outline 为 ios 未选中样式,[aria-selected=false] 为 android 未选中样式。

    接着修改 tabs.html 文件,修改 tabIcon 为样式表中定义的图标即可。(上面样式图标统一添加了前缀 tab-,为了和自带图标区分开来)

    <ion-tabs>
      <ion-tab [root]="tab1Root" tabTitle="Home" tabIcon="tab-home"></ion-tab>
      <ion-tab [root]="tab2Root" tabTitle="About" tabIcon="tab-about"></ion-tab>
      <ion-tab [root]="tab3Root" tabTitle="Contact" tabIcon="tab-contact"></ion-tab>
    </ion-tabs>
    

    图标目录结构如下:


    相关文章

      网友评论

        本文标题:Ionic 3 自定义 tabs 菜单图标

        本文链接:https://www.haomeiwen.com/subject/aoeltqtx.html