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로 설정해 설명을 숨기면 상태를 알 수 있는 다른 접근성 안내를 제공하세요.

예제

#

첫 사용

아직 항목이 없는 초기 상태를 설명합니다.

코드 보기
HTML
<sy-empty text="아직 프로젝트가 없습니다."></sy-empty>

다음 행동

기본 슬롯에 생성 버튼을 배치합니다. 버튼 이벤트는 앱의 생성 흐름과 연결하세요.

코드 보기
HTML
<sy-empty text="첫 프로젝트를 만들어 보세요.">
  <sy-button variant="primary">프로젝트 만들기</sy-button>
</sy-empty>

직접 지정한 아이콘

icon 슬롯에 원하는 내용을 넣어 빈 상태의 맥락을 설명합니다.

코드 보기
HTML
<sy-empty text="보관함이 비어 있습니다."><span
    slot="icon"
    aria-hidden="true"
    style="font-size:38px"
  >◇</span></sy-empty>

API reference

#

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

<sy-empty>

Properties

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

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

Slots

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