slideY 바인딩
값에 따라 요소가 위아래로 움직입니다 — 수문판, 게이지 손잡이, 눈금 위의 표식.
필요: 파트가 필요 없습니다 — 요소 전체가 움직입니다. 대신
slidePx 를 반드시 정해야 합니다prop: slideY 태그 필수 slidePx = 100% 일 때의 이동 거리(px, 음수 = 위로)설명
채움이 아니라 물체 자체가 움직여야 할 때 씁니다. 수문판이 내려오고, 게이지 손잡이가 눈금을 따라 오르고, 표식이 막대 옆을 따라가는 식입니다.
값을 levelMin~levelMax 구간의 비율로 바꾼 뒤, 그 비율만큼 slidePx 를 이동합니다. 요소의 원래 자리는 0% 위치이고, 거기서부터 상대적으로 움직입니다.
level 과 달리 파트가 필요 없습니다. 요소 안을 들여다보지 않고 요소 전체를 옮기므로, 직접 그린 도형이든 심볼이든 그림이든 다 됩니다.
설정 항목
| 이름 | 값 | 기본 | 설명 |
|---|---|---|---|
| 태그 | tagId | — | 읽을 게이트웨이 태그. |
| levelMin | number | 0 | 이동 0 에 해당하는 값. |
| levelMax | number | 100 | 이동이 slidePx 만큼 되는 값. |
| slidePx | number | 0 | 100% 일 때 움직일 거리(px). 음수면 위로 올라갑니다. 기본값이 0이라 정하지 않으면 아무 데도 가지 않습니다. |
동작
값 50 · levelMin 0 · levelMax 100 · slidePx −80 → 위로 40px. 구간 밖의 값은 0%/100% 로 잘립니다.
slidePx 를 정하지 않으면 아무 일도 일어나지 않습니다. 기본값이 0이라 "바인딩을 걸었는데 안 움직인다"의 대부분이 이것입니다. 위로 올릴지 아래로 내릴지도 이 값의 부호로 정합니다.
같은 요소에 y 를 함께 걸지 마세요. 둘이 같은 자리(요소의 세로 이동값)를 씁니다. 나중에 계산된 쪽이 앞의 것을 덮으므로, 두 태그 중 하나는 무시된 것처럼 보입니다. 가로 이동(x)은 slideY 가 건드리지 않으므로 함께 써도 됩니다.
움직임의 기준은 작화에서 놓아 둔 자리입니다. 눈금과 맞추려면 값이 0일 때의 위치에 요소를 놓고, slidePx 로 최대치까지의 거리를 재어 넣으세요.
해 보기
제품 샘플 › 수문 개도 제어수문판이 개도만큼 내려온다 — slideY 의 대표 쓰임
제품에 들어 있는 샘플
제품 샘플 › 안마의자 제어좌석 위치 표시가 눈금을 따라 이동
제품에 들어 있는 샘플
제품 샘플 › 바인딩 표현 사전18가지 prop 을 한 화면에 나란히 놓고 비교
제품에 들어 있는 샘플