اعلان پنجره ای Toasts

پیامی را برای کاربر به سادگی و قابل فهم نشان دهید.

شکل نمایشی

نمایش

برای نمایش تست ها، کافیست WN('toast1'].show() را فراخوانی کنید، آن در مکانی که هست نمایش داده میشود و اگر خصوصیت timeout را مقداری بیش از 0 دهید بعد سپری شده آن مقدار میلی ثانیه به طور خودکار محو میشود.

اما ما میخواهیم اعلان ها در قسمتی خاص از صفحه نمایش داده شود و اگر بیش از یک اعلان هست مرتب همه نمایش داده شود. برای همین موضوع، بایستی یک محفظه برای معرفی اعلان ها تعریف کنیم و سپس بگوییم این محفظه در کدام قسمت صفحه قرار گیرد.
برای تعریف محفظه از div و کلاس toast-container استفاده کنید. حال وقت آن رسیده که بگویید این محفظه در کجای صفحه نمایش قرار گیرد.

toast-block-start
نمایش عمودی در بالای صفحه

toast-block-center
نمایش عمودی در وسط صفحه

toast-block-end
نمایش عمودی در پایین صفحه

toast-inline-start
نمایش افقی در جهت شروع اگر راست به چپ است راست صفحه و اگر چپ به راست است چپ صفحه

toast-inline-center
نمایش افقی در وسط صفحه

toast-inline-end
نمایش افقی در انتهای جهت چیدمان در صفحه

بنا بر توضیحات گفته شده در بالا، به مثال زیر توجه کنید.

جاوا اسکریپت

برای مدیریت نمایش یا عدم نمایش میتوانید از توابع آن استفاده کنید که در زیر به آنها اشاره شده است.

timeout
میزان زمان برای مخفی کردن را مشخص میکند

show
این تابع، جهت نمایش استفاده میشود.
show(): void

toggle
این تابع جهت سوئیچ کردن بین نمایش یا مخفی کردن استفاده میشود.
toggle(): void

hide
این تابع جهت مخفی کردن مورد استفاده قرار میگیرد.
hide(): void

beforeHide
قبل از مخفی کردن، این رخداد فراخوانی میشود، اگر این تابع مقدار false را برگرداند، عملیات مخفی کردن لغو میشود.
beforeHide: (t: IWNToast) => boolean | Promise

    <div class="toast" id="toast1" onbeforehide="return ...">
    ...
    </div>

انواع

برای نمایش اعلان ها میتوانید از انواع تم های رنگی استفاده کنید

همچنین میتوانید اندازه عرض آن را نیز معرفی کنید

محتوی خاص

شما هر محتوایی که مد نظر دارید میتوانید درون بدنه یا محفظه قرار دهید.