web-dev-qa-db-ja.com

Ionic 3のCSS値を動的に変更する

私のアプリでは、開くことができる映画の詳細があり、詳細のボタンを映画に一致させる必要があります。

たとえば、映画「Back to the Future」では、データにcolors = ["#000000","#123123"]があります。

<div [ngStyle]="{'background-color': movie?.colors[0]}">を実行すると、divは希望する色になります。

私の質問は、Ionicでvariables.scssをこれらの色に変更するにはどうすればよいですか（新しいムービーを開くときに更新されます）？

カスタムcssではタブを変更できないため、variables.scss...に追加する必要があります。

htmlcssangularionic-frameworkdynamic
5
lrosique

ほとんどの使用例では、要素を変数にマッピングすることにより、プログラムで要素のCSS値を変更すると便利です。変数を更新するたびにCSS値を変更しますnotのみthis.ngZone.run()を使用します。

<div class="progress" [style.height]=currentLevelPercentage>

この例では、div要素の高さCSSプロパティ（クラスprogress）を変数currentLevelPercentageにマップし、その値を変更する方法を示しています動的に値。 currentLevelPercentageは、TypeScriptファイルに強制的に存在する必要がある変数です。

1
Rounak Datta

動的にスタイルを変更することについてのアイデア。これは私が使っているものです

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

.tsファイルの「foo」の値を変更 https://angular.io/docs/ts/latest/guide/template-syntax.html#!#style-binding

0
Muhammad Tahir

スーパータブ（イオン）の各タブの背景の色を変更する方法を知るためにここに私の4つのタブコードがあります（コードで高さと幅を変更することもできます^^）。

tabs-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
lrosique