javascript - কৌণিক 2 গতিশীল পরিবর্তন সিএসএস সম্পত্তি




angular dart (4)

আমরা একটি কৌণিক 2 অ্যাপ্লিকেশন তৈরি করছি এবং আমরা একরকম একটি গ্লোবাল সিএসএস ভেরিয়েবল তৈরি করতে সক্ষম হতে চাই (এবং ভেরিয়েবলটি বরাদ্দকালে বৈশিষ্ট্যের মানগুলি আপডেট করতে হবে)।

আমরা কিছুক্ষণের জন্য পলিমার ব্যবহার করেছি (এখন আমরা অ্যাঙ্গুলার 2 উপাদানগুলিতে স্যুইচ করছি) এবং আমরা সিএসএস বৈশিষ্ট্য ব্যবহার করেছি (পলিমারের কিছু পলিফিল রয়েছে) এবং Polymer.updateStyles() ব্যবহার করে আমাদের কেবল স্টাইলগুলি আপডেট করা Polymer.updateStyles()

আমরা কীভাবে কোনও অনুরূপ কার্য সম্পাদন করতে পারি তার কোনও উপায় আছে?

সম্পাদনা করুন:

আমরা সাস color: $g-main-color অনুরূপ কিছু চাই color: $g-main-color বা CSS কাস্টম বৈশিষ্ট্যের color: var(--g-main-color) এবং যখনই আমরা সম্পত্তিটির মান পরিবর্তন করার সিদ্ধান্ত updateVariable('g-main-color', '#112a4f') , যেমন updateVariable('g-main-color', '#112a4f') মতো কিছু updateVariable('g-main-color', '#112a4f') এটি গতিশীলভাবে সর্বত্র মান আপডেট করে। কোনও অ্যাপ চলাকালীন সমস্ত কিছু।

সম্পাদনা 2:

আমি আমার সিএসএসের বিভিন্ন অংশে (হোস্ট, চাইল্ড এলিমেন্ট ...) কিছু গ্লোবাল সিএসএস ভেরিয়েবলগুলি ব্যবহার করতে চাই এবং তাত্ক্ষণিক মানটি পরিবর্তন করতে সক্ষম হতে চাই - তাই আমি যদি আমার বর্ণের পরিবর্তনশীল পরিবর্তন করি তবে এটি অ্যাপে সর্বত্র পরিবর্তিত হয়।

আমি উদাহরণস্বরূপ সাস সিনট্যাক্স ব্যবহার করব:

: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

এনজি ক্লাসের নির্দেশিকা সম্পর্কিত আরও তথ্য: 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 নামে পরিচিত একটি মডেলের সম্পত্তি হিসাবে আপনি অনুমান করতে পারেন)।

todo.toggle() মান পরিবর্তন করছে এবং todo.status শ্রেণীর জন্য এখানে পরিবর্তন হচ্ছে।

এটি শ্রেণীর নামের জন্য একটি উদাহরণ তবে বাস্তবে আপনি CSS বৈশিষ্ট্যগুলির জন্য একই চিন্তা করতে পারেন।

আমি আশা করি এটি আপনি বোঝাতে চেয়েছিলেন

এই উদাহরণটি here গ্রেট ডিম্বাণু টিউটোরিয়ালের জন্য নেওয়া here


কেবল স্ট্যান্ডার্ড সিএসএস ভেরিয়েবল ব্যবহার করুন:

আপনার গ্লোবাল সিএসএস (যেমন: স্টাইলস.কম)

body {
  --my-var: #000
}

আপনার উপাদান এর CSS বা এটি যাই হোক না কেন:

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

তারপরে আপনি ভেরিয়েবলের মানটি সরাসরি টিএস / জেএসের সাথে এইচটিএমএল উপাদানটিতে ইনলাইন স্টাইল সেট করে পরিবর্তন করতে পারেন:

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

অন্যথায় আপনি এর জন্য jQuery ব্যবহার করতে পারেন:

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

কৌণিক 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);
  }
}

গিথুব সংগ্রহশালা





angular-dart