Как сделать ион-навигацию прозрачной?

Я хочу, чтобы заголовок заголовка или nav был прозрачным, поэтому я могу что-то вроде показанного на картинке. Но настройка цвета фона на прозрачность не решает проблему. Содержимое должно быть «полноэкранным», чем. Если возможно, содержимое должно находиться за панель состояния.Как сделать ион-навигацию прозрачной?

источник

2016-08-10 rakete

Прежде всего, вы должны установить полное изображение на свой фон страницы, а затем на всех кнопках и заголовках компонентов вы должны установить свойство непрозрачности CSS. ех. непрозрачность: 0,5; –

Так что вам нужно сделать несколько вещей. Во-первых, как сказал Деннис, я написал небольшой учебник по настройке заголовков как прозрачных, которые вы могли бы подробно проверить here.

Итак, сначала вы добавить свойство transparent входа в свой nav-bar, который в основном добавляет background:transparent !important на панель инструментов.
Также вы можете удалить границу, которая отображается на android, добавив no-border к вашему ion-header.
Затем вы хотите удалить верхнюю прокладку на .scroll-content, поэтому отступ заголовка игнорируется. Для этого просто добавьте top-padding: 0.
Если вы хотите добавить слой градиента над слайдами, вам придется работать с .slide-zoom, который автоматически генерируется ion-slide. Вы можете установить его высоту как на 100%, так и ширину, а затем добавить что-то вроде background: linear-gradient(0deg, rgba(226, 135, 106, 0.84) 0%, rgba(255, 93, 152, 0.85) 100%) !important;
Чтобы изменить стиль пули, вы должны использовать .swiper-pagination-bullet и .swiper-pagination-bullet-active.

Я написал очень быстрый пример, пытаясь добиться того, что вы хотите:

Если это то, что вы хотите, я published a repo, так что вы можете использовать его в качестве ссылки.

источник

2017-05-10 18:35:17

Спасибо, что раскрыли вашу принадлежность к вашим ссылкам. Если вы еще этого не сделали, я бы рекомендовал прочитать [Как не спамер] (https://stackoverflow.com/help/promotion) - вы в настоящее время следите за ним, но хорошо знать, какие правила находятся. –

Эй, спасибо за это спасибо @qpaystaxes! Я действительно не знал о правилах. Я отредактировал сообщение, чтобы его еще больше раскрыли. Ура! –

This является то, что вы ищете:

По умолчанию содержимого расположена между верхней и нижними колонтитулами. Однако, используя fullscreen="true", контент сможет прокручивать «под» верхние и нижние колонтитулы. На первый взгляд, полноэкранный вариант может не выглядеть иначе, чем по умолчанию, добавив в заголовок эффект прозрачности , после чего содержимое можно увидеть под заголовком при прокрутке пользователя.

Так что вам просто нужно добавить fullscreen="true" в содержании, как этот

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

источник

2016-08-10 09:24:29 sebaferreras

Моя текущая проблема: Ionic автоматически создает дочерний контент прокрутки. У этого есть отступы. Я мог бы решить этот css, но я думаю, что лучше отключить этот дочерний элемент? Вы знаете, как это сделать? – rakete

Чтобы удалить верхнюю прокладку из содержимого ионов, удалите атрибут атрибута 'padding' от ионного содержимого – user1275105

Я нашел очень красивое решение: Tutorial

Вы можете легко редактировать ион-заголовок: <ion-header no-border> (удалить границу на устройствах Android)
Добавить transparent атрибут t o навигационная панель: <ion-navbar transparent>

источник

2017-05-09 07:08:39

Как сделать ион-навигацию прозрачной?

ответ

Смежные вопросы