javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-11-07 15:07:13 +08:00
Code Issues Packages Projects Releases Wiki Activity

list thumbnails

Browse Source
This commit is contained in:
Adam Bradley
2013-10-23 13:47:22 -05:00
parent 6c6eb957a4
commit edca023980
7 changed files with 706 additions and 246 deletions
Download Patch File Download Diff File Expand all files Collapse all files

169
test/lists.html
View File

@ -16,6 +16,94 @@
<main class="content-wrapper">
<div class="content has-header">
<div class="list">
<div class="list-divider">
Work
</div>
<a href="#" class="list-item list-icon-left">
<div class="list-item-content">
<i class="icon-email"></i>
Check mail
<span class="badge badge-info">5</span>
</div>
</a>
<a href="#" class="list-item list-icon-left">
<div class="list-item-content">
<i class="icon-chatbubble-working"></i>
Call Ma
<span class="list-label-right">
Cell
</span>
</div>
</a>
<a href="#" class="list-item list-icon-left">
<div class="list-item-content">
<i class="icon-mic-a"></i>
Record album
<span class="list-label-right">
Grammy
</span>
</div>
</a>
<a href="#" class="list-item list-icon-left">
<div class="list-item-content">
<i class="icon-flask"></i>
Breaking Bad
<span class="list-label-right">
Blue, yellow, pink
</span>
</div>
</a>
<div class="list-divider">
Leisure
</div>
<a href="#" class="list-item list-icon-left">
<div class="list-item-content">
<i class="icon-game-controller-b"></i>
Games
<span class="list-label-right">
Super Mario
</span>
</div>
</a>
<a href="#" class="list-item list-icon-left">
<div class="list-item-content">
<i class="icon-music-note"></i>
Music
<span class="list-label-right">
JT
</span>
</div>
</a>
<a href="#" class="list-item list-icon-left">
<div class="list-item-content">
<i class="icon-bag"></i>
Shopping
<span class="list-label-right">
Bag
</span>
</div>
</a>
<a href="#" class="list-item list-icon-left">
<div class="list-item-content">
<i class="icon-person-stalker"></i>
Friends
<span class="badge badge-danger">0</span>
</div>
</a>
</div>
<div class="list">
<div class="list-header">
@ -36,8 +124,8 @@
<a href="#" class="list-item list-icon-right">
<div class="list-item-content slide-right">
Custom Right Icon
<i class="icon-ios7-information-outline"></i>
Processing Icon
<i class="icon-loading"></i>
</div>
</a>
@ -202,17 +290,21 @@
<div class="list padding">
<div class="list-header">
Me List Header
</div>
<a href="#" class="list-item list-icon-left">
<div class="list-item-content">
<i class="icon-heart brand-danger fill-icon"></i>
Madison, WI
Icon is filled!!
</div>
</a>
<a href="#" class="list-item list-icon-left">
<div class="list-item-content">
<i class="icon-image brand-warning fill-icon"></i>
Driving Directions
.fill-icon
</div>
</a>
@ -223,7 +315,20 @@
<a href="#" class="list-item list-icon-left list-icon-right">
<div class="list-item-content slide-left slide-right">
<i class="icon-ios7-cog gray fill-icon"></i>
This is a list item with really really really really really
Default has no wrap! This is a list item with really really really really really
really really really really long long long long long long
text text text texxxxxttt text testy text!!!
<i class="icon-chevron-right"></i>
</div>
<div class="list-item-buttons">
<button class="button">Button</button>
</div>
</a>
<a href="#" class="list-item list-icon-left list-icon-right">
<div class="list-item-content list-item-text-wrap slide-left slide-right">
<i class="icon-ios7-cog gray fill-icon"></i>
Assigned "list-item-text-wrap". This is a list item with really really really really really
really really really really long long long long long long
text text text texxxxxttt text testy text!!!
<i class="icon-chevron-right"></i>
@ -240,11 +345,12 @@
<button class="button button-secondary" id="btn-test-left">Test Slide Left</button>
</div>
<h3>Thumbnails .list-thumbnail</h3>
<div class="list">
<a href="#" class="list-item list-thumbnail">
<div class="list-item-content">
<img src="//ecx.images-amazon.com/images/I/41D5vU4I1NL.jpg">
<img src="http://ecx.images-amazon.com/images/I/41D5vU4I1NL.jpg">
<h2>Pretty Hate Machine</h2>
<p>Nine Inch Nails</p>
</div>
@ -252,15 +358,7 @@
<a href="#" class="list-item list-thumbnail">
<div class="list-item-content">
<img src="//ecx.images-amazon.com/images/I/41H62046AHL.jpg">
<h2>Siamese Dream</h2>
<p>Smashing Pumpkins</p>
</div>
</a>
<a href="#" class="list-item list-thumbnail">
<div class="list-item-content">
<img src="//ecx.images-amazon.com/images/I/51tr3o4kd9L.jpg">
<img src="http://ecx.images-amazon.com/images/I/51tr3o4kd9L.jpg">
<h2>Nevermind</h2>
<p>Nirvana</p>
</div>
@ -268,7 +366,7 @@
<a href="#" class="list-item list-thumbnail">
<div class="list-item-content">
<img src="//ecx.images-amazon.com/images/I/51j-SggaWSL.jpg">
<img src="http://ecx.images-amazon.com/images/I/51j-SggaWSL.jpg">
<h2>License To Ill</h2>
<p>Bestie Boys</p>
</div>
@ -276,7 +374,44 @@
<a href="#" class="list-item list-thumbnail">
<div class="list-item-content">
<img src="//ecx.images-amazon.com/images/I/61e6mUocZNL.jpg">
<img src="http://ecx.images-amazon.com/images/I/61e6mUocZNL.jpg">
<h2>Dookie</h2>
<p>Green Day</p>
</div>
</a>
</div>
<h3>Large Thumbnails .list-thumbnail-lrg</h3>
<div class="list">
<a href="#" class="list-item list-thumbnail-lrg">
<div class="list-item-content">
<img src="http://ecx.images-amazon.com/images/I/41D5vU4I1NL.jpg">
<h2>Pretty Hate Machine</h2>
<p>Nine Inch Nails</p>
</div>
</a>
<a href="#" class="list-item list-thumbnail-lrg">
<div class="list-item-content">
<img src="http://ecx.images-amazon.com/images/I/51tr3o4kd9L.jpg">
<h2>Nevermind</h2>
<p>Nirvana</p>
</div>
</a>
<a href="#" class="list-item list-thumbnail-lrg">
<div class="list-item-content">
<img src="http://ecx.images-amazon.com/images/I/51j-SggaWSL.jpg">
<h2>License To Ill</h2>
<p>Bestie Boys</p>
</div>
</a>
<a href="#" class="list-item list-thumbnail-lrg">
<div class="list-item-content">
<img src="http://ecx.images-amazon.com/images/I/61e6mUocZNL.jpg">
<h2>Dookie</h2>
<p>Green Day</p>
</div>