حتما مشاهده کرده اید که بعد از انجام عمل کادر کوچکی در صفحه نمایش نشان داده شده و بعد از چند ثانیه خودبخود بسته می شود، مخصوصاً در اپلیکیشن های موبایل این کادرها استفاده می شوند، با کمک متریالایز می توان از این نوع کادرها براحتی ایجاد کرد. و یا نمایش پیام راهنما (tooltip) روی اجزای مختلف را دیده اید.
در این جلسه در مورد نمایش های مختلف هشدار(tooltip) را آموزش دهیم این کار در materialize توسط اصطلاحی به نام toast انجام می شود. در زیر نحوه نگارش متد toast ذکر شده است.
Materialize.toast(message, displayLength, className, completeCallback);
پارامترهای تابع toast عبارتند از:
- message – پیامی که به کاربران نمایش داده می شود.
- displayLength – مدت زمانی که آلرت به کاربر نمایش داده می شود.
- className – نام کلاسی CSS که قصد داریم به آلرت نمایش داده شده، اضافه شود. بطور مثال کلاس rounded
- completeCallback – نام تابعی که بعد از پایان یافتن آلرت نمایش داده شده به کاربر، فراخوانی می شود.
materialize برای ساخت tooltip دارای کلاس های CSS زیر می باشد.
| نام کلاس | توضیحات |
|---|---|
| tooltipped | عنصر که می خواهد دارای tooltip باشد را مشخص می کند. |
| data-position | موقعیت tooltip را که می تواند چپ، راست، بالا و یا پایین باشد را مشخص می کند. |
| data-delay | مدت زمانی که می خواهیم tooltip به کاربر نمایش داده شود. |
| data-tooltip | محتوای نوشتاری که می خواهیم داخل tooltip به کاربر نمایش دهیم. |
مثال
در مثال زیر نحوه استفاده از toasts و tooltipها نمایش داده شده است.
<html>
<head>
<title>The Materialize Dialogs Example</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/css/materialize.min.css">
<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/js/materialize.min.js"></script>
<script>
function showToast(message, duration){
Materialize.toast(message, duration);
}
function showToast1(message, duration){
Materialize.toast('<i>'+ message + '</i>', duration);
}
function showToast2(message, duration){
Materialize.toast(message, duration, 'rounded');
}
function showToast3(message, duration){
Materialize.toast('Hello World!', duration, '', function toastCompleted(){
alert('Toast dismissed!');
});
}
</script>
</head>
<body class="container">
<h4>Toasts</h4>
<a class="btn" onclick="showToast('Hello World!', 3000)">Normal Alert!</a>
<a class="btn" onclick="showToast1('Hello World!', 3000)">Italic Alert!</a>
<a class="btn" onclick="showToast2('Hello World!', 3000)">Rounded Alert!</a>
<br/><br/>
<a class="btn" onclick="showToast3('Hello World!', 3000)">Callback Alert!</a>
<h4>Tooltips</h4>
<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>
</body>
</html>
badge ها در متریالایر
در materialize کلاس های وجود دارند که با استفاده از آنها می توانید برخی موارد مانند آلارم دهنده ها (notification)، هشدار ها و … را برجسته سازی نمایید تا کاربر متوجه آن شود . فرضا تعداد ایمیل های جدید صندوق پستی کاربر را می خواهید برای کاربر برجسته سازی کنید.
| نام کلاس | توضیحات |
|---|---|
| badge | عنصر که نیاز به برجسته شدن را دارد را مشخص می کند و برای تگ span نیز بکار می رود |
| new | یک پس زمینه به عنصری که قبلا توسط badge آماده برجسته سازی است، می دهد و آن را بر جسته می کند. |
در زیر نحوه استفاده از این دو کلاس با مثال نشان داده شده است
مثال
<!DOCTYPE html> <html> <head> <title>The Materialize Badges Example</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/css/materialize.min.css"> <script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/js/materialize.min.js"></script> </head> <body class="container"> <h2>Badges Demo</h2> <hr/> <h3>Badges in List</h3> <div class="collection"> <a href="#" class="collection-item">Inbox<span class="badge">12</span></a> <a href="#" class="collection-item">Unread<span class="new badge">4</span></a> <a href="#" class="collection-item">Sent</a> <a href="#" class="collection-item">Outbox<span class="badge">14</span></a> </div> <h3>Badges in dropdowns</h3> <ul id="dropdown" class="dropdown-content"> <li><a href="#">Inbox<span class="badge">12</span></a></li> <li><a href="#!">Unread<span class="new badge">4</span></a></li> <li><a href="#">Sent</a></li> <li><a href="#">Outbox<span class="badge">14</span></a></li> </ul> <a class="btn dropdown-button" href="#" data-activates="dropdown">Dropdown<i class="mdi-navigation-arrow-drop-down right"></i></a> <h3>Badges in Navigation</h3> <nav> <div class="nav-wrapper"> <a href="" class="brand-logo">TutorialsPoint</a> <ul id="nav-mobile" class="right hide-on-med-and-down"> <li><a href="">Inbox</a></li> <li><a href="">Unread<span class="new badge">4</span></a></li> <li><a href="#">Sent</a></li> <li><a href="#">Outbox</a></li> </ul> </div> </nav> </body> </html>
خروجی بصورت زیر خواهد بود
