개요[편집 / 원본 편집]
SweetAlert2는 JavaScript로 만들어진 팝업 박스 대체 라이브러리입니다. 사용자 친화적인 디자인과 반응성을 갖추고 있으며, 사용자가 쉽게 커스터마이징 할 수 있습니다. WAI-ARIA를 준수하여 접근성이 좋으며, 별도의 의존성이 없습니다.
설치 방법[편집 / 원본 편집]
NPM을 통한 설치[편집 / 원본 편집]
npm install sweetalert2
CDN을 통한 설치[편집 / 원본 편집]
HTML 파일 내에 다음 코드를 추가하면 CDN을 통해 SweetAlert2를 사용할 수 있습니다.
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
사용법[편집 / 원본 편집]
기본 사용법[편집 / 원본 편집]
JavaScript 코드 내에서 다음과 같이 사용할 수 있습니다.
Swal.fire('안녕하세요!')
옵션 사용 예제[편집 / 원본 편집]
Swal.fire({
title: '에러!',
text: '무언가 잘못되었어요!',
icon: 'error',
confirmButtonText: '확인'
})
이미지와 함께 사용[편집 / 원본 편집]
Swal.fire({
title: 'Sweet!',
text: 'Modal with a custom image.',
imageUrl: 'https://example.com/image.png',
imageWidth: 400,
imageHeight: 200,
imageAlt: 'Custom image'
})
타이머 사용[편집 / 원본 편집]
let timerInterval
Swal.fire({
title: '자동으로 닫혀요!',
html: 'I will close in <b></b> milliseconds.',
timer: 2000,
timerProgressBar: true,
willOpen: () => {
Swal.showLoading()
timerInterval = setInterval(() => {
const content = Swal.getHtmlContainer()
if (content) {
const b = content.querySelector('b')
if (b) {
b.textContent = Swal.getTimerLeft()
}
}
}, 100)
},
willClose: () => {
clearInterval(timerInterval)
}
}).then((result) => {
if (result.dismiss === Swal.DismissReason.timer) {
console.log('I was closed by the timer')
}
})
체인 팝업[편집 / 원본 편집]
Swal.mixin({
input: 'text',
confirmButtonText: '다음 →',
showCancelButton: true,
progressSteps: ['1', '2', '3']
}).queue([
{
title: '질문 1',
text: '첫 번째 질문'
},
'두 번째 질문',
'세 번째 질문'
]).then((result) => {
if (result.value) {
const answers = JSON.stringify(result.value)
Swal.fire({
title: '완료!',
html: '답변: <pre><code>' + answers + '</code></pre>',
confirmButtonText: '멋져!'
})
}
})
사용 가능한 아이콘[편집 / 원본 편집]
success
error
warning
info
question
주의 사항[편집 / 원본 편집]
특정 도메인[1][2]에서 사용 시 주의가 필요하다. 해당 도메인에서 사용하면 웹사이트 탐색이 차단되고 우크라이나의 국가가 재생된다.
라이선스[편집 / 원본 편집]
MIT 라이선스를 사용중이다.
유사 라이브러리[편집 / 원본 편집]
외부 링크[편집 / 원본 편집]
각주[편집 / 원본 편집]
- ↑
.ru
,.su
,.by
,.рф
- ↑ 러시아-우크라이나 전쟁의 영향으로 러시아 관련 도메인에 사용 시 정상 작동이 안된다.