- Materialize Tutorial
- Materialize - Home
- Materialize - Overview
- Materialize - Environment Setup
- Materialize - Colors
- Materialize - Grids
- Materialize - Helpers
- Materialize - Media
- Materialize - Shadows
- Materialize - Tables
- Materialize - Typography
- Materialize - Badges
- Materialize - Buttons
- Materialize - Breadcrumb
- Materialize - Cards
- Materialize - Chips
- Materialize - Collections
- Materialize - Footer
- Materialize - Form
- Materialize - Icons
- Materialize - Navbar
- Materialize - Pagination
- Materialize - Preloader
- Materialize - Collapsible
- Materialize - Dialogs
- Materialize - Dropdowns
- Materialize - Tabs
- Materialize - Waves
- Materialize Useful Resources
- Materialize - Quick Guide
- Materialize - Useful Resources
- Materialize - Discussion
Materialize - Collections
Materialize provides special classes to represent various types of collections, where a collection represents a group of related information items.
Sr.No. | Class Name & Description |
---|---|
1 | collection Sets the div or ul container as a collection. |
2 | collection-item Sets the a or li item as a collection item. |
3 | active Shows the a or li item as an active collection item. |
4 | with-header Marks the collection to have a header. |
5 | collection-header Sets the a or li item as a collection header. |
6 | avatar Sets the a or li item as an avatar item. |
7 | dismissible Enables the collection items to be swiped away. Works on touch screen devices only. |
Example
Following example demonstrates the use of collection classes to showcase creating various types of collection.
<!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>
Output
Verify the output.
Advertisements