| نام کلاس | توضیحات |
|---|---|
| chip | محتوای یک div را به عنوان یک chip در نظر می گیرد |
مثال
در مثال زیر نحوه استفاده از این کلاس ذکر شده است .
<!DOCTYPE html> <html> <head> <title>The Materialize Chips 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"> <div class="chip"> <img alt="HTML5" src="html5-mini-logo.jpg">HTML 5 </div> <div class="chip"> HTML 5<i class="material-icons">close</i> </div> </body> </html>
خروجی بصورت زیر است:
همچنین متریالایز( materialize) دارای کلاسی هایی می باشد که با استفاده از ان می توان اطلاعاتی دلخواه را دسته بندی کنیم. بطور مثال لیستی از آیتم ها، لیستی از لینک ها و غیره
| نام کلاس | توضیحات |
|---|---|
| collection | برای یک تگ div و یا ul که محتوای آن یک مجموعه را در بر می گیرد، قرار داده می شود. |
| collection-item | برای تگ <a> و یا <li> که جزو آیتم های مجموعه هستند، قرار می گیرد. |
| active | برای تگ <a> و <li> که داخل مجموعه قصد آنرا داریم که فعال باشد، این کلاس را قرار می دهیم. |
| with-header | Mark the collection to have header. |
| collection-header | برای تگ <a> و <li> که می خواهیم به عنوان هیدر مجموعه باشد، قرار می گیرد. |
| avatar | هنگامی که بخواهیم تگ <a> و <li> را به عنوان یک علامت (avatar) نشان دهیم، از این کلاس استفاده می کنیم. |
| dismissible | این کلاس فقط برای صفحه های لمسی کار می کند و برای کنار زدن آیتم های داخل مجموعه به کار می رود. |
در مثال زیر نحوه استفاده از کلاس های فوق گفته شده است.
<!DOCTYPE html> <html> <head> <title>The Materialize Collections 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"> <h3>Simple Collection</h3><hr/> <ul class="collection"> <li class="collection-item">HTML 5</li> <li class="collection-item">JQuery</li> <li class="collection-item">JavaScript</li> <li class="collection-item">CSS</li> </ul> <h3>Collection of Links</h3><hr/> <div class="collection"> <a href="#" class="collection-item">HTML 5</a> <a href="#!" class="collection-item active">JQuery</a> <a href="#!" class="collection-item">JavaScript</a> <a href="#!" class="collection-item">CSS</a> </div> <h3>Collection with Header</h3><hr/> <ul class="collection with-header"> <li class="collection-header"><h3>Front End Technologies</h3></li> <li class="collection-item">HTML 5</li> <li class="collection-item">JQuery</li> <li class="collection-item">JavaScript</li> <li class="collection-item">CSS</li> </ul> <h3>Collection with Secondary Content</h3><hr/> <ul class="collection"> <li class="collection-item"><div>HTML 5<a href="#!" class="secondary-content"><i class="material-icons">cloud</i></a></div></li> <li class="collection-item"><div>JQuery<a href="#!" class="secondary-content"><i class="material-icons">cloud</i></a></div></li> <li class="collection-item"><div>JavaScript<a href="#!" class="secondary-content"><i class="material-icons">cloud</i></a></div></li> <li class="collection-item"><div>CSS<a href="#!" class="secondary-content"><i class="material-icons">cloud</i></a></div></li> </ul> <h3>Collection with Avatar</h3><hr/> <ul class="collection"> <li class="collection-item avatar"> <img alt="HTML5" src="html5-mini-logo.jpg" class="circle"> <span class="title">HTML5</span> <p>HTML5 is the next major revision of the HTML standard superseding HTML 4.01, XHTML 1.0, and XHTML 1.1.<br/> HTML5 is a standard for structuring and presenting content on the World Wide Web.</p> <a href="#!" class="secondary-content"><i class="material-icons">grade</i></a> </li> <li class="collection-item avatar"> <i class="material-icons circle green">insert_chart</i> <span class="title">HighCharts</span> <p></p> <a href="#!" class="secondary-content"><i class="material-icons">grade</i></a> </li> </ul> <h3>Collection with dismissible content</h3><hr/> <ul class="collection"> <li class="collection-item dismissable">HTML 5</li> <li class="collection-item dismissable">JQuery</li> <li class="collection-item dismissable">JavaScript</li> <li class="collection-item dismissable">CSS</li> </ul> </body> </html>
نتیجه بصورت زیر خواهد بود:
