Динамически изменяемое значение CSS в Ionic 3 - PullRequest
Новая
       12

Динамически изменяемое значение CSS в Ionic 3

0 голосов
/ 27 ноября 2018

В моем приложении есть детали фильма, которые можно открыть, и я хочу, чтобы кнопки деталей соответствовали фильму.

Например, в фильме «Назад в будущее» яесть в моих данных colors = ["#000000","#123123"].

Если я сделаю <div [ngStyle]="{'background-color': movie?.colors[0]}">, то div будет того цвета, который я хотел.

Мой вопрос, в Ionic, как я могу изменить variables.scssчтобы эти цвета (обновлялись при открытии нового фильма)?

Поскольку мы не можем изменять вкладки с помощью пользовательского CSS, поэтому я должен добавить его к variables.scss ...

Ответы [ 3 ]

0 голосов
/ 27 ноября 2018

Для тех, кто здесь знает, как изменить цвет фона каждой вкладки в супер вкладках (ионные), вот мой код из 4 вкладок (теперь я могу изменить высоту и ширину с помощью кода ^^).

intabs-page.scss: 

  :root {
    --color1: white;
    --color2: white;
    --color3: white;
    --color4: white;
  }

  super-tab-button:nth-of-type(1) {
    background-color: var(--color1)
  }

  super-tab-button:nth-of-type(2) {
    background-color: var(--color2)
  }

  super-tab-button:nth-of-type(3) {
    background-color: var(--color3)
  }

  super-tab-button:nth-of-type(4) {
    background-color: var(--color4)
  }

в tabs-page.html: ничего не делать

в tabs-page.ts: 

constructor(public navCtrl: NavController, public navParams: NavParams) {
    document.documentElement.style.setProperty('--color1', this.movie.colors[0]);
    document.documentElement.style.setProperty('--color2', this.movie.colors[1]);
    document.documentElement.style.setProperty('--color3', this.movie.colors[2]);
    document.documentElement.style.setProperty('--color4', this.movie.colors[3]);
  }

Спасибо @Malbarmawi!

0 голосов
/ 24 апреля 2019

Просто идея о динамическом изменении стиля.вот что я использую 

<span [style.width]=foo></span>

Измените значение 'foo' в вашем файле .ts https://angular.io/docs/ts/latest/guide/template-syntax.html#!#style-binding

0 голосов
/ 27 ноября 2018

, если вы хотите обновить любой цвет или значение CSS, например font-size, например переменную sass, во время выполнения, используйте переменные CSS , таким образом, вы можете обновить любое значение свойства CSS во время выполнения, если оно основано напеременная css похожа на цвет в моем примере, но это может быть любое значение css

рассмотрим этот пример

style.css 

:root {
--color : red;
}

 * {
   color:var(--color)
 }

AppComponent 

  colorList = ['green', 'blue'];

  updateColor(color) {
    document.documentElement.style.setProperty(`--color`, color);
  }

Шаблон 

<button *ngFor="let c of colorList" (click)="updateColor(c)">{{c}}</button>

демонстрация stackblitz

sassпеременная будет скомпилирована во время компоновки, чтобы значения там не использовались во время выполнения

...