Floating Label (플로팅 라벨)
다른 이름 Float label, Animated placeholder
입력란에 포커스가 가거나 값이 들어가면, 플레이스홀더 라벨이 위로 올라가며 작아집니다.
쓰는 곳
폼, 로그인 입력란
변형
- focus float
- not(:placeholder-shown)
프롬프트
[적용할 곳]을 원하는 위치로 바꿔 AI 에이전트에 붙여 넣으세요. 프롬프트에 모션 이름이 들어 있어, 다음부터는 이름만으로도 요청할 수 있습니다.
[적용할 곳]에 플로팅 라벨(Floating Label)을 넣어 줘. 플로트 라벨(float label), 애니메이티드 플레이스홀더(animated placeholder)라고도 불러.
입력란에 포커스가 가거나 값이 있으면, 안에 있던 라벨이 부드럽고 빠르게 위로 미끄러지며 작아져 입력란 위쪽 가장자리에 걸치고, 입력란이 비어 있고 포커스도 없을 때만 다시 내려오게 해 줘.
입력란과 연결된 진짜 라벨로 유지하고, 입력란 높이가 바뀌지 않게 해서 폼이 밀리지 않게 해 줘.