Как настроить прозрачность фона вкладок в IONIC4? - PullRequest
Новая
       24

Как настроить прозрачность фона вкладок в IONIC4?

2 голосов
/ 16 мая 2019

Я сейчас использую ionic4. А мой клиент и его дизайнер дают картинку, как показано ниже.

enter image description here

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

.ion-color-tabstrans {
  --ion-color-base: rgba(100,100,100,0.1);;
}

1 Ответ

1 голос
/ 16 мая 2019

Из документов tab-bar кажется, что вы можете изменить фон, используя свойство CSS --background, например:

HTML 

<ion-tabs>
  <!-- Tab bar -->
  <ion-tab-bar class="my-custom-tab-bar" slot="bottom">
    <ion-tab-button tab="account">
      <ion-icon name="person"></ion-icon>
    </ion-tab-button>
    <ion-tab-button tab="contact">
      <ion-icon name="call"></ion-icon>
    </ion-tab-button>
    <ion-tab-button tab="settings">
      <ion-icon name="settings"></ion-icon>
    </ion-tab-button>
  </ion-tab-bar>
</ion-tabs>

SCSS 

ion-tab-bar.my-custom-tab-bar {
  --background: rgba(100,100,100,0.1);
}

РЕДАКТИРОВАТЬ

Возможно, вам придется изменитьфон кнопка ионной вкладки , а также 

ion-tab-bar.my-custom-tab-bar ion-tab-button {
  --background: transparent;
}

EDIT II

Ответ выше верен, но отсутствует то, что заставляет все работать не так, как ожидалось.Проблема в том, что элемент ion-tabs размещен за пределами элемента, представляющего содержимое.Основываясь на вашем вопросе, вам нужно вместо этого поместить вкладки над контентом.

Один из способов сделать это - установить абсолютное позиционирование ion-tabs, например::

HTML 

<ion-tabs>
  <!-- I've added a my-custom-tab-bar class to the ion-tab-bar element -->
  <ion-tab-bar class="my-custom-tab-bar">
    <!-- ... -->
  </ion-tab-bar>
</ion-tabs>

SCSS 

ion-tab-bar.my-custom-tab-bar {
  position: absolute;
  bottom: 0;
  width: 100%;
  --background: rgba(255,255,255,0.8);

  ion-tab-button {
    --background: transparent;
  }
}

, который дает такой результат:

tabs

Примечания

  1. Обратите внимание, что, поскольку вкладки находятся над содержимым, вам нужно будет добавить немного margin-bottom к содержанию каждой страницы, которая используется в качестве вкладки.
  2. Также, пожалуйста, дважды проверьте, если установка абсолютных положений вкладок не нарушает компоновку, особенно в устройствах с safe-area наснизу как у iPhone X.
...