기본 사용법

컴포넌트를 추가하고 속성, 상태, 이벤트를 애플리케이션에 연결합니다.

컴포넌트 추가#

설치에서 연결한 번들은 포함된 커스텀 엘리먼트를 자동으로 등록합니다. 일반 HTML 요소처럼 페이지에 태그를 추가하세요.

HTML

<div class="sy-theme sy-theme-light">
  <sy-button id="save-button" variant="primary">저장하기</sy-button>
</div>

속성과 상태#

문자열 속성은 HTML에 값을 지정합니다. Button의 disabled, loading은 값 없이 속성을 추가해 켤 수 있습니다.

HTML

<sy-button variant="primary" size="large">저장하기</sy-button>
<sy-button disabled>사용할 수 없음</sy-button>
<sy-button variant="primary" loading>저장 중</sy-button>

상태를 해제할 때는 해당 속성을 제거하세요. JavaScript에서는 button.disabled = false 또는 button.loading = false로 설정합니다.

이벤트 연결#

일반 Button의 동작은 표준 click 이벤트로 처리합니다. 컴포넌트 프로퍼티나 메서드에 접근하기 전에는 등록이 완료될 때까지 기다립니다.

JavaScript

await customElements.whenDefined('sy-button');

const button = document.querySelector('#save-button');
button.addEventListener('click', async () => {
  button.loading = true;
  try {
    await saveChanges(); // 애플리케이션의 저장 함수
  } finally {
    button.loading = false;
  }
});

폼 제출은 폼의 submit 이벤트에서 처리하세요. Button이 제공하는 모든 속성과 메서드는 Button API에서 확인할 수 있습니다.