Ionic 4 прозрачный прозрачный коллектор

Question

У меня есть приложение Ionic 4, и я хочу прозрачный заголовок.Ионная документация гласит, что «полноэкранный» должен быть добавлен к ионному содержимому, а «полупрозрачный» должен быть добавлен к ионной панели инструментов.

Это не работает и всегда оставляет панель инструментов сверху.Я также добавил это к CSS:

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

<ion-header>
  <ion-toolbar translucent >
    <ion-buttons slot="start"  (click)="goBack()">
        <ion-icon name="arrow-back"></ion-icon>
    </ion-buttons>
  </ion-toolbar>
</ion-header>

<ion-content fullscreen >
</ion-content>

Единственный способ найти эффект прозрачного заголовка - это когда я иду в Shadow DOM в chrome и добавляю атрибут фона ккласс 'inner-scroll'

Однако в этом классе нет переменных, связанных с цветом фона, поэтому я не могу изменить фон с помощью этого метода.

Как создать прозрачный заголовок / панель инструментовРабота!?

Решение:

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

<ion-header>
  <ion-toolbar translucent>
    <ion-back-button></ion-back-button>
  </ion-toolbar>
</ion-header>

<ion-content fullscreen> </ion-content>

Нет в CSS, добавьте следующее:

ion-toolbar {
--ion-toolbar-background-color: transparent;
--ion-toolbar-text-color: white;
}

Документация определяет только сторону HTML вещей, но с новым Shadow DOM вИонные переменные должны использоваться для изменения большинства стилей ионных компонентов.

Answer 1

Я пытаюсь это, и это работает

В переменных .scss

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

На странице

<ion-header translucent></ion-header>

<ion-content fullscreen>
    <div class="contenu"></div>
</ion-content>

Я также хочу заметить, что в .scssфайл.Я сделал

 .contenu {
     position : absolute; 
     top : 0;
     left : 0;
     height: 100vh;
     width: 100vw;
  }

, потому что содержимое было под заголовком

Answer 2

Попробуйте это
mypage.page.html

<ion-header no-border no-shadow>

  <ion-toolbar color="medium">
    <ion-title>My Page</ion-title>
  </ion-toolbar>
</ion-header>

<ion-content fullscreen="true">

</ion-content>

Теперь измените файл variable.scss среднего цвета на

--ion-color-medium: #ffffff00;

Answer 3

Если вы хотите полупрозрачный заголовок в ionic 4, вам нужно добавить свойство «полупрозрачный» в тег заголовка, а не тег панели инструментов.

<ion-header translucent="true">
  <ion-toolbar>
    <ion-title>Toolbar Title</ion-title>
  </ion-toolbar>
</ion-header>

<ion-content fullscreen="true">
    <!-- content here -->
</ion-content>

Из ионного документа ... Прозрачный

Атрибут: полупрозрачный Тип: логическое значение При значении true заголовок будет полупрозрачным.Примечание. Для прокрутки содержимого за заголовком необходимо задать атрибут fullscreen для содержимого.По умолчанию false.

Answer 4

...    
<ion-toolbar color="translucent"> 
...

и если вы хотите избавиться от тени от заголовка вашего заголовка, вы можете сделать это в своем CSS как:

.header::after {
  background-image: none;
}

Answer 5

Вы пробовали это?

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