Root Zanli
Home
Console
Upload
information
Create File
Create Folder
About
Tools
:
/
home
/
o5t6x7pgljbm
/
public_html
/
admin
/
public
/
src
/
template-builder
/
contents
/
Filename :
ui-collections.html
back
Copy
<div class="section"> <div class="card"> <div class="card-content"> <p class="caption mb-0">Collections allow you to group list objects together.</p> </div> </div> <!--Basic Collections--> <div class="row"> <div class="col s12"> <div id="basic" class="card card-tabs"> <div class="card-content"> <div class="card-title"> <div class="row"> <div class="col s12 m6 l10"> <h4 class="card-title">Basic</h4> </div> <div class="col s12 m6 l2"> <ul class="tabs"> <li class="tab col s6 p-0"><a class="active p-0" href="#view-basic">View</a></li> <li class="tab col s6 p-0"><a class="p-0" href="#html-basic">Html</a></li> </ul> </div> </div> </div> <div id="view-basic"> <div class="row"> <div class="col s12"> <ul class="collection"> <li class="collection-item">Alvin</li> <li class="collection-item">Alvin</li> <li class="collection-item">Alvin</li> <li class="collection-item">Alvin</li> </ul> </div> </div> </div> <div id="html-basic"> <pre><code class="language-markup"> <ul class="collection"> <li class="collection-item">Alvin</li> <li class="collection-item">Alvin</li> <li class="collection-item">Alvin</li> <li class="collection-item">Alvin</li> </ul> </code></pre> </div> </div> </div> </div> </div> <!--Links--> <div class="row"> <div class="col s12"> <div id="links" class="card card-tabs"> <div class="card-content"> <div class="card-title"> <div class="row"> <div class="col s12 m6 l10"> <h4 class="card-title">Links</h4> </div> <div class="col s12 m6 l2"> <ul class="tabs"> <li class="tab col s6 p-0"><a class="active p-0" href="#view-links">View</a></li> <li class="tab col s6 p-0"><a class="p-0" href="#html-links">Html</a></li> </ul> </div> </div> </div> <div id="view-links"> <div class="row"> <div class="col s12"> <div class="collection"> <a href="#!" class="collection-item">Alvin</a> <a href="#!" class="collection-item active">Alvin</a> <a href="#!" class="collection-item">Alvin</a> <a href="#!" class="collection-item">Alvin</a> </div> </div> </div> </div> <div id="html-links"> <pre><code class="language-markup"> <div class="collection"> <a href="#!" class="collection-item">Alvin</a> <a href="#!" class="collection-item active">Alvin</a> <a href="#!" class="collection-item">Alvin</a> <a href="#!" class="collection-item">Alvin</a> </div> </code></pre> </div> </div> </div> </div> </div> <!--Headers--> <div class="row"> <div class="col s12"> <div id="headers" class="card card-tabs"> <div class="card-content"> <div class="card-title"> <div class="row"> <div class="col s12 m6 l10"> <h4 class="card-title">Headers</h4> </div> <div class="col s12 m6 l2"> <ul class="tabs"> <li class="tab col s6 p-0"><a class="active p-0" href="#view-headers">View</a></li> <li class="tab col s6 p-0"><a class="p-0" href="#html-headers">Html</a></li> </ul> </div> </div> </div> <div id="view-headers"> <div class="row"> <div class="col s12"> <ul class="collection with-header"> <li class="collection-header"> <h4>First Names</h4> </li> <li class="collection-item">Alvin</li> <li class="collection-item">Alvin</li> <li class="collection-item">Alvin</li> <li class="collection-item">Alvin</li> </ul> </div> </div> </div> <div id="html-headers"> <pre><code class="language-markup"> <ul class="collection with-header"> <li class="collection-header"><h4>First Names</h4></li> <li class="collection-item">Alvin</li> <li class="collection-item">Alvin</li> <li class="collection-item">Alvin</li> <li class="collection-item">Alvin</li> </ul> </code></pre> </div> </div> </div> </div> </div> <!--Secondary content--> <div class="row"> <div class="col s12"> <div id="secondary-content" class="card card-tabs"> <div class="card-content"> <div class="card-title"> <div class="row"> <div class="col s12 m6 l10"> <h4 class="card-title">Secondary content</h4> </div> <div class="col s12 m6 l2"> <ul class="tabs"> <li class="tab col s6 p-0"><a class="active p-0" href="#view-content">View</a></li> <li class="tab col s6 p-0"><a class="p-0" href="#html-content">Html</a></li> </ul> </div> </div> </div> <div id="view-content"> <div class="row"> <div class="col s12"> <ul class="collection with-header"> <li class="collection-header"> <h4>First Names</h4> </li> <li class="collection-item"> <div>Alvin <a href="#!" class="secondary-content"> <i class="material-icons">send</i> </a> </div> </li> <li class="collection-item"> <div>Alvin <a href="#!" class="secondary-content"> <i class="material-icons">send</i> </a> </div> </li> <li class="collection-item"> <div>Alvin <a href="#!" class="secondary-content"> <i class="material-icons">send</i> </a> </div> </li> <li class="collection-item"> <div>Alvin <a href="#!" class="secondary-content"> <i class="material-icons">send</i> </a> </div> </li> </ul> </div> </div> </div> <div id="html-content"> <pre><code class="language-markup"> <ul class="collection with-header"> <li class="collection-header"><h4>First Names</h4></li> <li class="collection-item"><div>Alvin<a href="#!" class="secondary-content"><i class="material-icons">send</i></a></div></li> <li class="collection-item"><div>Alvin<a href="#!" class="secondary-content"><i class="material-icons">send</i></a></div></li> <li class="collection-item"><div>Alvin<a href="#!" class="secondary-content"><i class="material-icons">send</i></a></div></li> <li class="collection-item"><div>Alvin<a href="#!" class="secondary-content"><i class="material-icons">send</i></a></div></li> </ul> </code></pre> </div> </div> </div> </div> </div> <!--Avatar Content--> <div class="row"> <div class="col s12"> <div id="avatar-content" class="card card-tabs"> <div class="card-content"> <div class="card-title"> <div class="row"> <div class="col s12 m6 l10"> <h4 class="card-title">Avatar Content</h4> </div> <div class="col s12 m6 l2"> <ul class="tabs"> <li class="tab col s6 p-0"><a class="active p-0" href="#view-avatar">View</a></li> <li class="tab col s6 p-0"><a class="p-0" href="#html-avatar">Html</a></li> </ul> </div> </div> </div> <div id="view-avatar"> <div class="row"> <div class="col s12"> <ul class="collection"> <li class="collection-item avatar"> <img src="../../../app-assets/images/avatar/avatar-7.png" alt="" class="circle"> <span class="title">Title</span> <p>First Line <br> Second Line </p> <a href="#!" class="secondary-content"> <i class="material-icons">grade</i> </a> </li> <li class="collection-item avatar"> <i class="material-icons circle">folder</i> <span class="title">Title</span> <p>First Line <br> Second Line </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">Title</span> <p>First Line <br> Second Line </p> <a href="#!" class="secondary-content"> <i class="material-icons">grade</i> </a> </li> <li class="collection-item avatar"> <i class="material-icons circle red">play_arrow</i> <span class="title">Title</span> <p>First Line <br> Second Line </p> <a href="#!" class="secondary-content"> <i class="material-icons">grade</i> </a> </li> </ul> </div> </div> </div> <div id="html-avatar"> <pre><code class="language-markup"> <ul class="collection"> <li class="collection-item avatar"> <img src="../../../app-assets/images/avatar/avatar-7.png" alt="" class="circle"> <span class="title">Title</span> <p>First Line <br> Second Line </p> <a href="#!" class="secondary-content"><i class="material-icons">grade</i></a> </li> <li class="collection-item avatar"> <i class="material-icons circle">folder</i> <span class="title">Title</span> <p>First Line <br> Second Line </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">Title</span> <p>First Line <br> Second Line </p> <a href="#!" class="secondary-content"><i class="material-icons">grade</i></a> </li> <li class="collection-item avatar"> <i class="material-icons circle red">play_arrow</i> <span class="title">Title</span> <p>First Line <br> Second Line </p> <a href="#!" class="secondary-content"><i class="material-icons">grade</i></a> </li> </ul> </code></pre> </div> </div> </div> </div> </div> <!--Dismissable Content --> <div class="row"> <div class="col s12"> <div id="dismissable" class="card card-tabs"> <div class="card-content"> <div class="card-title"> <div class="row"> <div class="col s12 m6 l10"> <h4 class="card-title">Dismissable Content</h4> </div> <div class="col s12 m6 l2"> <ul class="tabs"> <li class="tab col s6 p-0"><a class="active p-0" href="#view-dismissable">View</a></li> <li class="tab col s6 p-0"><a class="p-0" href="#html-dismissable">Html</a></li> </ul> </div> </div> </div> <div id="view-dismissable"> <div class="row"> <div class="col s12"> <p>You can just add the class <code class="language-markup">dismissable</code> to enable each collection item to be swiped away. This is only for touch enabled devices.</p> </div> <div class="col s12"> <ul class="collection"> <li class="collection-item dismissable"> <div>Alvin <a href="#!" class="secondary-content"> <i class="material-icons">send</i> </a> </div> </li> <li class="collection-item dismissable"> <div>Alvin <a href="#!" class="secondary-content"> <i class="material-icons">send</i> </a> </div> </li> <li class="collection-item dismissable"> <div>Alvin <a href="#!" class="secondary-content"> <i class="material-icons">send</i> </a> </div> </li> <li class="collection-item dismissable"> <div>Alvin <a href="#!" class="secondary-content"> <i class="material-icons">send</i> </a> </div> </li> </ul> </div> </div> </div> <div id="html-dismissable"> <pre><code class="language-markup"> <ul class="collection"> <li class="collection-item dismissable"><div>Alvin<a href="#!" class="secondary-content"><i class="material-icons">send</i></a></div></li> <li class="collection-item dismissable"><div>Alvin<a href="#!" class="secondary-content"><i class="material-icons">send</i></a></div></li> <li class="collection-item dismissable"><div>Alvin<a href="#!" class="secondary-content"><i class="material-icons">send</i></a></div></li> <li class="collection-item dismissable"><div>Alvin<a href="#!" class="secondary-content"><i class="material-icons">send</i></a></div></li> </ul> </code></pre> </div> </div> </div> </div> </div> </div>