Empty 빈 상태

빈 상태일 때의 자리 표시 알림입니다.

기본 사용법

데이터가 없습니다

사용자 지정 설명 문구

import { LhEmpty, LhButton } from '@lh-ui/react'

export default function Demo() {
  return (
    <LhEmpty
      description="사용자 지정 설명 문구"
      actions={<LhButton type="primary">다시 불러오기</LhButton>}
    />
  )
}

Empty Props

프로퍼티	설명	타입	선택 가능한 값	기본값
description	설명 문구 (미전달 시 언어 팩 `empty.description` 사용)	`ReactNode`	—	`'暂无数据'`
image	사용자 지정 이미지 URL	`string`	—	—
actions	작업 영역	`ReactNode`	—	—
sx	빠른 레이아웃 프로퍼티	`SxProps`	—	—

사용자 지정 이미지

image 프로퍼티나 children 노드를 전달하면 모두 사용자 지정 이미지 컨테이너로 처리됩니다 (--custom 수식자가 max-width: 160px / max-height: 120px로 제한). 둘 다 전달하지 않으면 내장 수묵(水墨) 인라인 일러스트를 렌더링합니다 (테마 변수로 색상을 적용하고 밝은/어두운 모드에 자동 대응).

접근성

루트 요소는 role="status"입니다 (부드럽게 읽어줌). 기본 일러스트는 aria-hidden으로 스크린 리더를 방해하지 않습니다.

스타일

import '@lh-ui/react/style/empty'

기본 사용법​

Empty Props​

스타일​

기본 사용법

Empty Props

스타일