کتابخانه SweetAlert ایجاد مؤلفه های اعلان سفارشی شده در React را آسان می کند.
SweetAlert یک کتابخانه محبوب است که به شما امکان ایجاد مؤلفه های اعلان سفارشی برای برنامه React خود را می دهد. می توانید از اعلان ها برای هشدار دادن به کاربران در مورد اطلاعات مهم، خطاها یا اقدامات موفقیت آمیز در برنامه خود استفاده کنید. این به یک تجربه کاربری عالی اضافه می کند.
نصب کتابخانه SweetAlert
برای استفاده از کتابخانه SweetAlert برای ایجاد اعلان‌ها، باید آن را با استفاده از مدیریت بسته‌های انتخابی خود نصب کنید.
با اجرای دستور زیر در ترمینال خود می توانید آن را از طریق مدیر بسته NPM نصب کنید:
npm install sweetalert --save
استفاده از SweetAlert برای ایجاد اعلان‌ها
ایجاد اعلان‌های سفارشی در برنامه React با استفاده از کتابخانه SweetAlert شبیه به استفاده از کتابخانه Toastify است. تابع swal ارائه شده توسط کتابخانه SweetAlert یک نمونه از مؤلفه اعلان ایجاد می کند و ویژگی های اعلان را تعریف می کند.
در اینجا مثالی از استفاده از تابع swal() برای ایجاد مولفه اعلان آورده شده است:
import React from 'react'
import swal from 'sweetalert'
function App() {
const notify = () => swal('Hello There');
return (
<div>
<button onClick={notify}>Click Me</button>
</div>
)
}
export default App
با کلیک بر روی دکمه، تابع swal فراخوانی می شود، که یک اعلان با پیام “Hello There” نمایش داده می شود.
تابع swal سه پارامتر دارد. پارامتر اول عنوان اعلان، پارامتر دوم پیام و سومین پارامتر نمادی است که در اعلان شما نمایش داده می شود.
می‌توانید پارامتر نماد را روی یکی از مقادیر از پیش تعریف‌شده یعنی موفقیت، هشدار، خطا یا اطلاعات تنظیم کنید. سپس نماد اعلان بر اساس مقادیری است که شما ارسال کرده اید.
مثلا:
import React from 'react'
import swal from 'sweetalert'
function App() {
const notify = () => swal('Hello There', 'Welcome to my Page', 'success');
return (
<div>
<button onClick={notify}>Click Me</button>
</div>
)
}
export default App
هنگامی که کاربر روی دکمه کلیک می کند، تابع اطلاع رسانی را فرا می خواند. سپس این تابع یک اعلان با پیام “Hello There” و “Welcome to my Page” با نماد موفقیت نمایش می دهد.
یک جایگزین برای استفاده از تابع swal با سه پارامتر، استفاده از تابع swal با پارامتر شی است. این پارامتر شی حاوی ویژگی هایی است که مؤلفه اعلان را تعریف می کند.
مثلا:
import React from 'react'
import swal from 'sweetalert'
function App() {
const notify = () => swal(
{
title: 'Hello There',
text: 'Welcome to my Page',
icon: 'success',
button: 'OK',
}
);
return (
<div>
<button onClick={notify}>Click Me</button>
</div>
)
}
export default App
در بلوک کد بالا، تابع swal یک شی با ویژگی های زیر می گیرد: عنوان، متن، نماد و دکمه.
ویژگی title عنوان اعلان را مشخص می کند، در حالی که ویژگی text پیام را مشخص می کند. با ویژگی icon می توانید نوع نماد نمایش داده شده در اعلان را مشخص کنید.
در نهایت، ویژگی button متن دکمه نمایش داده شده در اعلان را مشخص می کند. در این حالت دکمه متن OK را نمایش می دهد.
سفارشی کردن ویژگی دکمه
می توانید ویژگی دکمه مؤلفه اعلان خود را مطابق با نیازهای طراحی خود سفارشی کنید. ویژگی button یک شی را با خصوصیات مورد استفاده برای پیکربندی رفتار و ظاهر دکمه می گیرد.
یک دکمه پیش فرض حاوی ویژگی های زیر است:
swal(
{
button: {
text: "OK",
value: true,
visible: true,
className: "",
closeModal: true
},
}
);
در بلوک کد بالا، ویژگی های زیر با دکمه استفاده می شود:
- text: متنی که روی دکمه نمایش داده می شود.
- value: مقداری که وقتی کاربر روی دکمه کلیک می‌کند، باز می‌گردد. در این مورد، مقدار درست است.
- قابل مشاهده: یک مقدار بولی نشان می دهد که آیا دکمه باید قابل مشاهده باشد یا خیر.
- className: رشته ای که نشان دهنده کلاس CSS برای اعمال روی دکمه است.
- closeModal: یک مقدار بولی که نشان می‌دهد وقتی روی دکمه کلیک می‌شود، مدال باید بسته شود یا خیر.
شما همچنین می توانید بیش از یک دکمه را با استفاده از یک آرایه با ویژگی buttons رندر کنید. آرایه رشته ها را به عنوان عناصر خود می گیرد.
مثلا:
swal(
{
buttons: ["Cancel", "Ok"],
}
);
در این مثال، مؤلفه اعلان شما حاوی دو دکمه با لغو متن و تأیید است. با تنظیم ویژگی buttons به false، یک اعلان بدون دکمه ارائه می شود.
رندر کردن عناصر HTML در داخل مؤلفه اعلان
شما همچنین می توانید عناصر HTML را جدا از رشته های ساده به عنوان یک اعلان ارائه دهید. این طیف گسترده ای از گزینه های سفارشی سازی را فراهم می کند.
مثلا:
import React from 'react'
import swal from 'sweetalert'
function App() {
const notify = () => swal(
{
content: {
element: 'input',
attributes: {
placeholder: 'First Name',
type: 'text'
}
},
buttons: 'Sign Up'
}
)
return (
<div className="app">
<button onClick={notify}>Click Me</button>
</div>
)
}
export default App
در این مثال، شما از ویژگی content برای ارائه یک فیلد ورودی با متن مکان‌نما استفاده می‌کنید.
شما محتوای اعلان را با استفاده از ویژگی content و عنصر HTML برای ارائه با ویژگی عنصر مشخص می کنید. برای تعیین ویژگی های عنصر HTML، از ویژگی ویژگی ها استفاده می کنید.
وقتی روی عنصر دکمه کلیک می کنید، بلوک کد بالا اعلان زیر را ارائه می دهد.
استایل دادن به مؤلفه اعلان
به جای پایبندی به سبک پیش‌فرض جعبه اعلان ارائه شده توسط کتابخانه SweetAlert، می‌توانید ظاهر جعبه اعلان را با اعمال سبک‌های CSS خود سفارشی کنید.
شما از ویژگی className برای افزودن استایل های خود به اعلان استفاده خواهید کرد. ویژگی className یک کلاس CSS را برای اعلان تعریف می کند.
مثلا:
swal(
{
title: 'Hello There',
text: 'Welcome to my Page',
button: false,
className: 'alert',
}
)
اعلان موجود در بلوک کد بالا دارای یک هشدار مقدار className است. پس از ایجاد اعلان و تعریف className، استایل های CSS خود را تعریف خواهید کرد:
.alert{
background-color: green;
font-family: cursive;
border-radius: 15px;
}
سبک های CSS بالا برای اعلان در رندر اعمال می شود:
بستن مؤلفه اعلان
کتابخانه SweetAlert چندین گزینه برای سفارشی کردن نحوه بسته شدن اعلان های شما ارائه می دهد. این گزینه ها ویژگی های closeOnEsc، closeOnClickOutside و تایمر هستند.
ویژگی closeOnEsc تعیین می کند که آیا وقتی کاربر کلید Esc را روی صفحه کلید خود فشار می دهد، جعبه اعلان بسته می شود یا خیر. ویژگی closeOnEsc یک مقدار بولی می گیرد.
swal(
{
...,
closeOnEsc: false,
}
)
به طور پیش فرض، ویژگی closeOnEsc روی true تنظیم شده است. در بلوک کد بالا، ویژگی closeOnEsc را روی false تنظیم می کنید. با قرار دادن ویژگی روی false، کاربر نمی تواند با فشردن کلید Esc کادر اعلان را ببندد.
همچنین می توانید تعیین کنید که آیا کاربر می تواند جعبه اعلان را با کلیک کردن در خارج از کادر با استفاده از ویژگی closeOnClickOutside ببندد یا خیر.
اگر ویژگی روی true تنظیم شده باشد، ویژگی closeOnClickOutside بسته شدن کادر اعلان را با کلیک کردن در هر نقطه خارج از آن فعال می کند. این رفتار پیش فرض SweetAlert است. برای متوقف کردن این رفتار، ویژگی closeOnClickOutside را روی false قرار دهید.
swal(
{
...,
closeOnClickOutside: false,
}
)
با ویژگی تایمر، می توانید یک محدودیت زمانی برای بسته شدن خودکار جعبه اعلان تعیین کنید. خاصیت timer یک مقدار صحیح بر حسب میلی ثانیه می گیرد.
swal(
{
...,
timer: 5000,
}
)
در این مثال، ویژگی timer روی 5000 تنظیم شده است. اعلان فقط برای 5 ثانیه قابل مشاهده خواهد بود.
اعلان‌های سفارشی کارآمد با استفاده از SweetAlert
SweetAlert یک کتابخانه قدرتمند است که با استفاده از آن می توانید اعلان های سفارشی شده را در یک برنامه React ایجاد کنید. با استفاده از تابع swal کتابخانه، اکنون می توانید اعلان هایی با ویژگی ها و رفتارهای سفارشی بسازید. همچنین می توانید از کتابخانه های دیگری مانند React-Toastify برای ایجاد هشدارهای سفارشی در برنامه React استفاده کنید.