.tabs-ios .tab-button-icon{
min-width: 22px;
height: 22px;
}
.ion-tab-icon-base {
width: 20px;
height: 20px;
padding: 0px 1px 1px;
}
.ion-tab-icon-md-base {
width: 25px;
min-width: 25px !important;
height: 25px;
}
$tabImageName: 'tab1' 'tab2' 'tab3' 'tab4' 'tab5';
@for $i from 1 to 6 {
//for ios
.ion-ios-tab-#{nth($tabImageName, $i)} {
@extend .ion-tab-icon-base;
content: url("../assets/icon/tabs/icon_#{nth($tabImageName, $i)}_choosed@2x.png");
}
.ion-ios-tab-#{nth($tabImageName, $i)}-outline {
@extend .ion-tab-icon-base;
content: url("../assets/icon/tabs/icon_#{nth($tabImageName, $i)}@2x.png");
}
// for android
.tabs-md .tab-button[aria-selected=true] {
.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: 20px;
padding: 2px 1px 1px;
} @else {
@extend .ion-tab-icon-md-base;
}
content: url("../assets/icon/tabs/icon_#{nth($tabImageName, $i)}_choosed@2x.png");
}
}
.tabs-md .tab-button[aria-selected=false] {
.ion-md-tab-#{nth($tabImageName, $i)} {
@if $i == 1 {
width: 24px;
min-width: 24px !important;
height: 24px;
} @else if $i == 2{
width: 25px;
min-width: 25px !important;
height: 18px;
} @else if $i == 3{
width: 22px;
min-width: 22px !important;
height: 25px;
} @else {
@extend .ion-tab-icon-md-base;
}
content: url("../assets/icon/tabs/icon_#{nth($tabImageName, $i)}@2x.png");
}
}
}
上面是本人写的代码，下面是截图为了他人看的明白！
html中 要把tab前缀加上
assets/icon/tabs/.... 这是图片的路径
因为第一次写文章，写的有点乱，见谅！！！
这就完成了。如有问题，欢迎互相学习QQ1162172981
网友评论