راکت
حل شده

Sweet Alert Vue js

4 پاسخ

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

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

ثبت پرسش جدید

پاسخ‌ها

4
میلاد-م
میلاد-م
@milad

تخصص: توسعه‌دهنده رابط کاربری - Front-End

بهترین پاسخ

این هم یک نمونه که من خودم براتون ساختم. باقیش با خودتون:

<!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>
میلاد-م
میلاد-م
@milad

تخصص: توسعه‌دهنده رابط کاربری - Front-End

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

Amirilidan78
Amirilidan78
@Amirilidan78

تخصص: برنامه نویس وب

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

شاید پاسخ شما همین‌جا باشد

میلاد-م
میلاد-م
@milad

تخصص: توسعه‌دهنده رابط کاربری - Front-End

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

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

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