Angular 2+: как перегрузить фоновое изображение при использовании NgStyle с функцией - PullRequest
Новая
       6

Angular 2+: как перегрузить фоновое изображение при использовании NgStyle с функцией

0 голосов
/ 12 марта 2020

Я создаю ползунок непрозрачности в Angular 8.

Я хочу установить фон в шахматном порядке CSS. Я создаю стили в функции, потому что я чувствую ширину ползунка и регулирую размер шашек, а также позволяю настраивать цвета с помощью ввода.

background-image должно быть перегружено для учета префиксов браузера webkit / moz. Попытка сделать это вызывает ошибку, потому что у объекта JSON есть дубликаты ключей фонового изображения.

Этот код работает в файле Sass с жестко запрограммированными переменными, а также в браузерах webkit и moz, когда закомментировано соответствующее правило фонового изображения.

Я пытался (без удачи):

  1. Вызов [NgStyle] дважды с правилами фонового изображения в двух разных функциях.

  2. Вызов [NgStyle] с использованием функции и использование [style.background-image] только с правилом moz

  3. Верблюд, заключающий одну из клавиш фонового изображения, чтобы сделать он уникален для JSON

Можно ли как-нибудь достичь sh моей цели - иметь этот динамически создаваемый фон, а также поддерживать браузеры на основе moz и webkit? 

public setBackground() {
    let checkerSize: number = this.getCheckerSizeInPixels();
    return {

      "background-image": `-moz-linear-gradient(45deg, ${this.backgroundColor.toRgbaString()} 25%, transparent 25%),
                          -moz-linear-gradient(-45deg, ${this.backgroundColor.toRgbaString()} 25%, transparent 25%),
                          -moz-linear-gradient(45deg, transparent 75%, ${this.backgroundColor.toRgbaString()} 75%),
                          -moz-linear-gradient(-45deg, transparent 75%, ${this.backgroundColor.toRgbaString()} 75%)`,

      "background-image":
        `-webkit-gradient(linear, 0 100%, 100% 0, color-stop(.25, ${this.backgroundColor.toRgbaString()}), color-stop(.25, transparent)),
        -webkit-gradient(linear, 0 0, 100% 100%, color-stop(.25, ${this.backgroundColor.toRgbaString()}), color-stop(.25, transparent)),
        -webkit-gradient(linear, 0 100%, 100% 0, color-stop(.75, transparent), color-stop(.75, ${this.backgroundColor.toRgbaString()})),
        -webkit-gradient(linear, 0 0, 100% 100%, color-stop(.75, transparent), color-stop(.75, ${this.backgroundColor.toRgbaString()}))`,

      "-moz-background-size": `${checkerSize}px ${checkerSize}px`,
      "background-size": `${checkerSize}px ${checkerSize}px`,
      "-webkit-background-size": `${checkerSize}px ${checkerSize}px`,

      "background-position":`0 0, ${checkerSize/2}px 0, ${checkerSize/2}px -${checkerSize/2}px, 0rem ${checkerSize/2}px`
    };
  }
.opacity-selector {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  display: block;
  width: 100%;
  height: 100%;

  // background-image:
  //   -moz-linear-gradient(45deg, lightgray 25%, transparent 25%),
  //   -moz-linear-gradient(-45deg, lightgray 25%, transparent 25%),
  //   -moz-linear-gradient(45deg, transparent 75%, lightgray 75%),
  //   -moz-linear-gradient(-45deg, transparent 75%, lightgray 75%);
  // background-image:
  //   -webkit-gradient(linear, 0 100%, 100% 0, color-stop(.25, lightgray), color-stop(.25, transparent)),
  //   -webkit-gradient(linear, 0 0, 100% 100%, color-stop(.25, lightgray), color-stop(.25, transparent)),
  //   -webkit-gradient(linear, 0 100%, 100% 0, color-stop(.75, transparent), color-stop(.75, lightgray)),
  //   -webkit-gradient(linear, 0 0, 100% 100%, color-stop(.75, transparent), color-stop(.75, lightgray));

  // -moz-background-size: 1rem 1rem;
  // background-size: 1rem 1rem;
  // -webkit-background-size: 1rem 1rem;

  // background-position:0 0, .5rem 0, .5rem -.5rem, 0rem .5rem;
}
<div class="opacity-selector"  [ngStyle]="setBackground()"></div>

1 Ответ

1 голос
/ 12 марта 2020

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

public setBackground() {
    let checkerSize: number = this.getCheckerSizeInPixels();
    return {
      "background-image": `linear-gradient(45deg, ${this.backgroundColor.toRgbaString()} 25%, transparent 25%),
                          linear-gradient(-45deg, ${this.backgroundColor.toRgbaString()} 25%, transparent 25%),
                          linear-gradient(45deg, transparent 75%, ${this.backgroundColor.toRgbaString()} 75%),
                          linear-gradient(-45deg, transparent 75%, ${this.backgroundColor.toRgbaString()} 75%)`,

      "background-size": `${checkerSize}px ${checkerSize}px`,

      "background-position":`0 0, 0px ${checkerSize/2}px, ${checkerSize/2}px -${checkerSize/2}px, -${checkerSize/2}px 0px`
    };
}

Изменения в background-position с этого поста: CSS шаблон градиента шахматной доски

Это решение решает мой конкретный c сценарий использования, но не отвечает на более широкий вопрос: как бы это было достигнуто, если бы по-прежнему требовались префиксы браузера? Если у кого-то есть решение - мне все еще интересно его услышать, пожалуйста, опубликуйте его.

...