Web - Snackbar (Added in 2.2)
Added in 2.2
Definition
정의 | Snackbar |
최적화 대상 | Desktop Mobile |
기획 배포 | 완료 |
디자인 가이드 배포 | 완료 |
개발 코드 배포 | 완료 |
Principle
Snackbar는 사용자에게 간결한 피드백을 제공하는 컴포넌트입니다.
작업의 상태나 시스템에서 발생한 간단한 정보를 화면에 잠시 표시합니다. 사용자가 수행한 작업(저장, 삭제, 다음으로 이동 등)의 결과를 알리거나 시스템의 상태 변경(네트워크 연결 끊김 등)을 짧게 알리는 용도로 사용됩니다.
여러 메시지가 순차적으로 표시될 수 있음 (보통 한 번에 하나만 표시 권장)
간결하고 명확한 메시지
사용자에게 즉시 이해 가능한 짧은 문장을 사용합니다.
사용자 흐름 방해 금지
스낵바는 사용자와 상호작용을 강요하지 않아야 하며 자동으로 사라져야 합니다.
중요한 결정이나 경고는 Dialog를 사용하는 것이 적절합니다.
선택적 액션 버튼
사용자의 실수를 되돌릴 수 있도록 되돌리기, 재시도 등의 버튼 추가가 가능합니다.
액션은 최대 1개까지 가능합니다.
되돌리기 후 명시적으로 성공 여부에 대한 피드백이 반드시 필요할 때 스낵바를 사용합니다.
알림 중첩 피하기
여러 스낵바가 동시에 겹치지 않도록 합니다.
Spec
Guide
Size, Property
배경 영역 | SectionSheet
|
|---|---|
텍스트 | TextLabel
|
액션버튼 | TextButton
|
아이콘 버튼 | IconButton
|
Color 구성
정리 필요
Color Key
배경 영역 | SectionSheet
|
|---|---|
텍스트 | TextLabel
|
액션버튼 | TextButton
|
아이콘 버튼 | IconButton
|
Properties
text *
텍스트 값입니다.
기획 지시사항
기획서 상 작성 방법 : 텍스트만 기술
Type |
|
|---|---|
Default | - |
actionBtnText
액션 버튼에 표현될 텍스트 값입니다.
기획 지시사항
기획서 상 작성 방법 : 텍스트만 기술
Type |
|
|---|---|
Default | - |
position
스낵바의 위치를 결정합니다.
기획 지시사항
기획서 상 작성 방법 : Enum Values 중 하나를 사용함
Type |
|
|---|---|
Default |
|
Enum Values Description | |
|---|---|
|
|
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
closeBtnMode
스낵바의 닫기 버튼 사용 유무를 결정합니다.
기획 지시사항
기획서 상 작성 방법 : Enum Values 중 하나를 사용함
Type |
|
|---|---|
Default |
|
Enum Values Description | |
|---|---|
|
|
| |
duration
스낵바가 사라지는 시간을 결정합니다.
단위는 ms (0이면 자동으로 사라지지 않음)
기획 지시사항
기획서 상 작성 방법 : 숫자
Type |
|
|---|---|
Default |
|
onActionBtnClick
액션버튼 클릭된 시점에 이벤트를 부여합니다.
기획 지시사항
기획서 상 작성 방법 : 기획자가 직접 prop을 기술하지 않음
Type |
|
|---|---|
Default | - |
anchorRef
기준이 될 특정 DOM 엘리먼트 프롭입니다. (없으면 뷰포트를 기준으로 함)
기준이 될 특정 DOM 엘리먼트 프롭이 있다면
position이 top, bottom인 경우 기준 DOM 너비만큼 차지
그 외 position인 경우 내용에 따라 너비 결정 (max-width: 640px)
뷰포트를 기준으로 한다면
내용에 따라 너비 결정 (max-width: 640px)
기획 지시사항
기획서 상 작성 방법 : 기획자가 직접 prop을 기술하지 않음
Type |
|
|---|---|
Default | - |
문서 작성 정보
소유자 / 관리자 | 김혜진 |
|---|---|
변경 이력 |
|