You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
146 lines
3.8 KiB
146 lines
3.8 KiB
import React from "react"; |
|
import Swal from "sweetalert2"; |
|
import "./SweetAlert.css"; |
|
|
|
const SweetToast = () => { |
|
const sweetAlert1 = () => { |
|
Swal.fire({ |
|
icon: "error", |
|
title: "ارور شماره 1", |
|
showCloseButton: true, |
|
toast: true, |
|
position: "top-end", |
|
customClass: { |
|
title: "error-toast-title", |
|
closeButton: "error-toast-closeButton", |
|
popup: "error-toast-modalBox", |
|
}, |
|
showConfirmButton: false, |
|
timer: 3000, |
|
timerProgressBar: true, |
|
didOpen: (toast) => { |
|
toast.addEventListener("mouseenter", Swal.stopTimer); |
|
toast.addEventListener("mouseleave", Swal.resumeTimer); |
|
}, |
|
}); |
|
}; |
|
|
|
const sweetAlert2 = () => { |
|
Swal.fire({ |
|
icon: "success", |
|
title: "ارور شماره 2", |
|
showCloseButton: true, |
|
toast: true, |
|
position: "top-end", |
|
customClass: { |
|
title: "success-toast-title", |
|
closeButton: "success-toast-closeButton", |
|
popup: "success-toast-modalBox", |
|
}, |
|
showConfirmButton: false, |
|
timer: 3000, |
|
timerProgressBar: true, |
|
didOpen: (toast) => { |
|
toast.addEventListener("mouseenter", Swal.stopTimer); |
|
toast.addEventListener("mouseleave", Swal.resumeTimer); |
|
}, |
|
}); |
|
}; |
|
|
|
const sweetAlert3 = () => { |
|
Swal.fire({ |
|
title: "ارور شماره 1", |
|
showCloseButton: true, |
|
toast: true, |
|
position: "top-end", |
|
customClass: { |
|
title: "error-toast-title", |
|
closeButton: "error-toast-closeButton", |
|
popup: "error-toast-modalBox", |
|
}, |
|
showConfirmButton: false, |
|
}); |
|
}; |
|
|
|
const sweetAlert4 = () => { |
|
Swal.fire({ |
|
title: "ارور شماره 2", |
|
showCloseButton: true, |
|
toast: true, |
|
position: "top-end", |
|
customClass: { |
|
title: "success-toast-title", |
|
closeButton: "success-toast-closeButton", |
|
popup: "success-toast-modalBox", |
|
}, |
|
showConfirmButton: false, |
|
}); |
|
}; |
|
|
|
const sweetAlert5 = () => { |
|
Swal.fire({ |
|
title: "ارور شماره 1", |
|
showCloseButton: true, |
|
toast: true, |
|
position: "top-end", |
|
customClass: { |
|
title: "error-toast-title", |
|
closeButton: "error-toast-closeButton", |
|
popup: "error-toast-modalBox", |
|
}, |
|
showConfirmButton: false, |
|
timer: 3000, |
|
timerProgressBar: true, |
|
didOpen: (toast) => { |
|
toast.addEventListener("mouseenter", Swal.stopTimer); |
|
toast.addEventListener("mouseleave", Swal.resumeTimer); |
|
}, |
|
}); |
|
}; |
|
|
|
const sweetAlert6 = () => { |
|
Swal.fire({ |
|
title: "ارور شماره 2", |
|
showCloseButton: true, |
|
toast: true, |
|
position: "top-end", |
|
customClass: { |
|
title: "success-toast-title", |
|
closeButton: "success-toast-closeButton", |
|
popup: "success-toast-modalBox", |
|
}, |
|
showConfirmButton: false, |
|
timer: 3000, |
|
timerProgressBar: true, |
|
didOpen: (toast) => { |
|
toast.addEventListener("mouseenter", Swal.stopTimer); |
|
toast.addEventListener("mouseleave", Swal.resumeTimer); |
|
}, |
|
}); |
|
}; |
|
|
|
return ( |
|
<div className="my-5"> |
|
<button className="bg-primary" onClick={sweetAlert1}> |
|
error sweet alert TOAST 1 |
|
</button> |
|
<button className="bg-primary" onClick={sweetAlert2}> |
|
success sweet alert TOAST 1 |
|
</button> |
|
<button className="bg-primary" onClick={sweetAlert3}> |
|
error sweet alert TOAST 3 |
|
</button> |
|
<button className="bg-primary" onClick={sweetAlert4}> |
|
success sweet alert TOAST 4 |
|
</button> |
|
<button className="bg-primary" onClick={sweetAlert5}> |
|
error sweet alert TOAST 5 |
|
</button> |
|
<button className="bg-primary" onClick={sweetAlert6}> |
|
success sweet alert TOAST 6 |
|
</button> |
|
</div> |
|
); |
|
}; |
|
|
|
export default SweetToast;
|
|
|