Gaon12: 시작

2023-08-05T13:57:13Z

시작

새 문서

== 개요 ==
SweetAlert2는 JavaScript로 만들어진 팝업 박스 대체 라이브러리입니다. 사용자 친화적인 디자인과 반응성을 갖추고 있으며, 사용자가 쉽게 커스터마이징 할 수 있습니다. WAI-ARIA를 준수하여 접근성이 좋으며, 별도의 의존성이 없습니다.

== 설치 방법 ==
=== NPM을 통한 설치 ===
<syntaxhighlight lang='bash'>
npm install sweetalert2
</syntaxhighlight>

=== CDN을 통한 설치 ===
HTML 파일 내에 다음 코드를 추가하면 CDN을 통해 SweetAlert2를 사용할 수 있습니다.
<syntaxhighlight lang='html'>
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
</syntaxhighlight>

== 사용법 ==
=== 기본 사용법 ===
JavaScript 코드 내에서 다음과 같이 사용할 수 있습니다.
<syntaxhighlight lang='javascript'>
Swal.fire('안녕하세요!')
</syntaxhighlight>

=== 옵션 사용 예제 ===
<syntaxhighlight lang='javascript'>
Swal.fire({
title: '에러!',
text: '무언가 잘못되었어요!',
icon: 'error',
confirmButtonText: '확인'
})
</syntaxhighlight>

=== 이미지와 함께 사용 ===
<syntaxhighlight lang='javascript'>
Swal.fire({
title: 'Sweet!',
text: 'Modal with a custom image.',
imageUrl: 'https://example.com/image.png',
imageWidth: 400,
imageHeight: 200,
imageAlt: 'Custom image'
})
</syntaxhighlight>

=== 타이머 사용 ===
<syntaxhighlight lang='javascript'>
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')
}
})
</syntaxhighlight>

=== 체인 팝업 ===
<syntaxhighlight lang='javascript'>
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: '멋져!'
})
}
})
</syntaxhighlight>

== 사용 가능한 아이콘 ==
* <code>success</code>
* <code>error</code>
* <code>warning</code>
* <code>info</code>
* <code>question</code>

== 주의 사항 ==
특정 도메인<ref> <code>.ru</code>, <code>.su</code>, <code>.by</code>, <code>.рф</code></ref><ref>[[러시아-우크라이나 전쟁]]의 영향으로 러시아 관련 도메인에 사용 시 정상 작동이 안된다.</ref>에서 사용 시 주의가 필요하다. 해당 도메인에서 사용하면 웹사이트 탐색이 차단되고 우크라이나의 국가가 재생된다.

== 라이선스 ==
MIT 라이선스를 사용중이다.

== 유사 라이브러리 ==
* [https://getbootstrap.com/docs/5.0/components/modal Bootstrap Modal]
* [https://jqueryui.com/dialog jQuery UI Dialog]
* [http://github.hubspot.com/vex/docs/welcome Vex]
* [https://izimodal.marcelodolza.com iziModal]

== 외부 링크 ==
* {{깃허브/저장소|sweetalert2|sweetalert2}}
* {{공식 홈페이지|https://sweetalert2.github.io}}

== 각주 ==


[[분류:자바스크립트 라이브러리]]
[[분류:웹 개발]]

SweetalAlert2 - 편집 역사

Gaon12: 시작