Empty 빈 상태

데이터가 비어 있을 때의 플레이스홀더 알림입니다. 컨테이너는 role="status"이며, 빈 상태가 나타나면 스크린 리더가 자동으로 알려줍니다.

기본 사용법

기본 사용법

데이터가 없습니다

<script setup lang="ts">
</script>

<template>
  <LhEmpty />
</template>

<script>
export default {}
</script>

<template>
  <LhEmpty />
</template>

설명 커스터마이징

설명 커스터마이징

검색 결과가 비어 있습니다

<script setup lang="ts">
</script>

<template>
  <LhEmpty description="검색 결과가 비어 있습니다" />
</template>

<script>
export default {}
</script>

<template>
  <LhEmpty description="검색 결과가 비어 있습니다" />
</template>

이미지 커스터마이징

이미지 커스터마이징

주문이 없습니다

<script setup lang="ts">
</script>

<template>
  <LhEmpty image="/logo.svg" description="주문이 없습니다" />
</template>

<script>
export default {}
</script>

<template>
  <LhEmpty image="/logo.svg" description="주문이 없습니다" />
</template>

조작 포함

조작 포함

아직 즐겨찾기한 콘텐츠가 없습니다

<script setup lang="ts">
</script>

<template>
  <LhEmpty description="아직 즐겨찾기한 콘텐츠가 없습니다">
    <template #actions>
      <LhButton type="primary" size="small">둘러보기</LhButton>
      <LhButton size="small">새로고침</LhButton>
    </template>
  </LhEmpty>
</template>

<script>
export default {}
</script>

<template>
  <LhEmpty description="아직 즐겨찾기한 콘텐츠가 없습니다">
    <template #actions>
      <LhButton type="primary" size="small">둘러보기</LhButton>
      <LhButton size="small">새로고침</LhButton>
    </template>
  </LhEmpty>
</template>

Empty API

Props

속성	설명	타입	기본값
description	설명 글자(전달하지 않으면 언어 팩 empty.description을 사용)	string	—
image	커스텀 이미지 URL(기본 인라인 일러스트를 대체)	string	—
sx	sx 빠른 레이아웃 속성	LhSxProps	—

Slots

슬롯	설명	기본 내용
default	커스텀 시각 영역(일러스트를 대체)	기본 수묵 일러스트
description	커스텀 설명	언어 팩 empty.description
actions	조작 영역	—

접근성

• 컨테이너 role="status": 빈 상태가 나타나면 자동으로 알려줍니다
• 장식용 이미지는 alt=""로 스크린 리더에서 숨기고, 의미는 설명 글자가 담당합니다

타입 정의

이 컴포넌트가 외부로 내보내는 TypeScript 타입 구조는 다음과 같습니다(packages/components/empty/src/types.ts와 @lh-ui/share/core/* 소스에서 자동 추출, 각 항목을 펼쳐 전체 정의를 확인하세요. 속성 설명은 위쪽 Props 표를 참고하세요).

LhEmptyProps

export interface LhEmptyProps {
  /** 빈 상태 설명 글자(전달하지 않으면 언어 팩 empty.description을 사용) */
  description?: string
  /** 커스텀 이미지 URL(기본 인라인 일러스트를 대체) */
  image?: string
  /** sx 빠른 레이아웃 속성 */
  sx?: LhSxProps
}