syidaxdesign system
홈 가격 내 정보
ComponentsFeedback

Empty

표시할 데이터가 없는 이유와 다음 행동을 안내합니다.

<sy-empty>설치 안내 기본 사용법
Live preview
컴포넌트를 조작하면 여기에 결과가 표시됩니다.
코드 보기
HTML
<sy-empty text="아직 프로젝트가 없습니다." id="sample"></sy-empty>

<script type="module">
  const component1 = document.querySelector("#sample");
  Object.assign(component1, {
    "description": true
  });
</script>

사용 가이드

#

조회·검색 후 표시할 데이터가 없는 이유와 다음 행동을 알려줍니다. 아직 불러오는 중이라면 Skeleton이나 Spinner를 사용하세요.

  1. 비어 있는 이유 설명

    text로 데이터가 없는 상태인지, 검색 결과가 없는 상태인지 구체적으로 알립니다.

  2. 다음 행동 제공

    기본 슬롯에 만들기·필터 초기화 같은 동작을 넣으세요.

  3. 상황에 맞는 보조 표현

    icon 슬롯으로 아이콘을 바꿀 수 있습니다. description을 false로 설정해 설명을 숨기면 상태를 알 수 있는 다른 접근성 안내를 제공하세요.

기능별 예제

#

2개 주제에서 필요한 기능을 선택하세요. 속성 설정, 메서드 호출, 이벤트 결과와 슬롯 구성을 실행 화면과 코드로 확인할 수 있습니다.

사용 예제 · Overview

선택한 예제를 직접 조작해 보세요. 여러 구성이 있는 주제는 세부 예제를 바꿀 수 있습니다.

코드 보기
HTML
예제를 불러오고 있습니다.

속성 · Description

설정에 따라 표시와 동작이 어떻게 달라지는지 확인하세요.

코드 보기
HTML
예제를 불러오고 있습니다.

API reference

#

이름에 마우스를 올리거나 키보드로 선택하면 적용 코드를 확인할 수 있습니다. 터치 화면에서는 이름을 누르세요.

<sy-empty>

Properties

Attribute / PropertyTypeDefaultDescription
string'No Data'빈 상태의 안내 문구입니다.
string''기본 아이콘을 바꿀 이미지 또는 SVG의 URL입니다. icon 슬롯이 있으면 슬롯을 우선합니다.
string | booleantruetrue는 문구 표시, false는 숨김입니다. 이전 버전의 문자열 문구도 허용합니다.

객체·배열 값은 JavaScript 프로퍼티로 전달합니다.

Slots

SlotDescription
icon 영역에 표시할 내용입니다.
컴포넌트의 본문 또는 자식 항목입니다.
Design SystemTab 이동 Enter 열기