color 바인딩
값에 따라 글자색이 바뀝니다 — 수치가 경보 범위에 들면 빨갛게.
필요: 글자를 가진 요소. 텍스트 요소이거나, 심볼 안의
value 파트prop: color 색은 임계값 규칙으로 정한다설명
fill 이 도형을 칠한다면 이쪽은 글자를 칠합니다. 수치 표시기의 숫자가 경보 범위에 들 때 빨갛게 만드는 것이 가장 흔한 쓰임입니다.
칠할 대상을 찾는 순서가 정해져 있습니다.
part를 지정했고 그 부위가 있으면 → 거기- 텍스트 요소면 → 그 글자
- 심볼 안에
value파트가 있으면 → 거기 (수치 표시기·계량기·라이브 시계가 이 파트를 가지고 있습니다) - 그래도 없으면 → 요소 전체의 글자색
같은 요소에 text 와 함께 걸면 값과 색이 같이 움직입니다. 숫자를 보여 주는 바인딩과 색을 정하는 바인딩은 별개이므로, 서로 다른 태그를 물릴 수도 있습니다 — 값은 수위, 색은 경보 상태처럼.
설정 항목
| 이름 | 값 | 기본 | 설명 |
|---|---|---|---|
| 태그 | tagId | — | 읽을 게이트웨이 태그. |
| 규칙 | threshold[] | (없음) | 출력이 색입니다. |
| 기본값 | color | (없음) | 어느 규칙에도 안 맞을 때의 색. |
| part | string | (자동) | 색을 줄 부위. 지정하지 않으면 글자를 알아서 찾습니다(아래 참고). |
동작
값 95 · 규칙 >= 90 → #ef4444 → 글자가 빨갛게. 규칙에 안 맞으면 기본값, 기본값도 없고 태그 값이 글자면 그 글자를 색으로 씁니다.
SVG 안의 글자와 일반 글자를 알아서 가려 씁니다. 심볼 안의 글자는 fill 속성으로, 텍스트 요소는 글자색으로 칠합니다 — 어느 쪽인지 신경 쓸 필요가 없습니다.
도형을 칠하려는데 색이 안 바뀐다면 fill 을 쓸 자리입니다. 이 prop 은 글자만 찾습니다. 반대로 텍스트 요소에 fill 을 걸면 글자가 아니라 요소의 배경이 칠해집니다.
part 를 지정했는데 그 부위가 없으면 위의 자동 순서로 되돌아갑니다 — 오타를 내도 그럴듯하게 다른 곳이 칠해지므로, 뜻대로 안 보이면 파트 이름부터 확인하세요.
해 보기
제품 샘플 › 물탱크 미믹수위 수치가 경보 범위에 들면 글자색이 바뀐다
제품에 들어 있는 샘플
제품 샘플 › 장례식장 빈소 안내빈소 안내판 — 상태에 따라 글자색을 바꾸는 규칙 여러 벌
제품에 들어 있는 샘플
제품 샘플 › 지하철 차내 정차 안내규칙 36개짜리 실제 운영 화면
제품에 들어 있는 샘플