Toastr는 사용자에게 메시지를 표시하는 간편한 방법을 제공하는 도구입니다. 하지만 기본적으로 Toastr에는 버튼이 없어서 사용자와의 상호 작용이 어려울 수 있습니다. 이를 보완하기 위해 Toastr에 버튼을 추가하여 사용자와의 상호 작용성을 향상시킬 수 있습니다.

Toastr에 버튼 추가하기

Toastr에 버튼을 추가하는 방법은 매우 간단합니다. 아래 예시 코드를 통해 Toastr에 버튼을 추가하는 방법을 살펴보겠습니다.

// Toastr에 버튼이 포함된 옵션을 정의합니다.
var options = {
  closeButton: true, // 닫기 버튼을 표시합니다.
  onclick: function() {
    // 사용자가 버튼을 클릭했을 때 실행될 동작을 정의합니다.
    alert('버튼을 클릭했습니다.');
  }
};

// Toastr를 호출하면서 옵션을 전달합니다.
toastr.success('메시지', '제목', options);

위 코드에서 options 객체에 closeButton 속성을 true로 설정하여 Toastr에 닫기 버튼을 추가하고, onclick 속성에 사용자가 버튼을 클릭했을 때 실행될 동작을 정의할 수 있습니다.

결과 확인하기

위 코드를 사용하여 Toastr에 버튼을 추가한 후, 해당 메시지를 화면에 띄워보면 이제 메시지에 버튼이 포함된 것을 확인할 수 있습니다. 사용자가 버튼을 클릭하면 alert 창이 뜨는 것을 확인할 수 있을 것입니다.

이처럼 Toastr에 버튼을 추가하여 상호 작용성을 높일 수 있습니다.

상호 작용성을 높이기 위한 Toastr 버튼 추가에 대한 내용을 살펴봤습니다. Toastr를 통해 좀 더 효과적으로 사용자와 상호 작용할 수 있게 되었습니다.

더 많은 자세한 내용은 Toastr 공식 문서를 참고하시기 바랍니다.

Toastr 공식 문서