[SweetAlert] Alert창 예쁘게 적용하기!

#sweetalert #alert #design

 

안녕하세요.

Gi-1의 개발일기 입니다.

 

alert창은 알림창 / 확인창 등을 위해 주로 사용합니다.

간단하게 사용 가능하고 편리하지만 디자인 적인 부분이 매우 부족합니다.

 

[Alert]

[SweetAlert]

 

 

 

1. SweetAlert 주소

https://sweetalert2.github.io/

SweetAlert2

 

2. Link, Script

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/limonte-sweetalert2/7.2.0/sweetalert2.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/limonte-sweetalert2/7.2.0/sweetalert2.all.min.js"></script>

 

3. 사용방법

자주 사용하는 alert창 3개가지만 간단히 알아보겠습니다.

자세한 사항은 sweetalert2 홈페이지를 참고하세요

 

[기본 메세지]

Swal.fire('Any fool can use a computer');

 

[제목, 오류 아이콘, 텍스트 및 바닥글이 있는 모달]

Swal.fire({
  icon: 'error',
  title: 'Oops...',
  text: 'Something went wrong!',
  footer: '<a href="">Why do I have this issue?</a>'
})

 

[실행, 취소]

 

const swalWithBootstrapButtons = Swal.mixin({
  customClass: {
    confirmButton: 'btn btn-success',
    cancelButton: 'btn btn-danger'
  },
  buttonsStyling: false
})

swalWithBootstrapButtons.fire({
  title: 'Are you sure?',
  text: "You won't be able to revert this!",
  icon: 'warning',
  showCancelButton: true,
  confirmButtonText: 'Yes, delete it!',
  cancelButtonText: 'No, cancel!',
  reverseButtons: true
}).then((result) => {
  if (result.isConfirmed) {
    swalWithBootstrapButtons.fire(
      'Deleted!',
      'Your file has been deleted.',
      'success'
    )
  } else if (
    /* Read more about handling dismissals below */
    result.dismiss === Swal.DismissReason.cancel
  ) {
    swalWithBootstrapButtons.fire(
      'Cancelled',
      'Your imaginary file is safe :)',
      'error'
    )
  }
})

 

출처 : https://sweetalert2.github.io/