zoukankan      html  css  js  c++  java
  • ionic tabs 图标变换

    参考文档:https://blog.csdn.net/qq993284758/article/details/78107412

    其中tabs中的图标不是font字体图标,是自己公司设计师设计的。只要让设计师把图标设计成自己想要的大小即可

    步骤:

    1.在assets 中新建了一个tabsimg 的文件夹,专门放置tabs相关的图标文件

    2.在theme文件夹下新建一个ions.scss 文件 编写tabs图标的路径

     3.将 icons.scss 导入variables.scss 文件中

    最后

    在tab.html 文件中的tabIcon属性填写上自己命名的图标名字即可

     

     -------------------------------------------------------------------------------------此处是分割线----------------------------------------------------------------------------------------------------------

    emmmmmmm....  第二种方式:(推荐)

    参考地址:https://blog.csdn.net/xqq580231/article/details/78084718#

     html: 

     其中 tab5 是不大一样的 

    具体长这样:

    在app.scss 文件中编写相关 css

    变量:

     for 循环

    ios:

    android:

    详细代码:

    .ion-tab-icon-base {  
      width: 27px;  
      min-width: 27px !important;
      height: 27px !important; 
      padding: 0px 1px 1px;  
    }  
      
    .ion-tab-icon-md-base {  
      width: 27px;
      min-width: 27px !important;  
      height: 27px !important;  
    }  
      
    $tabImageName: 'tab1' 'tab2' 'tab3' 'tab4' 'tab5';  
    @for $i from 1 to 6 {  
      //for ios  
      .ion-ios-tab-#{nth($tabImageName, $i)},
      .ion-ios-tab-#{nth($tabImageName, $i)}-outline{
        @if $i==5{
            position: fixed;
            bottom: 18px;
            width: 50px;
            height: 50px !important;
            & + span{
                margin-top: 35px !important;
                color: #101826 !important;
            }
        }  
         @extend .ion-tab-icon-base;
      }
    
      .ion-ios-tab-#{nth($tabImageName, $i)} {
        content: url("../assets/tabsimg/#{nth($tabImageName, $i)}.png");
      }  
      .ion-ios-tab-#{nth($tabImageName, $i)}-outline { 
        content: url("../assets/tabsimg/#{nth($tabImageName, $i)}_outline.png");  
      }
    
     
      
      // for android  
      .tabs-md .tab-button[aria-selected=true],.tabs-md .tab-button[aria-selected=false] {  
        .ion-md-tab-#{nth($tabImageName, $i)} { 
            @if $i == 1 {
                width: 23px;
                min-width: 23px !important;  
                height: 23px;
            } @else if $i == 2{
                width: 25px;
                min-width: 25px !important;  
                height: 25px;
                padding: 2px 1px 1px;
            } @else if $i == 5{
                position: fixed;
                bottom: 18px;
                width: 50px;
                height: 50px !important;
                & + span{
                    margin-top: 35px !important;
                    color: #101826 !important;
                }
            } @else {
                @extend .ion-tab-icon-md-base;  
            }
         }
       }
    
      .tabs-md .tab-button[aria-selected=true],{  
        .ion-md-tab-#{nth($tabImageName, $i)} {  
            content: url("../assets/tabsimg/#{nth($tabImageName, $i)}.png"); 
        }  
      }  
    
      .tabs-md .tab-button[aria-selected=false] {  
        .ion-md-tab-#{nth($tabImageName, $i)} {
            content: url("../assets/tabsimg/#{nth($tabImageName, $i)}_outline.png");  
        }  
      } 
    
     
    }
  • 相关阅读:
    三角形的个数
    Nightmare(搜索)
    Prime Ring Problem(搜索)
    Safecracker(搜索)
    丑数
    八皇后问题(回溯法)
    Dijkstra
    floyd详解
    继续畅通工程(kruskal prim)
    畅通工程
  • 原文地址:https://www.cnblogs.com/maochunyan/p/9674825.html
Copyright © 2011-2022 走看看