Как иметь цвет фона только тогда, когда заголовок "раскрыт" Полимер - PullRequest
Новая
       7

Как иметь цвет фона только тогда, когда заголовок "раскрыт" Полимер

0 голосов
/ 18 января 2019

Я бы хотел воссоздать поведение в этой демонстрации, где фон заголовка прозрачен, если только заголовок не "раскрывается".

https://www.webcomponents.org/element/polymerelements/app-layout/v2.1.1/demo/app-header/demo/music.html

Я установил атрибуты effects и reveals. 

<app-header role="navigation" id="header" effects="waterfall" condenses reveals>
  <app-toolbar>
     <a href="/">Home</a>
     <a href="/values">Value Proposition</a>
     <a href="/manufacturers">Manufacturers</a>
     <a href="/our-team">Our Team</a>
  </app-toolbar>
</app-header>

Есть ли селектор CSS, который я могу использовать, чтобы иметь белый фон, когда заголовок находится в раскрытом состоянии и прозрачный в противном случае?

т.е. прозрачный, когда положение прокрутки <30px, и белый, когда положение прокрутки>> 30 пикселей.

В документации указано, что app-header имеет два фоновых слоя, которые можно использовать для стилизации, когда заголовок сжат или когда прокручиваемый элемент прокручивается до верха , но я не вижу, где и как выбрать их.

Настройка 

app-header {
  background: rgba(255,255,255,0);
  --app-header-background-front-layer: {
    background: rgba(255,255,255,1);
  };
  --app-header-background-rear-layer: {
    background: rgba(255,255,255,0);
  };
}

не имеет никакого эффекта.

1 Ответ

0 голосов
/ 22 января 2019

Заголовок в связанной демонстрации исчезает из фона только тогда, когда позиция прокрутки находится вверху. Чтобы включить его, добавьте fade-background к <app-header>.effects и используйте свойство CSS --app-header-background-rear-layer, чтобы установить цвет фона, который будет виден при обнаружении полосы прокрутки: 

<style>
  app-header {
    @apply --layout-fixed-top;
    --app-header-background-rear-layer: {
      background-color: #fff;
    };
  }
</style>
<app-header effects="fade-background" ...></app-header>

Обратите внимание, что --app-header-background-front-layer свойство CSS не используется для этого эффекта.

демо

...