You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
701 lines
22 KiB
701 lines
22 KiB
---
|
|
layout : 'default'
|
|
css : 'list'
|
|
title : 'List'
|
|
description : 'A list is a group of related content items ordered consecutively'
|
|
type : 'UI View'
|
|
---
|
|
|
|
|
|
<%- @partial('header') %>
|
|
<div class="main container">
|
|
|
|
<div class="peek">
|
|
<div class="ui vertical pointing secondary menu">
|
|
<a class="active item">Types</a>
|
|
<a class="item">Content</a>
|
|
<a class="item">Variations</a>
|
|
</div>
|
|
</div>
|
|
|
|
<h2 class="ui dividing header">Types</h2>
|
|
<div class="example">
|
|
<h4 class="ui header">List</h4>
|
|
<p>A standard list</p>
|
|
<div class="ui divided list">
|
|
<div class="item">
|
|
<img src="/images/demo/avatar2.jpg">
|
|
<div class="content">
|
|
<div class="header">Schnoodle</div>
|
|
Your new dog
|
|
</div>
|
|
<div class="list">
|
|
<div class="item">
|
|
<i class="mail outline icon"></i>
|
|
<div class="content">
|
|
<a class="header">Thanks for being my owner</a>
|
|
<div class="description">Im so glad you chose to bring me home from the shelter...</div>
|
|
</div>
|
|
</div>
|
|
<div class="item">
|
|
<i class="mail outline icon"></i>
|
|
<div class="content">
|
|
<a class="header">What a walk</a>
|
|
<div class="description">Man i am so tired that walk today really was too far...</div>
|
|
</div>
|
|
</div>
|
|
<div class="item">
|
|
<i class="map icon"></i>
|
|
<div class="content">
|
|
<a class="header">Sorry about your old dog</a>
|
|
<div class="description">Is this your address? I'm getting dropped off from the SPCA...</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="item">
|
|
<img src="/images/demo/avatar3.jpg">
|
|
<div class="content">
|
|
<div class="header">Ragamuffin</div>
|
|
Your old dog.
|
|
</div>
|
|
<div class="list">
|
|
<div class="item">
|
|
<i class="photo icon"></i>
|
|
<div class="content">
|
|
<a class="header">Was on a walk today</a>
|
|
<div class="description">Here's a picture of me on the farm with a cow...</div>
|
|
</div>
|
|
</div>
|
|
<div class="item">
|
|
<i class="mail outline icon"></i>
|
|
<div class="content">
|
|
<a class="header">Ruff Ruff</a>
|
|
<div class="description">I know i usually message you in english but i wanted to see how your dog language was progressing...</div>
|
|
</div>
|
|
</div>
|
|
<div class="item">
|
|
<i class="mail outline icon"></i>
|
|
<div class="content">
|
|
<a class="header">Reaching Out</a>
|
|
<div class="description">Hey its your old dog, been a while since you sent me to the farm...</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="example">
|
|
<h4 class="ui header">Bulleted</h4>
|
|
<p>A list can mark items with a bullet</p>
|
|
<div class="ui bulleted list">
|
|
<div class="item">Cats</div>
|
|
<div class="item">Horses</div>
|
|
<div class="item">Dogs
|
|
<div class="list">
|
|
<div class="item">Labradoodles</div>
|
|
<div class="item">Shiba Inu</div>
|
|
<div class="item">Mastiff</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="another example">
|
|
<div class="ignored ui info message">For convenience, a simple bulleted list can also use <code>ul</code> tag.</div>
|
|
<ul class="ui list">
|
|
<li>Cats</li>
|
|
<li>Horses</li>
|
|
<li>Dogs</li>
|
|
<ul>
|
|
<li>Labradoodles</li>
|
|
<li>Shiba Inu</li>
|
|
<li>Mastiff</li>
|
|
</ul>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<div class="example">
|
|
<h4 class="ui header">Ordered</h4>
|
|
<p>A list can be ordered numerically</p>
|
|
<div class="ui ordered list">
|
|
<div class="item">Getting Started</div>
|
|
<div class="item">Introduction</div>
|
|
<div class="item">Languages
|
|
<div class="list">
|
|
<div class="item">HTML</div>
|
|
<div class="item">Javascript</div>
|
|
<div class="item">CSS</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="another example">
|
|
<div class="ignored ui info message">For convenience, a simple ordered list can also use the <code>ol</code> tag</div>
|
|
<ol class="ui list">
|
|
<li>Cats</li>
|
|
<li>Horses</li>
|
|
<li>Dogs</li>
|
|
<ol>
|
|
<li>Labradoodles</li>
|
|
<li>Shiba Inu</li>
|
|
<li>Mastiff</li>
|
|
</ol>
|
|
</li>
|
|
</ol>
|
|
</div>
|
|
|
|
<div class="example">
|
|
<h4 class="ui header">Link</h4>
|
|
<p>A link list is specially formatted for page links</p>
|
|
<div class="ui link list">
|
|
<a class="item">Home</a>
|
|
<a class="item">About</a>
|
|
<a class="item">Jobs</a>
|
|
<a class="item">Team</a>
|
|
</div>
|
|
</div>
|
|
|
|
<h2 class="ui dividing header">Content</h2>
|
|
|
|
<div class="example">
|
|
<h4 class="ui header">Icon</h4>
|
|
<p>A list item can have an icon</p>
|
|
<div class="ui list">
|
|
<a class="item">
|
|
<i class="right triangle icon"></i>
|
|
How do you know your dog likes you?
|
|
</a>
|
|
<a class="item">
|
|
<i class="right triangle icon"></i>
|
|
When is it ok to send your dog to a farm?
|
|
</a>
|
|
<a class="item">
|
|
<i class="right triangle icon"></i>
|
|
Can you get your dog back from a farm if you really want him back?
|
|
</a>
|
|
<a class="item">
|
|
<i class="right triangle icon"></i>
|
|
Is trespassing on a farm a misdemeanor offence?
|
|
</a>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="example">
|
|
<h4 class="ui header">Content</h4>
|
|
<p>A list can have groups of content that can be floated left or right</p>
|
|
<div class="ui divided list">
|
|
<div class="item">
|
|
<div class="right floated tiny teal ui button">View Listing</div>
|
|
<img src="/images/demo/avatar2.jpg">
|
|
<div class="content">
|
|
<div class="header">New York Dog Fair</div>
|
|
</div>
|
|
</div>
|
|
<div class="item">
|
|
<div class="right floated tiny teal ui button">View Listing</div>
|
|
<img src="/images/demo/avatar3.jpg">
|
|
<div class="content">
|
|
<div class="header">Dog Appreciation Day</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="example">
|
|
<h4 class="ui header">Link</h4>
|
|
<p>A list can contain items that link</p>
|
|
<div class="ui list">
|
|
<a class="item">What is a FAQ?</a>
|
|
<a class="item">How does one go about reading answers to questions in a FAQ</a>
|
|
<a class="item">How do you close a web browser?</a>
|
|
<a class="item">What is the most popular FAQ question?</a>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="example">
|
|
<h4 class="ui header">Header</h4>
|
|
<p>A list item can contain a header</p>
|
|
<div class="ui list">
|
|
<div class="item">
|
|
<div class="header">New York City</div>
|
|
A lovely city
|
|
</div>
|
|
<div class="item">
|
|
<div class="header">Chicago</div>
|
|
Also quite a lovely city
|
|
</div>
|
|
<div class="item">
|
|
<div class="header">Los Angeles</div>
|
|
Sometimes can be a lovely city
|
|
</div>
|
|
<div class="item">
|
|
<div class="header">San Francisco</div>
|
|
What a lovely city
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="example">
|
|
<h4 class="ui header">Description</h4>
|
|
<p>A list item can contain a description</p>
|
|
<div class="ui divided list">
|
|
<div class="item">
|
|
<i class="circular map marker icon"></i>
|
|
<div class="content">
|
|
<a class="header">New York City</a>
|
|
<div class="description">A lovely city</div>
|
|
</div>
|
|
</div>
|
|
<div class="item">
|
|
<i class="circular map marker icon"></i>
|
|
<div class="content">
|
|
<a class="header">Chicago</a>
|
|
<div class="description">A lovely city</div>
|
|
</div>
|
|
</div>
|
|
<div class="item">
|
|
<i class="circular map marker icon"></i>
|
|
<div class="content">
|
|
<a class="header">Los Angeles</a>
|
|
<div class="description">A lovely city</div>
|
|
</div>
|
|
</div>
|
|
<div class="item">
|
|
<i class="circular map marker icon"></i>
|
|
<div class="content">
|
|
<a class="header">San Francisco</a>
|
|
<div class="description">A lovely city</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<h2 class="ui dividing header">Variations</h2>
|
|
|
|
|
|
<div class="example">
|
|
<h4 class="ui header">Horizontal List</h4>
|
|
<p>A list can be formatted horizontally</p>
|
|
<div class="ui horizontal list">
|
|
<div class="item">
|
|
<img src="/images/demo/avatar.jpg">
|
|
<div class="content">
|
|
<div class="header">Snickerdoodle</div>
|
|
An excellent companion
|
|
</div>
|
|
</div>
|
|
<div class="item">
|
|
<img src="/images/demo/avatar2.jpg">
|
|
<div class="content">
|
|
<div class="header">Poodle</div>
|
|
A poodle, its pretty basic
|
|
</div>
|
|
</div>
|
|
<div class="item">
|
|
<img src="/images/demo/avatar3.jpg">
|
|
<div class="content">
|
|
<div class="header">Paulo</div>
|
|
He's also a dog
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="another example">
|
|
<div class="ui ordered horizontal list">
|
|
<div class="item">New York City</div>
|
|
<div class="item">Chicago</div>
|
|
<div class="item">Los Angeles</div>
|
|
<div class="item">San Francisco</div>
|
|
</div>
|
|
</div>
|
|
<div class="another example">
|
|
<div class="ui horizontal bulleted list">
|
|
<div class="item">
|
|
Apples
|
|
</div>
|
|
<div class="item">
|
|
Pears
|
|
</div>
|
|
<div class="item">
|
|
Oranges
|
|
</div>
|
|
<div class="item">
|
|
Soursop
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="example">
|
|
<h4 class="ui header">Selection</h4>
|
|
<p>A selection list formats list items as possible choices</p>
|
|
<div class="ui selection list">
|
|
<div class="item">
|
|
<img src="/images/demo/avatar.jpg">
|
|
<div class="content">
|
|
<div class="header">Snickerdoodle</div>
|
|
An excellent companion
|
|
</div>
|
|
</div>
|
|
<div class="item">
|
|
<img src="/images/demo/avatar2.jpg">
|
|
<div class="content">
|
|
<div class="header">Poodle</div>
|
|
A poodle, its pretty basic
|
|
</div>
|
|
</div>
|
|
<div class="item">
|
|
<img src="/images/demo/avatar3.jpg">
|
|
<div class="content">
|
|
<div class="header">Paulo</div>
|
|
He's also a dog
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="example">
|
|
<h4 class="ui header">Relaxed</h4>
|
|
<p>A list can relax its padding to provide more negative space</p>
|
|
<div class="ui relaxed divided list">
|
|
<div class="item">
|
|
<i class="map marker icon"></i>
|
|
<div class="content">
|
|
<a class="header">New York City</a>
|
|
<div class="description">A lovely city</div>
|
|
</div>
|
|
</div>
|
|
<div class="item">
|
|
<i class="map marker icon"></i>
|
|
<div class="content">
|
|
<a class="header">Chicago</a>
|
|
<div class="description">A lovely city</div>
|
|
</div>
|
|
</div>
|
|
<div class="item">
|
|
<i class="map marker icon"></i>
|
|
<div class="content">
|
|
<a class="header">Los Angeles</a>
|
|
<div class="description">A lovely city</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="another example">
|
|
<div class="ui very relaxed divided list">
|
|
<div class="item">
|
|
<i class="map marker icon"></i>
|
|
<div class="content">
|
|
<a class="header">New York City</a>
|
|
<div class="description">A lovely city</div>
|
|
</div>
|
|
</div>
|
|
<div class="item">
|
|
<i class="map marker icon"></i>
|
|
<div class="content">
|
|
<a class="header">Chicago</a>
|
|
<div class="description">A lovely city</div>
|
|
</div>
|
|
</div>
|
|
<div class="item">
|
|
<i class="map marker icon"></i>
|
|
<div class="content">
|
|
<a class="header">Los Angeles</a>
|
|
<div class="description">A lovely city</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="another example">
|
|
<div class="ui relaxed horizontal divided list">
|
|
<div class="item">
|
|
<i class="map marker icon"></i>
|
|
<div class="content">
|
|
<a class="header">New York City</a>
|
|
<div class="description">A lovely city</div>
|
|
</div>
|
|
</div>
|
|
<div class="item">
|
|
<i class="map marker icon"></i>
|
|
<div class="content">
|
|
<a class="header">Chicago</a>
|
|
<div class="description">A lovely city</div>
|
|
</div>
|
|
</div>
|
|
<div class="item">
|
|
<i class="map marker icon"></i>
|
|
<div class="content">
|
|
<a class="header">Los Angeles</a>
|
|
<div class="description">A lovely city</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="another example">
|
|
<div class="ui very relaxed horizontal divided list">
|
|
<div class="item">
|
|
<i class="map marker icon"></i>
|
|
<div class="content">
|
|
<a class="header">New York City</a>
|
|
<div class="description">A lovely city</div>
|
|
</div>
|
|
</div>
|
|
<div class="item">
|
|
<i class="map marker icon"></i>
|
|
<div class="content">
|
|
<a class="header">Chicago</a>
|
|
<div class="description">A lovely city</div>
|
|
</div>
|
|
</div>
|
|
<div class="item">
|
|
<i class="map marker icon"></i>
|
|
<div class="content">
|
|
<a class="header">Los Angeles</a>
|
|
<div class="description">A lovely city</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="example">
|
|
<h4 class="ui header">Divided</h4>
|
|
<p>A list can show divisions between content</p>
|
|
<div class="ui divided list">
|
|
<div class="item">
|
|
<img src="/images/demo/avatar.jpg">
|
|
<div class="content">
|
|
<div class="header">Snickerdoodle</div>
|
|
An excellent companion
|
|
</div>
|
|
</div>
|
|
<div class="item">
|
|
<img src="/images/demo/avatar2.jpg">
|
|
<div class="content">
|
|
<div class="header">Poodle</div>
|
|
A poodle, its pretty basic
|
|
</div>
|
|
</div>
|
|
<div class="item">
|
|
<img src="/images/demo/avatar3.jpg">
|
|
<div class="content">
|
|
<div class="header">Paulo</div>
|
|
He's also a dog
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="another example">
|
|
<div class="ui divided horizontal list">
|
|
<div class="item">About Us</div>
|
|
<div class="item">Contact</div>
|
|
<div class="item">Support</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="example">
|
|
<h4 class="ui header">Celled</h4>
|
|
<p>A list can divide its items into cells</p>
|
|
<div class="ui celled list">
|
|
<div class="item">
|
|
<img src="/images/demo/avatar.jpg">
|
|
<div class="content">
|
|
<div class="header">Snickerdoodle</div>
|
|
An excellent companion
|
|
</div>
|
|
</div>
|
|
<div class="item">
|
|
<img src="/images/demo/avatar2.jpg">
|
|
<div class="content">
|
|
<div class="header">Poodle</div>
|
|
A poodle, its pretty basic
|
|
</div>
|
|
</div>
|
|
<div class="item">
|
|
<img src="/images/demo/avatar3.jpg">
|
|
<div class="content">
|
|
<div class="header">Paulo</div>
|
|
He's also a dog
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="another example">
|
|
<div class="ui celled horizontal list">
|
|
<div class="item">About Us</div>
|
|
<div class="item">Contact</div>
|
|
<div class="item">Support</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="example">
|
|
<h4 class="ui header">Sizes</h4>
|
|
<p>A list can vary in size</p>
|
|
|
|
<div class="ui mini list">
|
|
<div class="item">
|
|
<i class="mail outline icon"></i>
|
|
<div class="content">
|
|
<a class="header">Thanks for being my owner</a>
|
|
<div class="description">Im so glad you chose to bring me home from the shelter...</div>
|
|
</div>
|
|
</div>
|
|
<div class="item">
|
|
<i class="mail outline icon"></i>
|
|
<div class="content">
|
|
<a class="header">What a walk</a>
|
|
<div class="description">Man i am so tired that walk today really was too far...</div>
|
|
</div>
|
|
</div>
|
|
<div class="item">
|
|
<i class="map icon"></i>
|
|
<div class="content">
|
|
<a class="header">Sorry about your old dog</a>
|
|
<div class="description">Is this your address? I'm getting dropped off from the SPCA...</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="ui tiny list">
|
|
<div class="item">
|
|
<i class="mail outline icon"></i>
|
|
<div class="content">
|
|
<a class="header">Thanks for being my owner</a>
|
|
<div class="description">Im so glad you chose to bring me home from the shelter...</div>
|
|
</div>
|
|
</div>
|
|
<div class="item">
|
|
<i class="mail outline icon"></i>
|
|
<div class="content">
|
|
<a class="header">What a walk</a>
|
|
<div class="description">Man i am so tired that walk today really was too far...</div>
|
|
</div>
|
|
</div>
|
|
<div class="item">
|
|
<i class="map icon"></i>
|
|
<div class="content">
|
|
<a class="header">Sorry about your old dog</a>
|
|
<div class="description">Is this your address? I'm getting dropped off from the SPCA...</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="ui small list">
|
|
<div class="item">
|
|
<i class="mail outline icon"></i>
|
|
<div class="content">
|
|
<a class="header">Thanks for being my owner</a>
|
|
<div class="description">Im so glad you chose to bring me home from the shelter...</div>
|
|
</div>
|
|
</div>
|
|
<div class="item">
|
|
<i class="mail outline icon"></i>
|
|
<div class="content">
|
|
<a class="header">What a walk</a>
|
|
<div class="description">Man i am so tired that walk today really was too far...</div>
|
|
</div>
|
|
</div>
|
|
<div class="item">
|
|
<i class="map icon"></i>
|
|
<div class="content">
|
|
<a class="header">Sorry about your old dog</a>
|
|
<div class="description">Is this your address? I'm getting dropped off from the SPCA...</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="ui large list">
|
|
<div class="item">
|
|
<i class="mail outline icon"></i>
|
|
<div class="content">
|
|
<a class="header">Thanks for being my owner</a>
|
|
<div class="description">Im so glad you chose to bring me home from the shelter...</div>
|
|
</div>
|
|
</div>
|
|
<div class="item">
|
|
<i class="mail outline icon"></i>
|
|
<div class="content">
|
|
<a class="header">What a walk</a>
|
|
<div class="description">Man i am so tired that walk today really was too far...</div>
|
|
</div>
|
|
</div>
|
|
<div class="item">
|
|
<i class="map icon"></i>
|
|
<div class="content">
|
|
<a class="header">Sorry about your old dog</a>
|
|
<div class="description">Is this your address? I'm getting dropped off from the SPCA...</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="ui big list">
|
|
<div class="item">
|
|
<i class="mail outline icon"></i>
|
|
<div class="content">
|
|
<a class="header">Thanks for being my owner</a>
|
|
<div class="description">Im so glad you chose to bring me home from the shelter...</div>
|
|
</div>
|
|
</div>
|
|
<div class="item">
|
|
<i class="mail outline icon"></i>
|
|
<div class="content">
|
|
<a class="header">What a walk</a>
|
|
<div class="description">Man i am so tired that walk today really was too far...</div>
|
|
</div>
|
|
</div>
|
|
<div class="item">
|
|
<i class="map icon"></i>
|
|
<div class="content">
|
|
<a class="header">Sorry about your old dog</a>
|
|
<div class="description">Is this your address? I'm getting dropped off from the SPCA...</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="ui huge list">
|
|
<div class="item">
|
|
<i class="mail outline icon"></i>
|
|
<div class="content">
|
|
<a class="header">Thanks for being my owner</a>
|
|
<div class="description">Im so glad you chose to bring me home from the shelter...</div>
|
|
</div>
|
|
</div>
|
|
<div class="item">
|
|
<i class="mail outline icon"></i>
|
|
<div class="content">
|
|
<a class="header">What a walk</a>
|
|
<div class="description">Man i am so tired that walk today really was too far...</div>
|
|
</div>
|
|
</div>
|
|
<div class="item">
|
|
<i class="map icon"></i>
|
|
<div class="content">
|
|
<a class="header">Sorry about your old dog</a>
|
|
<div class="description">Is this your address? I'm getting dropped off from the SPCA...</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="ui massive list">
|
|
<div class="item">
|
|
<i class="mail outline icon"></i>
|
|
<div class="content">
|
|
<a class="header">Thanks for being my owner</a>
|
|
<div class="description">Im so glad you chose to bring me home from the shelter...</div>
|
|
</div>
|
|
</div>
|
|
<div class="item">
|
|
<i class="mail outline icon"></i>
|
|
<div class="content">
|
|
<a class="header">What a walk</a>
|
|
<div class="description">Man i am so tired that walk today really was too far...</div>
|
|
</div>
|
|
</div>
|
|
<div class="item">
|
|
<i class="map icon"></i>
|
|
<div class="content">
|
|
<a class="header">Sorry about your old dog</a>
|
|
<div class="description">Is this your address? I'm getting dropped off from the SPCA...</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
|
|
</div>
|