Ionic 4: прозрачный заголовок

Question

Я хочу сделать цвет фона моего заголовка прозрачным. Мой HTML выглядит следующим образом:

account.page.html

<ion-header>
    <ion-toolbar>
        <ion-buttons slot="start">
            <ion-back-button defaultHref="home"></ion-back-button>
        </ion-buttons>
        <ion-title>Account</ion-title>
    </ion-toolbar>
</ion-header>

account.page.scss

ion-header {
    --ion-toolbar-background-color: rgba(0, 0, 0, 0);
}

Это делает цвет bg белым, а не прозрачным. Я тоже пробовал настройки background: transparent к каждому элементу через Chrome Inspector. Но я только получаю white,

Любая помощь, как этого добиться?

Answer 1

Сегодня у меня была такая же проблема, и я нашел следующее решение, чтобы получить свое меню с прозрачной панелью инструментов в Ionic 5.

Установить содержание на [fulscreen]="true". Удалить цвет панели инструментов с помощью--background: transparent. Установите панель инструментов вверху страницы с помощьюposition: absolute; top: 0;.

ion-toolbar {
  --background: transparent no-repeat fixed center;
  --color: black;
  position: absolute;
  top: 0;
}

удалите тень в заголовке с помощью class=ion-no-border

ht tps://stackru.com/images/1003a4a1bd34cb6614325c481c055a83cc26c0d5.gif

Answer 2

Добавить полный экран к <ion-content>

<ion-content fullscreen>

</ion-content>

Добавить без границ <ion-header>

<ion-header no-border>

</ion-header>

Answer 3

У тебя была правильная идея. Направьте на панель инструментов ion вместо заголовка ion в вашем scss.

account.page.scss

ion-toolbar {
  --background: transparent;
  --ion-color-base: transparent !important;
}

И, как упоминалось ранее, вы бы добавили no-border к элементу ионного заголовка и fullscreen к содержанию ионов.

account.page.html

заголовок

<ion-header no-border>
    <ion-toolbar>
        <ion-buttons slot="start">
            <ion-back-button defaultHref="home"></ion-back-button>
        </ion-buttons>
        <ion-title>Account</ion-title>
    </ion-toolbar>
</ion-header>

содержание

<ion-content fullscreen>

</ion-content>

Answer 4

Только добавьте этот класс в <ion-toolbar>. Вы можете установить цвет для содержания ионов и панели инструментов ion.

ion-toolbar.transparent {
  --background     : transparent;
  --ion-color-base : transparent!important;
  position         : absolute;
  top              : 0;
}

Answer 5

Как удалить ионную тень панели инструментов на IOS и Android

/* Remove bottom border on ios */
    .header-ios ion-toolbar:last-child {
      --border-width: 0;
    }
    
    //remove bottom shadow android
    .header-md::after {
      display: none;
    }