|
|
---layout : 'default'css : 'list'
element : 'list'elementType : 'element'
title : 'List'description : 'A list is used to group descriptions of related content'type : 'UI Element'
themes : ['Default']---<link rel="stylesheet/less" type="text/css" href="/build/less/definitions/views/list.less" />
<%- @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 simple list</p> <div class="ui list"> <div class="item">Apples</div> <div class="item">Pears</div> <div class="item">Oranges</div> </div> </div> <div class="example"> <h4 class="ui header">List</h4> <p>A list using all optional content types</p> <div class="ui list"> <div class="item"> <img class="ui top aligned avatar image" src="/images/demo/avatar2.jpg"> <div class="content"> <div class="header">Schnoodle</div> Your new dog <div class="list"> <div class="item"> <i class="right triangle 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="right triangle 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="right triangle 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> <div class="item"> <img class="ui top aligned avatar image" src="/images/demo/avatar3.jpg"> <div class="content"> <div class="header">Ragamuffin</div> Your old dog. <div class="list"> <div class="item"> <i class="right triangle 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="right triangle 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="right triangle 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>
<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 class="item">Review</div> </div> </div> <div class="another example"> <div class="ignored ui info message">An 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 contain an icon</p> <div class="ui list"> <a class="item"> <i class="help icon"></i> An icon immediately inside an item sits inline this content will sit under the icon if there is a line break </a> </div> </div> <div class="another example"> <div class="ui list"> <a class="item"> <i class="help icon"></i> <div class="content"> <div class="header">This is a floated icon</div> <div class="description">This text will always have a left margin to make sure it sits alongside your icon</div> </div> </a> <a class="item"> <i class="top aligned right triangle icon"></i> <div class="content"> <div class="header">Floated Icon Alignment</div> <div class="description">Floated icons are, by default, middle aligned. To have an icon top aligned try this example.</div> </div> </a> </div> </div>
<div class="example"> <h4 class="ui header">Image</h4> <p>A list item can contain an image</p> <div class="ui list"> <div class="item"> <div class="ui avatar image"> <img src="/images/demo/avatar2.jpg"> </div> <div class="content"> Twin 1 </div> </div> <div class="item"> <div class="ui avatar image"> <img src="/images/demo/avatar2.jpg"> </div> <div class="content"> Twin 2 </div> </div> <div class="item"> <div class="ui avatar image"> <img src="/images/demo/avatar2.jpg"> </div> <div class="content"> Twin 3 </div> </div> <div class="item"> <div class="ui avatar image"> <img src="/images/demo/avatar2.jpg"> </div> <div class="content"> Twin 4 </div> </div> <div class="item"> <div class="ui top aligned avatar image"> <img src="/images/demo/avatar2.jpg"> </div> <div class="content"> <div class="header">Twin 5</div> <div class="description">Twin 5 has a long description and requires a different vertical align to not look awkwardly aligned</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="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 class="item"> <i class="map marker icon"></i> <div class="content"> <a class="header">San Francisco</a> <div class="description">A lovely city</div> </div> </div> </div> </div>
<div class="example"> <h4 class="ui header">Content</h4> <p>Any element inside a list 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 class="ui avatar image" 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 class="ui avatar image" src="/images/demo/avatar3.jpg"> <div class="content"> <div class="header">Dog Appreciation Day</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 class="ui avatar image" src="/images/demo/avatar.jpg"> <div class="content"> <div class="header">Snickerdoodle</div> An excellent companion </div> </div> <div class="item"> <img class="ui avatar image" src="/images/demo/avatar2.jpg"> <div class="content"> <div class="header">Poodle</div> A poodle, its pretty basic </div> </div> <div class="item"> <img class="ui avatar image" 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">Inverted</h4> <p>A list can be inverted to appear on a dark background</p> <div class="ui inverted segment"> <div class="ui inverted relaxed divided list"> <div class="item"> <div class="content"> <div class="header">Snickerdoodle</div> An excellent companion </div> </div> <div class="item"> <div class="content"> <div class="header">Poodle</div> A poodle, its pretty basic </div> </div> <div class="item"> <div class="content"> <div class="header">Paulo</div> He's also a dog </div> </div> </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 class="ui avatar image" src="/images/demo/avatar.jpg"> <div class="content"> <div class="header">Snickerdoodle</div> An excellent companion </div> </div> <div class="item"> <img class="ui avatar image" src="/images/demo/avatar2.jpg"> <div class="content"> <div class="header">Poodle</div> A poodle, its pretty basic </div> </div> <div class="item"> <img class="ui avatar image" 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">Animated</h4> <p>A list can animate to set the current item apart from the list</p> <div class="ui info message"> Be sure content can fit on one line when using the animated variation, otherwise the content will create a new line break as the animated content adjusts to its new size. </div> <div class="ui animated list"> <div class="item"> <img class="ui avatar image" src="/images/demo/avatar.jpg"> <div class="content"> <div class="header">Snickerdoodle</div> An excellent companion </div> </div> <div class="item"> <img class="ui avatar image" src="/images/demo/avatar2.jpg"> <div class="content"> <div class="header">Poodle</div> A poodle, its pretty basic </div> </div> <div class="item"> <img class="ui avatar image" 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 class="ui avatar image" src="/images/demo/avatar.jpg"> <div class="content"> <div class="header">Snickerdoodle</div> An excellent companion </div> </div> <div class="item"> <img class="ui avatar image" src="/images/demo/avatar2.jpg"> <div class="content"> <div class="header">Poodle</div> A poodle, its pretty basic </div> </div> <div class="item"> <img class="ui avatar image" 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 ordered 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 class="item">Horses Again</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 class="ui avatar image" src="/images/demo/avatar.jpg"> <div class="content"> <div class="header">Snickerdoodle</div> An excellent companion </div> </div> <div class="item"> <img class="ui avatar image" src="/images/demo/avatar2.jpg"> <div class="content"> <div class="header">Poodle</div> A poodle, its pretty basic </div> </div> <div class="item"> <img class="ui avatar image" 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 ordered 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="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 bulleted horizontal list"> <div class="item"> Apples </div> <div class="item"> Oranges </div> <div class="item"> Pinapples </div> </div> </div> <div class="another example"> <div class="ui tiny bulleted horizontal list"> <div class="item"> Apples </div> <div class="item"> Oranges </div> <div class="item"> Pinapples </div> </div> </div> <div class="another example"> <div class="ui small bulleted horizontal list"> <div class="item"> Apples </div> <div class="item"> Oranges </div> <div class="item"> Pinapples </div> </div> </div> <div class="another example"> <div class="ui large list"> <div class="item"> <i class="mail outline icon"></i> <div class="content"> Thanks for being my owner </div> </div> <div class="item"> <i class="mail outline icon"></i> <div class="content"> What a walk </div> </div> <div class="item"> <i class="map icon"></i> <div class="content"> Sorry about your old dog </div> </div> </div> </div> <div class="another example"> <div class="ui big list"> <div class="item"> <i class="mail outline icon"></i> <div class="content"> Thanks for being my owner </div> </div> <div class="item"> <i class="mail outline icon"></i> <div class="content"> What a walk </div> </div> <div class="item"> <i class="map icon"></i> <div class="content"> Sorry about your old dog </div> </div> </div> </div> <div class="another example"> <div class="ui huge list"> <div class="item"> <i class="mail outline icon"></i> <div class="content"> Thanks for being my owner </div> </div> <div class="item"> <i class="mail outline icon"></i> <div class="content"> What a walk </div> </div> <div class="item"> <i class="map icon"></i> <div class="content"> Sorry about your old dog </div> </div> </div> </div> <div class="another example"> <div class="ui massive list"> <div class="item"> <i class="mail outline icon"></i> <div class="content"> Thanks for being my owner </div> </div> <div class="item"> <i class="mail outline icon"></i> <div class="content"> What a walk </div> </div> <div class="item"> <i class="map icon"></i> <div class="content"> Sorry about your old dog </div> </div> </div> </div>
</div>
|
