컴포넌트FOX · Snackbar

스낵바

화면 아래에 잠깐 떴다 사라지는 한 줄 안내예요. 먹색 바탕에 종이색 글자로 쓰고, 3초 뒤에 저절로 사라져요.

모양

글자만 있는 것과 오른쪽에 글자 버튼이 붙은 것, 두 가지예요.

LOOK

저장했어요

메시지를 지웠어요

<Snackbar message="저장했어요" />
<Snackbar message="메시지를 지웠어요" actionLabel="되돌리기" />

띄우기

앱 맨 위에 SnackbarProvider를 한 번 감싸고, 어디서든 useSnackbar의 show를 불러요. 한 번에 하나만 보이고, 새로 띄우면 앞의 것을 바꿔요.

USE SNACKBAR

<SnackbarProvider>
  <App />
</SnackbarProvider>

const { show } = useSnackbar();
show("저장했어요");
show("메시지를 지웠어요", { actionLabel: "되돌리기", onAction: undo });

접근성

자리 표시 영역에 role이 status로 붙어 있어서 화면 읽기 도구가 내용을 읽어 줘요. 글자 버튼은 키보드로 누를 수 있고, 3초 안에 눌러야 하는 중요한 행동은 스낵바에 넣지 않아요.

이렇게 써요

저장했어요

이렇게한 줄, 결과만 짧게 말해요.

변경 사항이 정상적으로 저장되었으며 다음 화면에서 확인하실 수 있습니다

이렇게 말고길면 3초 안에 다 읽지 못해요.

속성

속성	값	기본값	설명
`message`	string	없음	Snackbar. 안내 한 줄
`actionLabel`	string	없음	Snackbar. 오른쪽 글자 버튼 이름
`onAction`	() => void	없음	Snackbar. 글자 버튼을 누르면 불린다
`show(message, options)`	useSnackbar()	없음	띄우기. options는 actionLabel, onAction, duration
`duration`	number	`3000`	SnackbarProvider 또는 show 옵션. 사라질 때까지 밀리초
`container`	HTMLElement \| null	`document.body`	SnackbarProvider. 요소를 주면 그 안에서만 뜬다. 문서 예시용