Tìm hiểu về SweetAlert2 (p1)

Như các bạn đã biết, phương thức alert () hiển thị hộp cảnh báo với thông báo được chỉ định và nút OK. Nhưng về cơ bản phương thức alert bình thường nhìn cũng được đẹp cho lắm. Vậy nên trong bài viết này, mình và các bạn sẽ cùng tìm hiểu về SweetAlert2, sẽ giúp chúng ta thay đổi hộp thoại alert nhìn đẹp và phê hơn. OK let's go 😃

1. TẢI VÀ CÀI ĐẶT

Bạn có thể cài đặt SweetAlert2 theo các cách sau:

npm install sweetalert2 

hoặc

bower install sweetalert2

Hoặc bạn có thể tải từ CDN: jsdelivr.com/package/npm/sweetalert2

2. SỬ DỤNG

Sau khi cài đặt thành công thì việc sử dụng trở nên dễ dàng hơn rất nhiều:

1. Khởi tạo plugin bằng cách referencing các tệp cần thiết

<script src="sweetalert2.all.min.js"></script>

<!-- Tùy chọn: bao gồm một polyfill cho ES6 Promising cho trình duyệt IE11 và Android -->

<script src="https://cdn.jsdelivr.net/npm/promise-polyfill"></script>

Còn cách khác là:

<script src="sweetalert2.min.js"></script>

<link rel="stylesheet" href="sweetalert2.min.css">

Hoặc

// ES6 Modules or TypeScript
import Swal from 'sweetalert2'

// CommonJS
const Swal = require('sweetalert2')

Có thể nhập riêng biệt JS và CSS, ví dụ: nếu bạn cần tùy chỉnh kiểu:

import Swal from 'sweetalert2/dist/sweetalert2.js'

import 'sweetalert2/src/sweetalert2.scss'

Cách này thì cục súc quá, không nên sử dụng nhé, mình ném vào để biết thôi 😃

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/sweetalert2.min.js"></script>

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/sweetalert2.min.css">

2. Giờ đến sử dụng và tận hưởng thôi

Ở đây mình sẽ sử dụng một cách đơn giản. Đầu tiên mình sẽ tạo một nút để bấm vào sẽ hiển hộp thoại ra:

<button type="button" onclick="sweetalert2()">Nhấn vào đây!</button>

Tiếp theo là tạo cái function sweetalert2() kia:

<script>
    function sweetalert2(){
        Swal({
            title: 'Success',
            text: 'Do you want to continue',
            type: 'success',
            confirmButtonText: 'Cool'
        })
    }
</script>

Xong, còn chờ đợi gì nữa mà không chạy thử và cảm nhận độ phê của nó nhỉ 😃

Như vậy, ở bài viết này chúng ta đã biết được cách cài đặt và sửa dụng SweetAlert2 một cách đơn giản. Ở bài viết sau, chúng ta sẽ tìm hiểu sâu hơn về nó nhé, sử dụng nó với nhiều mục đích khác nhau và cùng tìm hiểu về các CONFIGURATION của nó, như ví dụ ở trên thì title, text, type, confirmButtonText là cái gì nhỉ. Hãy cùng mình tìm hiểu về chúng và nhiều CONFIGURATION khác ở bài viết sau nhé, đảm bảo các bạn sẽ thấy có những điều thật thần kỳ luôn 😃 Chào tạm biệt các bạn và cảm ơn đã đọc bài viết này nhé ❤️