Angular2 동적 변경 CSS 속성
우리는하고 있습니다 Angular2 응용 프로그램을 우리가 (변수가 할당 될 때 변경 언제 속성 '값을 업데이트) 어떻게 든 글로벌 CSS 변수를 만들 수 있어야합니다.
한동안 Polymer를 사용했고 (이제 Angular2 구성 요소로 전환 중입니다) CSS 속성 (Polymer에는 polyfill이 있음)을 사용했으며 Polymer.updateStyles()
.
비슷한 기능을 수행 할 수있는 방법이 있습니까?
편집하다:
우리는 Sass color: $g-main-color
또는 CSS 사용자 정의 속성 color: var(--g-main-color)
과 비슷한 것을 원하고 속성 의 값을 변경할 때마다, 예를 들어 updateVariable('g-main-color', '#112a4f')
모든 곳에서 동적으로 값을 업데이트하는 것과 같은 것을 원합니다. 앱이 실행되는 동안.
편집 2 :
내 CSS의 다른 부분 (호스트, 자식 요소 ...)에서 전역 CSS 변수를 사용하고 즉시 값을 변경할 수 있기를 원합니다. 따라서 my-color 변수를 변경하면 앱의 모든 곳에서 변경됩니다.
예를 들어 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 }} }
표준 CSS 변수를 사용하십시오.
글로벌 CSS (예 : styles.css)
body {
--my-var: #000
}
구성 요소의 CSS 또는 그 무엇이든 :
span {
color: var(--my-var)
}
그런 다음 인라인 스타일을 html 요소로 설정하여 TS / JS에서 직접 변수 값을 변경할 수 있습니다.
document.querySelector("body").style.cssText = "--my-var: #000";
그렇지 않으면 jQuery를 사용할 수 있습니다.
$("body").css("--my-var", "#fff");
1) 인라인 스타일 사용
<div [style.color]="myDynamicColor">
2) 원하는 것에 여러 CSS 클래스 매핑을 사용하고 다음과 같이 클래스를 전환하십시오.
/* 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
추측 할 수 있는 모델의 속성 ).
todo.toggle()
의 값을 변경하고 todo.status
입력의 클래스가 변경됩니다.
이것은 클래스 이름에 대한 예제이지만 실제로 CSS 속성에 대해 동일한 생각을 할 수 있습니다.
이것이 당신이 의미하는 바가 있기를 바랍니다.
이 예제는 여기 에서 훌륭한 지식인 튜토리얼을 위해 가져 왔습니다 .
나는 당신이 원하는 것을하는 한 가지 방법을 탐구하기 위해이 플 런커 를했다.
여기 mystyle
에서는 상위 구성 요소에서 가져 오지만 서비스에서 가져올 수 있습니다.
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 {}
Angular 6 + Alyle UI
Alyle UI를 사용하면 스타일을 동적으로 변경할 수 있습니다.
여기에 데모 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>
변경 스타일
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);
}
}
참고 URL : https://stackoverflow.com/questions/33328347/angular2-dynamic-change-css-property
'program story' 카테고리의 다른 글
TypeScript의 개인 "함수" (0) | 2020.11.02 |
---|---|
Node.js 스트림 vs. Observable (0) | 2020.11.02 |
Python의 임의의 임의성 (0) | 2020.11.02 |
MSBuild 스크립트 및 VS2010 게시는 Web.config 변환 적용 (0) | 2020.11.02 |
Scala 유형 키워드 : 여러 클래스에서 사용하는 가장 좋은 방법 (0) | 2020.11.02 |