آموزش طراحی متریال با Materialize (جلسه 22) - dialog

در این جلسه با ادامه موضوع مربوط به طراحی متریال با 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>

خروجی:

امیدوارم از این مطلب خوشتون اومده باشه.

موفق و پیروز باشید

یا علی

Source

نویسنده

محمد اسفندیاری

بسیار به طراحی وب علاقمندم و به سرعت در حال یادگیری تمام مباحث پیشرفته هستم و دوست دارم که به دیگران هم یاد بدهم.