Wir erstellen eine Angular2-Anwendung und möchten in der Lage sein, eine globale CSS-Variable zu erstellen (und die Werte der Eigenschaften zu aktualisieren, wenn sie geändert werden, wenn die Variable zugewiesen wird).
Wir hatten Polymer für eine Weile verwendet (jetzt wechseln wir zu Angular2-Komponenten) und wir hatten CSS-Eigenschaften verwendet (Polymer hat einige Polyfills) und wir hatten nur Stile mit aktualisiert Polymer.updateStyles()
.
Gibt es eine Möglichkeit, eine ähnliche Funktion zu erreichen?
BEARBEITEN:
Wir möchten etwas Ähnliches wie Sass color: $g-main-color
oder benutzerdefinierte CSS-Eigenschaften color: var(--g-main-color)
und wann immer wir uns entscheiden, den Wert der Eigenschaft zu ändern, z. B. etwas Ähnliches updateVariable('g-main-color', '#112a4f')
, das den Wert überall dynamisch aktualisiert. All das, während eine App läuft.
EDIT 2:
Ich möchte einige globale CSS-Variablen in verschiedenen Teilen (Host, untergeordnetes Element ...) meines CSS verwenden und den Wert sofort ändern können. Wenn ich also meine Farbvariable ändere, ändert sich dies überall in der App.
Ich werde zum Beispiel die Sass-Syntax verwenden:
:host { border: 2px solid $my-color }
:host .some-label { color: $my-color }
Ist es möglich, so etwas wie Winkelrohre zu verwenden? (Aber es funktioniert angeblich nur in HTML)
:host { border: 2px solid {{ 'my-color' | cssvariable }} }
:host .some-label { color: {{ 'my-color' | cssvariable }} }
quelle
Antworten:
Verwenden Sie einfach Standard-CSS-Variablen:
Ihr globales CSS (zB: styles.css)
body { --my-var: #000 }
In der CSS Ihrer Komponente oder was auch immer es ist:
span { color: var(--my-var) }
Anschließend können Sie den Wert der Variablen direkt mit TS / JS ändern, indem Sie den Inline-Stil auf das HTML-Element setzen:
document.querySelector("body").style.cssText = "--my-var: #000";
Andernfalls können Sie jQuery dafür verwenden:
$("body").css("--my-var", "#fff");
quelle
1) Verwenden von Inline-Stilen
<div [style.color]="myDynamicColor">
2) Verwenden Sie mehrere CSS-Klassen, die Ihren Wünschen zugeordnet sind, und wechseln Sie die Klassen wie folgt:
/* 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">
Codebeispiele von: https://angular.io/cheatsheet
Weitere Informationen zur ngClass-Direktive: https://angular.io/docs/ts/latest/api/common/index/NgClass-directive.html
quelle
Sie haben keinen Beispielcode, aber ich nehme an, Sie möchten so etwas tun?
@View({ directives: [NgClass], styles: [` .${TodoModel.COMPLETED} { text-decoration: line-through; } .${TodoModel.STARTED} { color: green; } `], template: `<div> <span [ng-class]="todo.status" >{{todo.title}}</span> <button (click)="todo.toggle()" >Toggle status</button> </div>` })
Sie weisen
ng-class
eine Variable zu, die dynamisch ist (eine Eigenschaft eines Modells, die,TodoModel
wie Sie sich vorstellen können, aufgerufen wird ).todo.toggle()
ändert den Wert vontodo.status
und dort ändert sich für die Klasse der Eingabe.Dies ist ein Beispiel für den Klassennamen, aber Sie können das gleiche für CSS-Eigenschaften tun.
Ich hoffe das hast du gemeint.
Dieses Beispiel ist für das großartige Egghead-Tutorial hier genommen .
quelle
color: $g-main-color
oder in benutzerdefinierten CSS-Eigenschaftencolor: var(--g-main-color)
und wann immer wir uns entscheiden, den Wert der Eigenschaft zu ändern, z. B. etwas wie JSupdateVariable('g-main-color', '#112a4f')
, wird der Wert überall dynamisch aktualisiert. All das, während eine App läuft.Ich habe diesen Plunker gemacht , um einen Weg zu finden, um das zu tun, was Sie wollen.
Hier bekomme ich
mystyle
von der übergeordneten Komponente, aber Sie können es von einem Dienst bekommen.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 {}
quelle
Angular 6 + Alyle UI
Mit der Alyle-Benutzeroberfläche können Sie die Stile dynamisch ändern
Hier ein 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>
Zum Ändern des Stils
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); } }
Github Repository
quelle