Toastr는 웹 응용 프로그램에서 사용자에게 시각적인 알림 메시지를 제공하는 데 사용되는 인기있는 JavaScript 알림 라이브러리입니다.

알림 메시지의 표시 우선순위를 설정하여, 사용자에게 가장 중요한 정보를 먼저 보여줄 수 있습니다. 이를 수행하기 위해 Toastr에는 몇 가지 옵션이 있습니다.

Toastr 우선순위 옵션

Toastr는 알림 메시지를 표시하는 동안 다양한 옵션을 제공합니다. 이 중 일부는 우선순위를 설정하는 데 사용할 수 있습니다. 다음은 이러한 옵션의 몇 가지 예시입니다.

timeOut

알림 메시지가 표시된 후 유지되는 시간을 설정합니다. 이 시간을 조정하여 표시 기간을 더 오래 혹은 더 짧게 할 수 있습니다.

toastr.options.timeOut = 2000;  // 2초 후에 알림 메시지 사라짐

extendedTimeOut

사용자가 마우스를 올려놓거나 포커스를 가지고 있는 경우, 알림 메시지가 유지되는 시간을 설정합니다.

toastr.options.extendedTimeOut = 1000;  // 마우스를 올려놓은 동안 알림 메시지가 1초간 유지됨

tapToDismiss

사용자가 알림 메시지를 터치할 때 메시지를 사라지게 할지 여부를 설정합니다.

toastr.options.tapToDismiss = true;  // 알림 메시지 터치시 사라짐

우선순위 옵션 사용 예시

다음은 Toastr에서 우선순위 옵션을 설정하여 알림 메시지에 대한 사용자 정의를 보여주는 간단한 예시입니다.

toastr.options.timeOut = 2000;  
toastr.options.extendedTimeOut = 1000; 
toastr.options.tapToDismiss = true;  

toastr.success('우선순위 메시지', '중요', { "timeOut": "5000" });
toastr.info('일반 메시지');
toastr.error('에러 메시지', '오류');

위의 코드 예시에서, 첫 번째 알림 메시지는 success 스타일로, 두 번째 알림 메시지는 info 스타일로, 세 번째 알림 메시지는 error 스타일로 표시됩니다.

우선순위 옵션은 메시지의 유지 시간, 마우스 호버 시 긴 유지 시간, 메시지 터치 시 사라짐 여부 등을 조절할 때 유용하게 활용될 수 있습니다.

이것으로 Toastr를 사용하여 알림 메시지의 우선순위를 설정하는 방법에 대해 알아보았습니다.

더 자세한 내용은 Toastr 공식 문서를 참조하십시오.