javascript - Angular2 गतिशील परिवर्तन सीएसएस संपत्ति




dart angular-dart (4)

हम एक Angular2 एप्लीकेशन बना रहे हैं और हम चाहते हैं कि किसी तरह एक वैश्विक CSS वैरिएबल बनाया जा सके (और जब वेरिएबल को असाइन किया गया है तो प्रॉपर्टीज के वैल्यू को अपडेट करें)।

हमने थोड़ी देर के लिए पॉलिमर का उपयोग किया था (अब हम Angular2 घटकों पर स्विच कर रहे हैं) और हमने CSS गुणों का इस्तेमाल किया था (पॉलिमर में कुछ पॉलीफिल हैं) और Polymer.updateStyles() का उपयोग करके हमारे पास सिर्फ स्टाइल अपडेट थे।

क्या कोई तरीका है कि हम एक समान फ़ंक्शन कैसे प्राप्त कर सकते हैं?

संपादित करें:

हम Sass color: $g-main-color समान कुछ चाहते हैं color: $g-main-color या CSS custom properties color: var(--g-main-color) और जब भी हम संपत्ति के मूल्य को बदलने का निर्णय लेते हैं, जैसे कुछ updateVariable('g-main-color', '#112a4f') यह updateVariable('g-main-color', '#112a4f') हर जगह मूल्य को अद्यतन करता है। वह सब जबकि कोई ऐप चल रहा हो।

संपादित करें 2:

मैं अपने सीएसएस के विभिन्न भागों (होस्ट, चाइल्ड एलिमेंट ...) में कुछ वैश्विक सीएसएस चर का उपयोग करना चाहता हूं और तुरंत मूल्य बदलने में सक्षम हो सकता हूं - इसलिए यदि मैं अपना कलर वेरिएबल बदलता हूं, तो यह ऐप में हर जगह बदलता है।

मैं उदाहरण के लिए Sass सिंटैक्स का उपयोग करूंगा:

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

क्या कोणीय पाइप की तरह कुछ का उपयोग करना संभव है? (लेकिन यह केवल HTML में काम करता है)

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

1) इनलाइन शैलियों का उपयोग करना

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

2) कई सीएसएस वर्गों का उपयोग करें जो आप चाहते हैं और जैसे कक्षाएं स्विच करें:

 /* 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">

से कोड नमूने: https://angular.io/cheatsheet

NgClass निर्देश पर अधिक जानकारी: https://angular.io/docs/ts/latest/api/common/index/NgClass-directive.html


आपके पास कोई उदाहरण कोड नहीं है, लेकिन मुझे लगता है कि आप ऐसा कुछ करना चाहते हैं?

@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>`
})

आप ng-class को एक चर पर असाइन करते हैं जो गतिशील है (मॉडल का एक गुण जिसे TodoModel कहा जाता है TodoModel कि आप अनुमान लगा सकते हैं)।

todo.toggle() का मान बदल रहा है और इनपुट के वर्ग के लिए बदल रहा है।

यह वर्ग के नाम के लिए एक उदाहरण है, लेकिन वास्तव में आप सीएसएस गुणों के लिए भी ऐसा ही सोच सकते हैं।

मुझे आशा है कि यह आपका मतलब है।

इस उदाहरण को here महान egghead ट्यूटोरियल के लिए लिया गया here


कोणीय 6 + एलई यूआई

एलि यूआई के साथ आप शैलियों को गतिशील रूप से बदल सकते हैं

यहाँ एक डेमो स्टैकब्लिट्ज़ है

@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 { }

एचटीएमएल

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

परिवर्तन शैली के लिए

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);
  }
}

गीथूब रिपोजिटरी


बस मानक सीएसएस चर का उपयोग करें:

आपकी वैश्विक सीएसएस (उदाहरण के लिए: style.css)

body {
  --my-var: #000
}

आपके घटक के सीएसएस में या जो कुछ भी है:

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

तब आप इनलाइन स्टाइल को html एलिमेंट पर सेट करके TS / JS के साथ वेरिएबल का मान सीधे बदल सकते हैं:

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

अन्यथा आप इसके लिए jQuery का उपयोग कर सकते हैं:

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





angular-dart