در این جلسه با ادامه موضوع مربوط به طراحی متریال با Materialize در خدمتتون هستم.
در مورد Toast
Materialize تعدادی کلاس CSS و متد Javascript قرار داده که با استفاده از اونا میتونیم برای سایت خودمون notification قرار بدیم و با استفاده از اونا با کاربرانمون ارتباط برقرار کنیم. Materialize به این notificationها toast میگه و اونا رو بصورت زیر باید درست کنیم:
Materialize.toast(message, displayLength, className, completeCallback);
میبینید که در ابتدا متد toast رو فراخوانی کردیم. این متد 4 ورودی رو دریافت میکنه و هر ورودی رو در پایین براتون توضیح میدم:
- message : پیامی که میخاین به کاربر نمایش داده بشه
- displayLength : مدت زمانی که این پیام نمایش داده میشه. این زمان بر حسب میلی ثانیه هست
- className : کلاس css که باید به اون پیام اعمال بشه. بعنوان مثال اگه rounded رو قرار بدیم، گوشه‌های اون خمیده میشه
- completeCallback : این تابع زمانی که پیام نمایش داده میشه و مخفی میشه اجرا میشه
مثالها
پیام عادی:
<a class="btn" onclick="showToast('Hello World!', 3000)">Normal Alert!</a>
میبینید که یک لینک با استایل دکمه قرار دادیم و برای اون یک ویژگی onclick قرار دادیم. اگر بر روی این لینک کلیک بشه، تابع showToast اجرا میشه و 3000 میلی ثانیه باقی میمونه. کدهای Javascript اون بصورت زیر هست:
function showToast(message, duration){
Materialize.toast(message, duration);
}
خروجی یک پیام هست که در مرورگر نمایش داده میشه. این پیامها واکنشگرا هستند و در هر سایزی بخوبی نمایش داده میشن و خودشون رو با سایز مرورگر وفق میدن. ظاهرش بصورت زیر هست:
پیام با متن italic:
<a class="btn" onclick="showToast1('Hello World!', 3000)">Italic Alert!</a>
کد JS:
function showToast1(message, duration){
Materialize.toast('<i>'+ message + '</i>', duration);
}
خروجی:
پیام با گوشه گرد:
<a class="btn" onclick="showToast2('Hello World!', 3000)">Rounded Alert!</a>
کد JS:
function showToast2(message, duration){
Materialize.toast(message, duration, 'rounded');
}
خروجی:
پیام با callback:
<a class="btn" onclick="showToast3('Hello World!', 3000)">Callback Alert!</a>
کد JS:
function showToast3(message, duration){
Materialize.toast('Hello World!', duration, '', function toastCompleted(){
alert('Toast dismissed!');
});
}
حالا زمانی که بر روی لینک مورد نظر کلیک بشه، ابتدا نمایش داده میشه و وقتی که مخفی میشه، یک alert با متن Toast dismissed نمایش داده میشه.
در مورد Tooltip
با استفاده از کلاسها و ویژگی هایی که Materialize قرار داده، میتونین برای المنتهای مورد نظرتون tooltip قرار بدین و زمانی که بر روی اونا هاور بشه، tooltip نمایش داده بشه. ویژگی‌ها بصورت زیر هستند:
- tooltipped : مشخص میکنه که المنت مورد نظر tooltip خواهد داشت
- data-position : محل قرار گیری tooltip که شامل: top و bottom و left و right
- data-delay : مدت زمانی که tooltip باید بعد از mouse out نمایش داده بشه بر حسب میلی ثانیه
- data-tooltip : متنی که قصد دارید در tooltip قرار داده بشه
مثالها
<a class="btn tooltipped" data-position="bottom" data-delay="50" data-tooltip="I am in bottom!">Bottom</a> <a class="btn tooltipped" data-position="left" data-delay="50" data-tooltip="I am in left!">Left</a> <a class="btn tooltipped" data-position="right" data-delay="50" data-tooltip="I am in right!">Right</a> <a class="btn tooltipped" data-position="top" data-delay="50" data-tooltip="I am in top!">Top</a>
خروجی:
امیدوارم از این مطلب خوشتون اومده باشه.
موفق و پیروز باشید
یا علی
اولین دیدگاه این پست رو تو بنویس !