EmptyState
빈 상태·결과 없음·아직 읽지 않음 문구와 행동 하나.
- 출시 화면에서 사용
개요
미리보기
Empty
Nothing to show here yet.
예시
상태
비어 있음
Empty
Nothing to show here yet.
결과 없음
No results
Nothing here in the scanned dates.
아직 읽지 않음
Not scanned yet
Connect a source to see this.
행동 없음
Empty
Nothing to show here yet.
가장 긴 문구 (es)
Not scanned yet
Gmail과 Google Calendar 중 하나를 연결하면 지난 기록을 날짜순으로 여기에 보여줘요.
쓰임 예
점선 카드
Not scanned yet
Connect a source to see this.
화면별 문장
Empty
이 폴더에는 아직 기록이 없어요.
이렇게 · 이렇게 하지 않기
- 이렇게 “아직 읽지 않음”, “읽었지만 결과 없음”, “일부 실패”를 서로 다른 문장으로 쓴다.
- 이렇게 행동은 0–1개. 결과 없음에서는 검색어를 되풀이하고 필터를 지우게 한다.
- 이렇게 하지 않기 0을 큰 숫자로 그리지 않는다. 결과가 없을 때 접근할 수 없는 과거 자료를 되살려 준다고 약속하지 않는다.
- 이렇게 하지 않기 Skeleton처럼 보이게 그리지 않는다(마키 행·회색 막대 금지). 업셀·두 번째 버튼을 넣지 않는다.
토큰과 속성
| 이름 | 타입 | 기본값 | 설명 |
|---|---|---|---|
kind? | 'empty' | 'no-results' | 'not-collected' | empty | empty는 읽었지만 없음, no-results는 검색·필터 결과 없음, not-collected는 아직 읽지 않은 범위. 종류마다 아이콘·문장·행동이 다르다. |
action? | boolean | true | 행동 하나를 보인다. not-collected는 “출처 연결”, no-results는 “필터 지우기”, empty는 actionLabel이 있을 때만. |
actionLabel? | ReactNode | | 종류의 기본 행동 라벨을 바꾼다. 동사로 시작한다. |
actionHref? | string | | 행동이 이동이면 목적지(Button href). |
title? | ReactNode | | 제목. 비우면 종류의 상태 이름(공통 상태 문구). |
description? | ReactNode | | 문장 하나. 비우면 공통 문장. 가능하면 화면별 문장을 쓴다. |
query? | string | | 검색어. no-results 제목에 되풀이한다(“‘회의’ 결과 없음”). |
headingLevel? | 2 | 3 | 4 | 3 | 문서 구조상 제목 레벨. 크기는 바뀌지 않는다. |
framed? | boolean | false | 단독 카드로 쓸 때 점선 테두리를 둔다. 목록·상세 안에서는 끈다. |
mark? | ReactNode | — | 브랜드 자리(아직 마크 없음). 주면 아이콘 타일을 대신한다. 정지된 장식이어야 하고 큰 “0”이나 진행을 암시하는 그림은 넣지 않는다. |
onAction | — | — | 행동 버튼을 누를 때. |
| 그 밖의 속성 | — | — | className·style은 받지 않는다. 나머지 네이티브 속성은 바깥 요소로 전달된다. |
접근성
키보드: 행동 버튼만 Tab에 들어간다.
- 렌더 자체를 알리지 않는다. 상태 전환 알림은 StateView가 한다.
- 아이콘·마크 자리는 aria-hidden. 제목 레벨은 문맥에 맞춰 headingLevel로 정한다.