SweetalAlert2

개요[편집 / 원본 편집]

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: '다음 &rarr;',
  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: '멋져!'
    })
  }
})