Настройка значков вкладок Ionic 3 - PullRequest
Новая
       20

Настройка значков вкладок Ionic 3

0 голосов
/ 21 мая 2018

Я пытаюсь применить значки настройки для ионных вкладок, но при этом отображается только значок неактивной вкладки, при нажатии другой вкладки ничего не отображается

tabs.scss file 

.tabs{
  a[aria-selected=false]{
    .ion-md-tab1 {
      max-width: 26px !important;
      content: url("../assets/imgs/inactive-tab1.png") !important; }
    }
.ion-md-tab2 {
          max-width: 26px !important;
          content: url("../assets/imgs/inactive-tab2.png") !important; 
     }
        }
  a[aria-selected=true]{
    .tabs-md-tab1 {
      max-width: 26px !important;
      content: url("../assets/imgs/active-tab1.png") !important;
    }
     .ion-md-tab2 {
      max-width: 26px !important;
      content: url("../assets/imgs/inactive-tab2.png") !important; 
     }
  }
}

вкладок.html 

<ion-tabs>
  <ion-tab [root]="tab1Root" tabIcon="tab1"></ion-tab>
  <ion-tab [root]="tab2Root" tabIcon="tab2"></ion-tab>
</ion-tabs>

Ответы [ 3 ]

0 голосов
/ 05 февраля 2019

ng-reflect-is-active="true" не работает в производственной сборке, используйте это;у меня работает нормально: 

.tabs {
    a[aria-selected=true] {
      .ion-md-tab1 {
        max-width: 26px !important;
        background: url("../assets/imgs/svg/ic_home_active.svg") no-repeat 50% 50%;
      }
    }
  }
0 голосов
/ 28 февраля 2019

Если вам нужно использовать пользовательский значок в вашем приложении, вот решение, которое отлично сработало для меня.

  1. Поместите ваши файлы иконок .svg в:

    / src / assets / icons /...

  2. Добавьте в свой файл app.scss этот код scss: 

    ion-icon {
    &[class*="prefix-"] {
        mask-size: contain;
        mask-position: 50% 50%;
        mask-repeat: no-repeat;
        background: currentColor;
        width: 1em;
        height: 1em;
    }
// custom icons
    &[class*="prefix-categories"] {
        mask-image: url(../assets/icon/ic_categories.svg);
    }
    &[class*="prefix-menu"] {
        mask-image: url(../assets/icon/ic_menu.svg);
    }
}

  3. и код html-вкладок здесь 

    <ion-tabs>
    <ion-tab [root]="tab1Root" tabTitle="Title" tabIcon="prefix-name"></ion-tab>
</ion-tabs>
0 голосов
/ 22 мая 2018 
.tabs{
    .ion-md-tab1[ng-reflect-is-active="true"] {
      max-width: 26px !important;
      content: url("../assets/imgs/inactive-tab1.png") !important; }
    .ion-md-tab2[ng-reflect-is-active="true"] {
          max-width: 26px !important;
          content: url("../assets/imgs/inactive-tab2.png") !important;}
    .tabs-md-tab1[ng-reflect-is-active="false"] {
      max-width: 26px !important;
      content: url("../assets/imgs/active-tab1.png") !important;
    }
     .ion-md-tab2[ng-reflect-is-active="false"] {
      max-width: 26px !important;
      content: url("../assets/imgs/inactive-tab2.png") !important; 
     }
}
...