Empty State
Empty State (빈 상태)
리소스가 비어 있거나 사용할 수 없을 때 이를 나타내는 컴포넌트예요. 데이터가 없을 때 안내 메시지나 액션 버튼을 보여주는 데 쓰여요.
출처: 문서
본문
사용법 (Usage)
import { EmptyState } from "@chakra-ui/react"
<EmptyState.Root>
<EmptyState.Content>
<EmptyState.Indicator />
<EmptyState.Title />
<EmptyState.Description />
</EmptyState.Content>
</EmptyState.Root>
:::info
닫힌 컴포넌트 조합(closed component composition)을 선호한다면 아래 스니펫을 확인해 보세요.
:::
예제 (Examples)
크기 (Sizes)
size prop을 사용해서 Empty State의 크기를 설정할 수 있어요.
| 예제 (empty-state-sizes) |
액션 (Action)
액션 버튼이 있는 empty state의 예시예요.
| 예제 (empty-state-with-action) |
리스트 (List)
리스트가 있는 empty state의 예시예요.
| 예제 (empty-state-with-list) |
닫힌 컴포넌트 (Closed Component)
닫힌 컴포넌트 조합을 위해 Empty State를 구성하는 방법이에요.
| 예제 코드 (empty-state-closed-component) |
프로젝트에 닫힌 컴포넌트를 자동으로 추가하고 싶다면 다음 명령을 실행하세요.
npx @chakra-ui/cli snippet add empty-state
Props
Root
| PropTable (EmptyState / Root) |
탐색 (Explorer)
Empty State 컴포넌트의 각 부분을 인터랙티브하게 살펴볼 수 있어요. 사이드바에서 부분을 클릭하면 미리보기에서 강조 표시돼요.
| 예제 (empty-state-basic) |