Amirilidan78
4 سال پیش
توسط Amirilidan78
مطرح شد
Sweet Alert Vue js
سلام من توی راکت اینجور نوتیفیکشنی دیده بودم و رفتم inspect گرفتم دیدم کلاس های Sweet Alert 2 رو داره ولی توی داکیمونت sweet alert که نگاه میکردم همچین چیزی ندیدم کسی کیدونه چ جوری میتونم از اینجور نوتیفیکشینی استفاده کنم!؟
گزینش سوالات
گفت و گو های مرتبط
دسته بندی سوالات
تگ‌های محبوب
ثبت پرسش جدید
![user-avatar]()
![user-avatar]()
![user-avatar]()
![user-avatar]()
گزارش تخلف
کپی کردن
0
این هم یک نمونه که من خودم براتون ساختم. باقیش با خودتون:
<!doctype html>
<html lang="en" dir='rtl'>
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>sweetalert2-roocket</title>
<style>
div.header-class {
flex-direction: row;
align-items: baseline;
padding: 0 10px;
}
h2.title-class {
margin: 0;
font-size: 20px;
color: #fff;
}
div.icon-class {
margin: 0 0 0 8px;
font-size: 6px;
color: #fff;
}
</style>
</head>
<body>
<h1> پیغام زیبا </h1>
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@9"></script>
<script src="https://cdn.jsdelivr.net/npm/promise-polyfill"></script>
<script>
Swal.fire({
title: 'شما نمی توانید مطلب خود رو تایید کنید!',
position: 'bottom-start',
width: 'auto',
padding: '10px',
background: 'rgb(243, 156,18)',
icon: 'warning',
showConfirmButton: false,
timer: 2000,
timerProgressBar: true,
customClass: {
container: 'container-class',
popup: 'popup-class',
header: 'header-class',
title: 'title-class',
closeButton: 'close-button-class',
icon: 'icon-class',
image: 'image-class',
content: 'content-class',
input: 'input-class',
actions: 'actions-class',
confirmButton: 'confirm-button-class',
cancelButton: 'cancel-button-class',
footer: 'footer-class'
}
})
</script>
</body>
</html>
گزارش تخلف
کپی کردن
0
این گزینه رو ببینید:
https://sweetalert2.github.io/#examples
A message with auto close timer
گزارش تخلف
کپی کردن
0
گزارش تخلف
کپی کردن
0
گزارش تخلف
کپی کردن
0
این هم یک نمونه که من خودم براتون ساختم. باقیش با خودتون:
<!doctype html>
<html lang="en" dir='rtl'>
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>sweetalert2-roocket</title>
<style>
div.header-class {
flex-direction: row;
align-items: baseline;
padding: 0 10px;
}
h2.title-class {
margin: 0;
font-size: 20px;
color: #fff;
}
div.icon-class {
margin: 0 0 0 8px;
font-size: 6px;
color: #fff;
}
</style>
</head>
<body>
<h1> پیغام زیبا </h1>
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@9"></script>
<script src="https://cdn.jsdelivr.net/npm/promise-polyfill"></script>
<script>
Swal.fire({
title: 'شما نمی توانید مطلب خود رو تایید کنید!',
position: 'bottom-start',
width: 'auto',
padding: '10px',
background: 'rgb(243, 156,18)',
icon: 'warning',
showConfirmButton: false,
timer: 2000,
timerProgressBar: true,
customClass: {
container: 'container-class',
popup: 'popup-class',
header: 'header-class',
title: 'title-class',
closeButton: 'close-button-class',
icon: 'icon-class',
image: 'image-class',
content: 'content-class',
input: 'input-class',
actions: 'actions-class',
confirmButton: 'confirm-button-class',
cancelButton: 'cancel-button-class',
footer: 'footer-class'
}
})
</script>
</body>
</html>