text 바인딩
값을 글자로 보여 줍니다 — 가장 먼저 쓰게 되는 바인딩.
필요: 글자를 넣을 자리. 텍스트 요소이거나, 심볼 안의
value 파트prop: text 규칙 → 날짜 서식 → 숫자 서식 순으로 글자를 만든다설명
값을 글자로 만들어 요소에 넣습니다. 글자를 만드는 방법이 세 가지이고 이 순서로 정해집니다.
- 임계값 규칙 이 있고 맞는 줄이 있으면 → 그 줄의 출력을 그대로 씁니다. 숫자 1을 "가동"으로 바꾸는 식입니다.
- 날짜 패턴이 지정돼 있으면 → 값을 날짜·시각으로 풉니다.
- 그 밖에는 → 배율·소수점·단위를 적용한 숫자 서식 으로 씁니다.
글자를 넣을 자리를 찾는 순서도 정해져 있습니다.
part를 지정했고 그 부위가 있으면 → 거기- 텍스트 요소면 → 그 글자
- 심볼 안에
value파트가 있으면 → 거기 (수치 표시기 · 계량기 · 라이브 시계가 이 파트를 가지고 있습니다) - 그래도 없으면 → 요소 전체
설정 항목
| 이름 | 값 | 기본 | 설명 |
|---|---|---|---|
| 태그 | tagId | — | 읽을 게이트웨이 태그. |
| 규칙 | threshold[] | (없음) | 출력이 보여 줄 글자입니다. 숫자를 '가동'·'정지' 같은 말로 바꿀 때. |
| 기본값 | string | (없음) | 어느 규칙에도 안 맞을 때 보여 줄 글자. |
| 숫자 서식 | — | — | 배율·소수점·단위 등은 숫자 서식 에 모아 두었습니다. |
| part | string | (자동) | 글자를 넣을 부위. 지정하지 않으면 알아서 찾습니다(아래 참고). |
동작
값 45.67 · 소수점 1자리 · 단위 % → 45.7 %. 규칙 >= 90 → 고수위 가 걸려 있고 값이 95면 숫자 대신 고수위 가 나옵니다.
심볼에는 파트를 지정하지 않아도 됩니다. 심볼 안의 SVG 를 글자로 덮어써 버리면 그림이 통째로 사라지므로, value 파트를 먼저 찾도록 되어 있습니다. 수치 표시기 심볼에 그냥 걸면 숫자 자리에만 들어갑니다.
빈 문자열은 0으로 바뀌지 않고 그대로 빈칸으로 남습니다. 표에서 아무 행도 안 고른 상태처럼 "값이 아직 없음"을 0으로 표시해 버리면 오해를 부르기 때문입니다. 숫자가 아닌 값도 마찬가지로 원본이 그대로 보입니다.
글자가 요소보다 길면 넘칩니다. 자릿수가 들쭉날쭉한 값(유량·적산)은 숫자 서식 의 소수점 자리를 고정해 두는 편이 안전합니다.
해 보기
제품 샘플 › 물탱크 미믹수위·상태·경보 문구를 태그 하나씩으로
제품에 들어 있는 샘플
제품 샘플 › 지하철 차내 정차 안내안내판 — 규칙으로 값을 문구로 바꾸는 예
제품에 들어 있는 샘플
제품 샘플 › 바인딩 표현 사전18가지 prop 을 한 화면에 나란히 놓고 비교
제품에 들어 있는 샘플