반응형
각 성분의 조건부 스타일링
나는 다음과 같은 방법으로 조건에 따라 구성요소를 스타일링하려고 합니다.
<div class="col-md-3 d-flex justify-content-center align-items-center" ng-style ="{ ' background-color' : (vars.state=='Signup')? '#73c7af' : '#ffffff' }">
그리고 우리 팀 대표님. state=Signup.그래서 이 디브의 배경에 따르면 #73c7af가 되어야 하지만 여전히 흰색입니다.제가 어디서 실수를 하고 있는지 누가 말해줄 수 있습니까?
조건부로 DOM 요소를 스타일링하려면 Angular 2+에 대한 여러 옵션이 있습니다.
NgStyle
이는 AngularJS와 매우 유사합니다.ng-style구현하고 객체 속성을 추가하여 여러 스타일을 허용합니다.
<div
[ngStyle]="{'background-color': (vars.state=='Signup') ? '#73c7af' : '#ffffff'}"
></div>
스타일 바인딩
또는 다음을 사용할 수 있습니다.[style.]구속 구문여러 스타일을 설정하려면 속성을 여러 번 추가해야 합니다.
<div
[style.background-color]="(vars.state=='Signup') ? '#73c7af' : '#ffffff'"
[style.color]="myColor"
></div>
style.propertyName을 사용하여 조건부 스타일 속성을 설정할 수 있습니다.
<div class="col-md-3 d-flex justify-content-center align-items-center" [style.background]="someFunction()">
언급URL : https://stackoverflow.com/questions/45484811/conditional-styling-of-an-angular-component
반응형
'programing' 카테고리의 다른 글
| 원격 분기를 다른 이름의 로컬 레포로 끌어오시겠습니까? (0) | 2023.10.02 |
|---|---|
| getaddrinfo()는 DNS 조회를 어떻게 합니까? (0) | 2023.10.02 |
| C 언어로 도/라디안을 계산하는 기능이 있습니까? (0) | 2023.10.02 |
| ID가 시작하는 html 요소 찾기 (0) | 2023.10.02 |
| 연락처 양식 7로 게시물 제목을 받는 방법 (0) | 2023.10.02 |