SweetAlert는 사용자에게 깔끔하고 강렬한 경고 및 확인 메시지를 제공하는 JavaScript 라이브러리입니다. 이 라이브러리는 사용하기 간편하면서도 다양한 기능을 제공하여 개발자에게 편의를 제공합니다. 이번에는 SweetAlert의 정보창 기능에 대해 알아보겠습니다.
정보창 생성하기
SweetAlert를 사용하여 정보창을 생성하는 것은 매우 간단합니다. 아래는 SweetAlert를 사용하여 정보창을 생성하는 기본적인 예제입니다.
swal("Hello!", "SweetAlert에 오신 것을 환영합니다!", "info");
swal 함수의 첫 번째 인자는 정보창의 제목을 의미하고, 두 번째 인자는 정보창에 표시할 내용을 의미합니다. 세 번째 인자는 정보창에 사용할 아이콘 종류를 나타냅니다. 위의 예제에서는 “info”로 설정하여 정보 아이콘을 사용하였습니다.
정보창 옵션 설정하기
SweetAlert의 정보창에는 다양한 옵션을 설정할 수 있습니다. 이를 통해 정보창의 외관이나 동작을 사용자 정의할 수 있습니다. 아래는 SweetAlert 정보창의 일부 옵션들의 예시입니다.
swal({
title: "제목",
text: "내용",
icon: "info",
closeOnClickOutside: false,
buttons: {
confirm: "확인",
},
});
위의 예제에서는 title과 text 옵션을 사용하여 정보창의 제목과 내용을 설정하였습니다. icon 옵션을 사용하여 정보 아이콘을 설정하였고, closeOnClickOutside 옵션을 사용하여 정보창 외부를 클릭해도 정보창이 닫히지 않도록 설정하였습니다. 마지막으로, buttons 옵션을 사용하여 확인 버튼의 텍스트를 “확인”으로 설정하였습니다.
정보창에 이벤트 추가하기
SweetAlert의 정보창에는 이벤트를 추가하여 사용자의 동작에 반응할 수 있습니다. 예를 들어, 사용자가 확인 버튼을 클릭했을 때 특정한 동작을 수행하도록 할 수 있습니다. 아래는 확인 버튼을 클릭했을 때 메시지를 출력하는 예제입니다.
swal({
title: "제목",
text: "내용",
icon: "info",
closeOnClickOutside: false,
buttons: {
confirm: {
text: "확인",
value: true,
visible: true,
className: "btn-primary",
closeModal: true,
},
},
}).then((value) => {
if (value) {
console.log("확인 버튼을 클릭했습니다!");
}
});
위의 예제에서는 buttons 옵션을 사용하여 확인 버튼의 옵션을 설정하였습니다. value 속성을 true로 설정하여 확인 버튼 클릭 시 then 함수로 전달되는 값이 true가 되도록 하였습니다. 이후 then 함수를 사용하여 확인 버튼이 클릭되었을 때 동작을 수행하도록 하였습니다.