자동 넘김 멈춤
공지 바·지표 티커·시장 띠처럼 저절로 넘어가는 것을 멈추고 다시 돌리는 작은 단추예요. 한 곳에서 멈추면 화면의 자동 넘김이 모두 멈춰요.
모바일PCAutoPauseButton
고르기#
이 부품을 언제 쓰고, 언제 다른 것을 쓰는지예요.
언제 쓰나#
- 저절로 넘어가는 띠·티커를 멈추고 다시 돌리기(한 상태).
인터페이스#
타입에서 자동으로 뽑은 표예요.
AutoPauseButton#
| 속성 | 기본값 | 타입 | 설명 |
|---|---|---|---|
| className | - | string | 배치용 클래스예요. 모양(색·크기)은 덮어쓰지 않아요. |
* 필수예요. 표는 타입에서 자동으로 뽑았어요.
접근성#
- aria-pressed로 멈춤을 알려요(눌림 = 멈춤).
- 움직임 줄이기를 켠 사람에게는 처음부터 멈춰 있어요.
- WCAG 2.2.2 일시 정지·정지·숨기기.
가이드라인#
언제 쓰나요#
- 5초 넘게 저절로 움직이거나 넘어가는 띠·티커 옆에.
쓰는 규칙#
이렇게 써요
- 넘기기 점이나 LIVE 표시 옆, 닫기 단추 왼쪽에 둬요.
- 자리·크기만 className으로 정해요(24px 이상).
이렇게 하지 않아요
- 띠마다 따로 멈춤 상태를 만들지 않아요 - useAutoPause 하나를 같이 써요.
플랫폼별 차이#
| 플랫폼 | 차이 |
|---|---|
| 모바일 | PC와 같은 모양이에요. 글자 역할만 폰 크기로 바뀌어요. |
| PC | 마우스가 있는 기기에서만 hover가 켜지고, 키보드 초점 링이 보여요. |