Amirilidan78
4 سال پیش توسط Amirilidan78 مطرح شد
4 پاسخ

Sweet Alert Vue js

توضیح تصویر رو وارد کنید

سلام من توی راکت اینجور نوتیفیکشنی دیده بودم و رفتم inspect گرفتم دیدم کلاس های Sweet Alert 2 رو داره ولی توی داکیمونت sweet alert که نگاه میکردم همچین چیزی ندیدم کسی کیدونه چ جوری میتونم از اینجور نوتیفیکشینی استفاده کنم!؟


ثبت پرسش جدید
میلاد-م
تخصص : توسعه‌دهنده رابط کاربری - Fron...
@milad 4 سال پیش مطرح شد
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>

میلاد-م
تخصص : توسعه‌دهنده رابط کاربری - Fron...
@milad 4 سال پیش مطرح شد
0

این گزینه رو ببینید:
https://sweetalert2.github.io/#examples
A message with auto close timer


Amirilidan78
تخصص : برنامه نویس وب
@Amirilidan78 4 سال پیش مطرح شد
0

@milad
نه خیلی فرق میکنه


میلاد-م
تخصص : توسعه‌دهنده رابط کاربری - Fron...
@milad 4 سال پیش مطرح شد
0

همینی هستش که براتون نوشتم، ولی جزئیاتش رو باید با توجه به مستندات این سایت تغییر بدین.


میلاد-م
تخصص : توسعه‌دهنده رابط کاربری - Fron...
@milad 4 سال پیش مطرح شد
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>

برای ارسال پاسخ لازم است وارد شده یا ثبت‌نام کنید

ورود یا ثبت‌نام