javascript - use - ts variable in css




Propriedade CSS de mudança dinâmica Angular2 (4)

1) Usando estilos embutidos

<div [style.color]="myDynamicColor">

2) Use o mapeamento de várias classes CSS para o que você deseja e alterne as classes, como:

 /* CSS */
 .theme { /* any shared styles */ }
 .theme.blue { color: blue; }
 .theme.red { color: red; }

 /* Template */
 <div class="theme" [ngClass]="{blue: isBlue, red: isRed}">
 <div class="theme" [class.blue]="isBlue">

Amostras de código em: https://angular.io/cheatsheet

Mais informações sobre a diretiva ngClass: https://angular.io/docs/ts/latest/api/common/index/NgClass-directive.html

Estamos criando um aplicativo Angular2 e queremos poder criar de alguma forma uma variável CSS global (e atualizar os valores das propriedades sempre que alterados quando a variável é atribuída).

Usamos o Polymer por um tempo (agora estamos mudando para os componentes Angular2) e as propriedades CSS (o Polymer possui algum polyfill) e atualizamos os estilos usando Polymer.updateStyles() .

Existe alguma maneira de conseguirmos uma função semelhante?

EDITAR:

Queremos algo semelhante ao Sass color: $g-main-color ou às propriedades personalizadas do CSS color: var(--g-main-color) e sempre que decidirmos alterar o valor da propriedade, por exemplo, algo como updateVariable('g-main-color', '#112a4f') atualiza dinamicamente o valor em qualquer lugar. Tudo isso enquanto um aplicativo está sendo executado.

EDIT 2:

Quero usar algumas variáveis ​​globais de CSS em diferentes partes (host, elemento filho ...) do meu CSS e poder alterar o valor imediatamente - por isso, se eu alterar a variável my-color, ela será alterada em qualquer lugar do aplicativo.

Vou usar a sintaxe Sass, por exemplo:

:host { border: 2px solid $my-color }
:host .some-label { color: $my-color }

É possível usar algo como tubos angulares? (Mas supostamente só funciona em HTML)

:host { border: 2px solid {{ 'my-color' | cssvariable }} }
:host .some-label { color: {{ 'my-color' | cssvariable }} }

Eu fiz esse desentupidor para explorar uma maneira de fazer o que você quer.

Aqui eu recebo o mystyle do componente pai, mas você pode obtê-lo em um serviço.

import {Component, View} from 'angular2/angular2'

@Component({
  selector: '[my-person]',
  inputs: [
    'name',
    'mystyle: customstyle'
  ],
  host: {
    '[style.backgroundColor]': 'mystyle.backgroundColor'
  }
})
@View({
  template: `My Person Component: {{ name }}`
})
export class Person {}

Basta usar variáveis ​​CSS padrão:

Seu css global (por exemplo: styles.css)

body {
  --my-var: #000
}

No css do seu componente ou seja o que for:

span {
  color: var(--my-var)
}

Em seguida, você pode alterar o valor da variável diretamente com TS / JS, configurando o estilo embutido como elemento html:

document.querySelector("body").style.cssText = "--my-var: #000";

Caso contrário, você pode usar o jQuery para isso:

$("body").css("--my-var", "#fff");

Interface de usuário angular 6 + Alyle

Com o Alyle UI, você pode alterar os estilos dinamicamente

Aqui uma demo stackblitz

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    CommonModule,
    FormsModule,
    HttpClientModule,
    BrowserAnimationsModule,
    AlyleUIModule.forRoot(
      {
        name: 'myTheme',
        primary: {
          default: '#00bcd4'
        },
        accent: {
          default: '#ff4081'
        },
        scheme: 'myCustomScheme', // myCustomScheme from colorSchemes
        lightGreen: '#8bc34a',
        colorSchemes: {
          light: {
            myColor: 'teal',
          },
          dark: {
            myColor: '#FF923D'
          },
          myCustomScheme: {
            background: {
              primary: '#dde4e6',
            },
            text: {
              default: '#fff'
            },
            myColor: '#C362FF'
          }
        }
      }
    ),
    LyCommonModule, // for bg, color, raised and others
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

Html

<div [className]="classes.card">dynamic style</div>
<p color="myColor">myColor</p>
<p bg="myColor">myColor</p>

Para mudar de estilo

import { Component } from '@angular/core';
import { LyTheme } from '@alyle/ui';

@Component({ ... })
export class AppComponent  {
  classes = {
    card: this.theme.setStyle(
      'card', // key
      () => (
        // style
        `background-color: ${this.theme.palette.myColor};` +
        `position: relative;` +
        `margin: 1em;` +
        `text-align: center;`
         ...
      )
    )
  }
  constructor(
    public theme: LyTheme
  ) { }

  changeScheme() {
    const scheme = this.theme.palette.scheme === 'light' ?
    'dark' : this.theme.palette.scheme === 'dark' ?
    'myCustomScheme' : 'light';
    this.theme.setScheme(scheme);
  }
}

Repositório do Github







angular-dart