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.
|
|
<!DOCTYPE html><html><head> <!-- Standard Meta --> <meta charset="utf-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
<!-- Site Properities --> <title>Kitchen Sink - Semantic</title>
<link rel="stylesheet" type="text/css" href="../dist/semantic.css"> <link rel="stylesheet" type="text/css" href="kitchensink.css">
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.3/jquery.js"></script> <script src="../dist/semantic.js"></script></head><body id="sink"> <div class="ui stackable very relaxed padded grid"> <div class="one column row"> <div class="column"> <h1 class="ui center aligned header">Kitchen Sink</h1> <div class="ui warning message" style="max-width: 650px;margin:0 auto;"> <div class="header">We need your help</div> <p> These kitchen sink demos are <b>very incomplete</b>. If you have time, please help us out by <a href="https://github.com/Semantic-Org/Semantic-UI-Docs/tree/master/server/partials/examples">adding examples for missing elements</a> and <a href="https://help.github.com/articles/using-pull-requests/">submitting a pull request.</a> </p> </div> <div class="ui divider"></div> </div> </div> <div class="three column demo row"> <div class="column"> <div class="no example"> <h4 class="ui header"> <a href="/collections/menu.html">Button</a> </h4> <div class="button demo"> <div class="ui button"> View </div> <div class="ui primary button"> <i class="shop icon"></i> Add to Cart </div> <div class="ui secondary button"> <i class="save icon"></i> Save for Later </div> <div class="ui labeled icon button"> <i class="star icon"></i> Rate </div> <div class="ui basic button">Basic</div>
<div class="ui fitted hidden divider"></div>
<div class="ui animated button"> <div class="visible content">Horizontal</div> <div class="hidden content"> Hidden </div> </div> <div class="ui vertical animated button"> <div class="visible content">Vertical</div> <div class="hidden content"> Hidden </div> </div> <div class="ui animated fade button"> <div class="visible content">Fade In</div> <div class="hidden content"> Hidden </div> </div>
<div class="ui fitted hidden divider"></div> <div class="ui buttons"> <div class="ui button">1</div> <div class="ui button">2</div> <div class="ui button">3</div> </div>
<div class="ui buttons"> <div class="ui button">Cancel</div> <div class="or"></div> <div class="ui positive button">Save</div> </div>
<div class="ui icon buttons"> <div class="ui button"><i class="align left icon"></i></div> <div class="ui button"><i class="align center icon"></i></div> <div class="ui button"><i class="align right icon"></i></div> <div class="ui button"><i class="align justify icon"></i></div> </div>
<div class="ui fitted hidden divider"></div> <div class="ui blue button">Blue</div> <div class="ui red button">Red</div> <div class="ui teal button">Teal</div>
<div class="ui fitted hidden divider"></div> <div class="ui blue basic button">Blue</div> <div class="ui red basic button">Red</div> <div class="ui teal basic button">Teal</div>
<div class="ui inverted segment"> <div class="ui inverted button">Inverted</div> <div class="ui inverted blue button">Blue</div> <div class="ui inverted red button">Red</div> <div class="ui fitted hidden divider"></div> <div class="ui inverted basic button">Basic</div> <div class="ui inverted blue basic button">Blue</div> <div class="ui inverted red basic button">Red</div> </div> </div> <script type="text/javascript"> $('.button.demo .follow') .state({ text: { inactive : 'Follow', active : 'Following' } }) ; </script> </div> <div class="no example"> <h4 class="ui header"> <a href="/collections/menu.html">Menu</a> </h4> <div class="ui vertical demo fluid menu"> <a class="active item"> A </a> <a class="item"> B </a> </div> <div class="ui vertical demo fluid menu"> <a class="active teal item"> A </a> <a class="item"> B <div class="ui label">1</div> </a> <div class="item"> <div class="ui transparent icon input"> <input type="text" placeholder="Search..."> <i class="search icon"></i> </div> </div> </div> <div class="ui fluid tabular menu"> <a class="active item"> Tab </a> <a class="item"> Tab </a> </div> <div class="ui secondary vertical demo fluid menu"> <a class="active item"> A </a> <a class="item"> B </a> <a class="item"> C </a> </div> <div class="ui secondary pointing vertical demo fluid menu"> <a class="active item"> A </a> <a class="item"> B </a> <a class="item"> C </a> </div>
<script type="text/javascript"> $(document) .ready(function(){ $('.demo.menu .item') .on('click', function() { if(!$(this).hasClass('dropdown')) { $(this) .addClass('active') .closest('.ui.menu') .find('.item') .not($(this)) .removeClass('active') ; } }) ; }) ; </script> </div> <div class="no example"> <h4 class="ui header"> <a href="/modules/accordion.html">Divider</a> </h4> <div class="ui center aligned segment"> <div class="ui button">A</div> <div class="ui horizontal divider">and</div> <div class="teal ui button">B</div> </div> <div class="ui two column stackable center aligned grid segment"> <div class="column"> <div class="ui button">A</div> </div> <div class="ui vertical divider">or</div> <div class="column"> <div class="teal ui button">B</div> </div> </div> </div> <div class="no example"> <h4 class="ui header"> <a href="/modules/accordion.html">Accordion</a> </h4> <div class="ui vertical fluid accordion menu"> <div class="item"> <a class="active title"> <i class="dropdown icon"></i> Menu Item </a> <div class="active content"> <div class="ui form"> <div class="grouped fields"> <div class="field"> <div class="ui radio checkbox"> <input type="radio" name="radio1" value="small"> <label>Choice 1</label> </div> </div> <div class="field"> <div class="ui radio checkbox"> <input type="radio" name="radio1" value="medium"> <label>Choice 2</label> </div> </div> <div class="field"> <div class="ui radio checkbox"> <input type="radio" name="radio1" value="large"> <label>Choice 3</label> </div> </div> <div class="field"> <div class="ui radio checkbox"> <input type="radio" name="radio1" value="x-large"> <label>Choice 4</label> </div> </div> </div> </div> </div> </div> <div class="item"> <a class="title"> <i class="dropdown icon"></i> Menu Item </a> <div class="content"> <div class="ui form"> <div class="grouped fields"> <div class="field"> <div class="ui radio checkbox"> <input type="radio" name="radio2" value="small"> <label>Choice A</label> </div> </div> <div class="field"> <div class="ui radio checkbox"> <input type="radio" name="radio2" value="medium"> <label>Choice B</label> </div> </div> <div class="field"> <div class="ui radio checkbox"> <input type="radio" name="radio2" value="large"> <label>Choice C</label> </div> </div> <div class="field"> <div class="ui radio checkbox"> <input type="radio" name="radio2" value="x-large"> <label>Choice D</label> </div> </div> </div> </div> </div> </div> </div>
<div class="ui styled accordion"> <div class="active title"> <i class="dropdown icon"></i> Title </div> <div class="active content"> <img src="images/wireframe/paragraph.png" class="ui wireframe image"> </div> <div class="title"> <i class="dropdown icon"></i> Title </div> <div class="content"> <img src="images/wireframe/paragraph.png" class="ui wireframe image"> </div> <div class="title"> <i class="dropdown icon"></i> Title </div> <div class="content"> <img src="images/wireframe/paragraph.png" class="ui wireframe image"> </div> </div>
<script type="text/javascript"> $(document) .ready(function(){ $('.demo .ui.accordion') .accordion() ; }) ; </script> </div> <div class="no example"> <h4 class="ui header"> <a href="/collections/message.html">Message</a> </h4> <div class="ui message"> <i class="close icon"></i> Closable message </div> <div class="ui warning icon message"> <div class="content"> <div class="header">Warning Message</div> <ul class="list"> <li>List item</li> <li>List item</li> </ul> </div> </div> <div class="ui info message"> <div class="header">Info Message</div> <p>Example description</p> </div> <div class="ui success message"> <div class="content"> <div class="header">Positive Message</div> <p>Example description</p> </div> </div> <div class="ui icon error message"> <i class="attention circle icon"></i> <div class="content"> <div class="header">Negative Message</div> <p>Example description</p> </div> </div> <div class="ui top attached message"> Top attached </div> <div class="ui bottom attached message"> Bottom attached </div>
<script type="text/javascript"> $(document) .ready(function(){ $('.example .message .close') .on('click', function() { $(this).closest('.message').transition('scale out'); }) ;
}) ; </script> </div> </div> <div class="column"> <div class="no example"> <h4 class="ui header"> <a href="/views/feed.html">Feed</a> </h4> <div class="ui feed"> <div class="event"> <div class="label"> <img src="images/wireframe/square-image.png"> </div> <div class="content"> <div class="summary"> <a class="user"> Username </a> added you as a friend </div> </div> </div> <div class="event"> <div class="label"> <img src="images/wireframe/square-image.png"> </div> <div class="content"> You added Username to the group <a>Group Name</a> </div> </div> <div class="event"> <div class="label"> <img src="images/wireframe/square-image.png"> </div> <div class="content"> <div class="date"> Time period ago </div> <div class="summary"> <a>Userrname</a> added <a>new photos</a> </div> <div class="extra images"> <a><img src="images/wireframe/image.png"></a> </div> <div class="meta"> <a class="like"> <i class="like icon"></i> 1 Like </a> </div> </div> </div> </div> <div class="ui hidden divider"></div> <div class="ui feed"> <div class="event"> <div class="label"> <i class="pencil icon"></i> </div> <div class="content"> <div class="summary"> You wrote something <div class="date"> Time period ago </div> </div> <div class="extra text"> Blockquote </div> <div class="meta"> <a>Metadata</a> <a>Metadata</a> </div> </div> </div> <div class="event"> <div class="label"> <i class="photo icon"></i> </div> <div class="content"> <div class="summary"> You uploaded a photo <div class="date"> Time period ago </div> </div> <div class="meta"> <a>Metadata</a> <a>Metadata</a> </div> </div> </div> </div> <div class="ui hidden divider"></div> <div class="ui feed"> <div class="event"> <div class="content"> <div class="summary"> <a>Elliot Fu</a> added <a>Jenny Hess</a> as a friend </div> </div> </div> <div class="event"> <div class="content"> <div class="summary"> <a>Stevie Feliciano</a> added <a>Elliot Fu</a> as a friend </div> </div> </div> <div class="event"> <div class="content"> <div class="summary"> <a>Helen Troy</a> added <a>Christian Rocha</a> as a friend </div> </div> </div> <div class="event"> <div class="content"> <div class="summary"> <a>Christian Rocha</a> signed up for the site. </div> </div> </div> </div> </div> <div class="no example"> <h4 class="ui header"> <a href="/elements/label.html">Label</a> </h4> <div class="ui image label"> <img src="images/wireframe/square-image.png"> email@address.com <i class="delete icon"></i> </div> <a class="ui teal image label"> Some Name <span class="detail">Group</span> </a> <a class="ui label"> <i class="mail icon"></i> Icon </a> <a class="ui tag label">Tag</a>
<div class="ui hidden divider"></div> <div class="ui two item fluid menu"> <a class="item"> Item <div class="floating ui label">2</div> </a> <a class="item"> Item <div class="floating ui teal label">141</div> </a> </div>
<div class="ui hidden divider"></div> <div class="ui left floated tiny image"> <a class="ui left red corner label"> <i class="heart icon"></i> </a> <img src="images/wireframe/square-image.png"> </div> <div class="ui left floated tiny image"> <a class="ui left yellow corner label"> <i class="star icon"></i> </a> <img src="images/wireframe/square-image.png"> </div> <div class="ui left floated tiny image"> <a class="ui right corner label"> <i class="close icon"></i> </a> <img src="images/wireframe/square-image.png"> </div>
<div class="ui hidden clearing divider"></div> <div class="ui segment" style="min-height: 8rem;"> <div class="ui top attached label">Top Labeled</div> <div class="ui bottom attached label">Bottom Labeled</div> </div> <div class="ui segment" style="min-height: 8rem;"> <div class="ui top left attached label">Top Left</div> <div class="ui top right attached label">Top Right</div> <div class="ui bottom left attached label">Bottom Left</div> <div class="ui bottom right attached label">Bottom Right</div> </div> <div style="min-height: 8rem;" class="ui segment"> <a class="ui ribbon label">Ribbon</a> </div> </div> <div class="no example"> <h4 class="ui header"> <a href="/elements/step.html">Step</a> </h4> <div class="ui fluid steps"> <a class="step"> <div class="content"> <div class="title">Step</div> <div class="description">Description</div> </div> </a> <a class="active step"> <div class="content"> <div class="title">Step</div> <div class="description">Description</div> </div> </a> </div> <div class="ui hidden divider"></div> <div class="ui fluid fluid ordered vertical steps"> <a class="step"> <div class="content"> <div class="title">Previous Step</div> <div class="description">Description</div> </div> </a> <a class="active step"> <div class="content"> <div class="title">Active Step</div> <div class="description">Description</div> </div> </a> <a class="disabled step"> <div class="content"> <div class="title">Disabled Step</div> <div class="description">Description</div> </div> </a> </div>
<div class="ui hidden divider"></div>
<div class="ui fluid vertical steps"> <a class="step"> <i class="truck icon"></i> <div class="content"> <div class="title">Previous Step</div> <div class="description">Description</div> </div> </a> <a class="active step"> <i class="payment icon"></i> <div class="content"> <div class="title">Active Step</div> <div class="description">Description</div> </div> </a> <a class="disabled step"> <i class="info icon"></i> <div class="content"> <div class="title">Disabled Step</div> <div class="description">Description</div> </div> </a> </div> </div> <div class="no example"> <h4 class="ui header"> <a href="/views/card.html">Card</a> </h4> <div class="ui card"> <div class="image dimmable"> <div class="ui dimmer transition fade out hidden" style=""> <div class="content"> <div class="center"> <div class="ui inverted button">Add Friend</div> </div> </div> </div> <img src="images/wireframe/image.png"> </div> <div class="content"> <div class="header">Title</div> <div class="meta"> <a class="group">Meta</a> </div> <div class="description">One or two sentence description that may go to several lines</div> </div> <div class="extra content"> <a class="right floated created">Arbitrary</a> <a class="friends"> Arbitrary</a> </div> </div> <div class="ui card"> <div class="content"> <div class="header"> <img class="ui avatar image" src="images/wireframe/square-image.png"> Abbreviated Header </div> <div class="description"> Short Description </div> </div> <div class="ui two bottom attached buttons"> <div class="ui button"> Action 1 </div> <div class="ui button"> Action 2 </div> </div> </div>
<script type="text/javascript"> $(document) .ready(function(){ $('.demo .card .dimmer') .dimmer({ on: 'hover' }) ; }) ; </script>
</div> </div> <div class="column"> <div class="no example"> <h4 class="ui header"> <a href="/modules/dropdown.html">Dropdown</a> </h4> <div class="ui fluid search selection dropdown"> <input type="hidden" name="country"> <i class="dropdown icon"></i> <input class="search" tabindex="0"><div class="default text">Select country</div> <div class="menu" tabindex="-1"> <div class="item" data-value="ad"><i class="ad flag"></i>Andorra</div> <div class="item" data-value="ae"><i class="ae flag"></i>United Arab Emirates</div> <div class="item" data-value="af"><i class="af flag"></i>Afghanistan</div> <div class="item" data-value="ag"><i class="ag flag"></i>Antigua</div> <div class="item" data-value="ai"><i class="ai flag"></i>Anguilla</div> <div class="item" data-value="al"><i class="al flag"></i>Albania</div> <div class="item" data-value="am"><i class="am flag"></i>Armenia</div> <div class="item" data-value="an"><i class="an flag"></i>Netherlands Antilles</div> <div class="item" data-value="ao"><i class="ao flag"></i>Angola</div> <div class="item" data-value="ar"><i class="ar flag"></i>Argentina</div> <div class="item" data-value="as"><i class="as flag"></i>American Samoa</div> <div class="item" data-value="at"><i class="at flag"></i>Austria</div> <div class="item" data-value="au"><i class="au flag"></i>Australia</div> <div class="item" data-value="aw"><i class="aw flag"></i>Aruba</div> <div class="item" data-value="ax"><i class="ax flag"></i>Aland Islands</div> <div class="item" data-value="az"><i class="az flag"></i>Azerbaijan</div> <div class="item" data-value="ba"><i class="ba flag"></i>Bosnia</div> <div class="item" data-value="bb"><i class="bb flag"></i>Barbados</div> <div class="item" data-value="bd"><i class="bd flag"></i>Bangladesh</div> <div class="item" data-value="be"><i class="be flag"></i>Belgium</div> <div class="item" data-value="bf"><i class="bf flag"></i>Burkina Faso</div> <div class="item" data-value="bg"><i class="bg flag"></i>Bulgaria</div> <div class="item" data-value="bh"><i class="bh flag"></i>Bahrain</div> <div class="item" data-value="bi"><i class="bi flag"></i>Burundi</div> <div class="item" data-value="bj"><i class="bj flag"></i>Benin</div> <div class="item" data-value="bm"><i class="bm flag"></i>Bermuda</div> <div class="item" data-value="bn"><i class="bn flag"></i>Brunei</div> <div class="item" data-value="bo"><i class="bo flag"></i>Bolivia</div> <div class="item" data-value="br"><i class="br flag"></i>Brazil</div> <div class="item" data-value="bs"><i class="bs flag"></i>Bahamas</div> <div class="item" data-value="bt"><i class="bt flag"></i>Bhutan</div> <div class="item" data-value="bv"><i class="bv flag"></i>Bouvet Island</div> <div class="item" data-value="bw"><i class="bw flag"></i>Botswana</div> <div class="item" data-value="by"><i class="by flag"></i>Belarus</div> <div class="item" data-value="bz"><i class="bz flag"></i>Belize</div> <div class="item" data-value="ca"><i class="ca flag"></i>Canada</div> <div class="item" data-value="cc"><i class="cc flag"></i>Cocos Islands</div> <div class="item" data-value="cd"><i class="cd flag"></i>Congo</div> <div class="item" data-value="cf"><i class="cf flag"></i>Central African Republic</div> <div class="item" data-value="cg"><i class="cg flag"></i>Congo Brazzaville</div> <div class="item" data-value="ch"><i class="ch flag"></i>Switzerland</div> <div class="item" data-value="ci"><i class="ci flag"></i>Cote Divoire</div> <div class="item" data-value="ck"><i class="ck flag"></i>Cook Islands</div> <div class="item" data-value="cl"><i class="cl flag"></i>Chile</div> <div class="item" data-value="cm"><i class="cm flag"></i>Cameroon</div> <div class="item" data-value="cn"><i class="cn flag"></i>China</div> <div class="item" data-value="co"><i class="co flag"></i>Colombia</div> <div class="item" data-value="cr"><i class="cr flag"></i>Costa Rica</div> <div class="item" data-value="cs"><i class="cs flag"></i>Serbia</div> <div class="item" data-value="cu"><i class="cu flag"></i>Cuba</div> <div class="item" data-value="cv"><i class="cv flag"></i>Cape Verde</div> <div class="item" data-value="cx"><i class="cx flag"></i>Christmas Island</div> <div class="item" data-value="cy"><i class="cy flag"></i>Cyprus</div> <div class="item" data-value="cz"><i class="cz flag"></i>Czech Republic</div> <div class="item" data-value="de"><i class="de flag"></i>Germany</div> <div class="item" data-value="dj"><i class="dj flag"></i>Djibouti</div> <div class="item" data-value="dk"><i class="dk flag"></i>Denmark</div> <div class="item" data-value="dm"><i class="dm flag"></i>Dominica</div> <div class="item" data-value="do"><i class="do flag"></i>Dominican Republic</div> <div class="item" data-value="dz"><i class="dz flag"></i>Algeria</div> <div class="item" data-value="ec"><i class="ec flag"></i>Ecuador</div> <div class="item" data-value="ee"><i class="ee flag"></i>Estonia</div> <div class="item" data-value="eg"><i class="eg flag"></i>Egypt</div> <div class="item" data-value="eh"><i class="eh flag"></i>Western Sahara</div> <div class="item" data-value="er"><i class="er flag"></i>Eritrea</div> <div class="item" data-value="es"><i class="es flag"></i>Spain</div> <div class="item" data-value="et"><i class="et flag"></i>Ethiopia</div> <div class="item" data-value="eu"><i class="eu flag"></i>European Union</div> <div class="item" data-value="fi"><i class="fi flag"></i>Finland</div> <div class="item" data-value="fj"><i class="fj flag"></i>Fiji</div> <div class="item" data-value="fk"><i class="fk flag"></i>Falkland Islands</div> <div class="item" data-value="fm"><i class="fm flag"></i>Micronesia</div> <div class="item" data-value="fo"><i class="fo flag"></i>Faroe Islands</div> <div class="item" data-value="fr"><i class="fr flag"></i>France</div> <div class="item" data-value="ga"><i class="ga flag"></i>Gabon</div> <div class="item" data-value="gb"><i class="gb flag"></i>England</div> <div class="item" data-value="gd"><i class="gd flag"></i>Grenada</div> <div class="item" data-value="ge"><i class="ge flag"></i>Georgia</div> <div class="item" data-value="gf"><i class="gf flag"></i>French Guiana</div> <div class="item" data-value="gh"><i class="gh flag"></i>Ghana</div> <div class="item" data-value="gi"><i class="gi flag"></i>Gibraltar</div> <div class="item" data-value="gl"><i class="gl flag"></i>Greenland</div> <div class="item" data-value="gm"><i class="gm flag"></i>Gambia</div> <div class="item" data-value="gn"><i class="gn flag"></i>Guinea</div> <div class="item" data-value="gp"><i class="gp flag"></i>Guadeloupe</div> <div class="item" data-value="gq"><i class="gq flag"></i>Equatorial Guinea</div> <div class="item" data-value="gr"><i class="gr flag"></i>Greece</div> <div class="item" data-value="gs"><i class="gs flag"></i>Sandwich Islands</div> <div class="item" data-value="gt"><i class="gt flag"></i>Guatemala</div> <div class="item" data-value="gu"><i class="gu flag"></i>Guam</div> <div class="item" data-value="gw"><i class="gw flag"></i>Guinea-Bissau</div> <div class="item" data-value="gy"><i class="gy flag"></i>Guyana</div> <div class="item" data-value="hk"><i class="hk flag"></i>Hong Kong</div> <div class="item" data-value="hm"><i class="hm flag"></i>Heard Island</div> <div class="item" data-value="hn"><i class="hn flag"></i>Honduras</div> <div class="item" data-value="hr"><i class="hr flag"></i>Croatia</div> <div class="item" data-value="ht"><i class="ht flag"></i>Haiti</div> <div class="item" data-value="hu"><i class="hu flag"></i>Hungary</div> <div class="item" data-value="id"><i class="id flag"></i>Indonesia</div> <div class="item" data-value="ie"><i class="ie flag"></i>Ireland</div> <div class="item" data-value="il"><i class="il flag"></i>Israel</div> <div class="item" data-value="in"><i class="in flag"></i>India</div> <div class="item" data-value="io"><i class="io flag"></i>Indian Ocean Territory</div> <div class="item" data-value="iq"><i class="iq flag"></i>Iraq</div> <div class="item" data-value="ir"><i class="ir flag"></i>Iran</div> <div class="item" data-value="is"><i class="is flag"></i>Iceland</div> <div class="item" data-value="it"><i class="it flag"></i>Italy</div> <div class="item" data-value="jm"><i class="jm flag"></i>Jamaica</div> <div class="item" data-value="jo"><i class="jo flag"></i>Jordan</div> <div class="item" data-value="jp"><i class="jp flag"></i>Japan</div> <div class="item" data-value="ke"><i class="ke flag"></i>Kenya</div> <div class="item" data-value="kg"><i class="kg flag"></i>Kyrgyzstan</div> <div class="item" data-value="kh"><i class="kh flag"></i>Cambodia</div> <div class="item" data-value="ki"><i class="ki flag"></i>Kiribati</div> <div class="item" data-value="km"><i class="km flag"></i>Comoros</div> <div class="item" data-value="kn"><i class="kn flag"></i>Saint Kitts and Nevis</div> <div class="item" data-value="kp"><i class="kp flag"></i>North Korea</div> <div class="item" data-value="kr"><i class="kr flag"></i>South Korea</div> <div class="item" data-value="kw"><i class="kw flag"></i>Kuwait</div> <div class="item" data-value="ky"><i class="ky flag"></i>Cayman Islands</div> <div class="item" data-value="kz"><i class="kz flag"></i>Kazakhstan</div> <div class="item" data-value="la"><i class="la flag"></i>Laos</div> <div class="item" data-value="lb"><i class="lb flag"></i>Lebanon</div> <div class="item" data-value="lc"><i class="lc flag"></i>Saint Lucia</div> <div class="item" data-value="li"><i class="li flag"></i>Liechtenstein</div> <div class="item" data-value="lk"><i class="lk flag"></i>Sri Lanka</div> <div class="item" data-value="lr"><i class="lr flag"></i>Liberia</div> <div class="item" data-value="ls"><i class="ls flag"></i>Lesotho</div> <div class="item" data-value="lt"><i class="lt flag"></i>Lithuania</div> <div class="item" data-value="lu"><i class="lu flag"></i>Luxembourg</div> <div class="item" data-value="lv"><i class="lv flag"></i>Latvia</div> <div class="item" data-value="ly"><i class="ly flag"></i>Libya</div> <div class="item" data-value="ma"><i class="ma flag"></i>Morocco</div> <div class="item" data-value="mc"><i class="mc flag"></i>Monaco</div> <div class="item" data-value="md"><i class="md flag"></i>Moldova</div> <div class="item" data-value="me"><i class="me flag"></i>Montenegro</div> <div class="item" data-value="mg"><i class="mg flag"></i>Madagascar</div> <div class="item" data-value="mh"><i class="mh flag"></i>Marshall Islands</div> <div class="item" data-value="mk"><i class="mk flag"></i>MacEdonia</div> <div class="item" data-value="ml"><i class="ml flag"></i>Mali</div> <div class="item" data-value="ar"><i class="ar flag"></i>Burma</div> <div class="item" data-value="mn"><i class="mn flag"></i>Mongolia</div> <div class="item" data-value="mo"><i class="mo flag"></i>MacAu</div> <div class="item" data-value="mp"><i class="mp flag"></i>Northern Mariana Islands</div> <div class="item" data-value="mq"><i class="mq flag"></i>Martinique</div> <div class="item" data-value="mr"><i class="mr flag"></i>Mauritania</div> <div class="item" data-value="ms"><i class="ms flag"></i>Montserrat</div> <div class="item" data-value="mt"><i class="mt flag"></i>Malta</div> <div class="item" data-value="mu"><i class="mu flag"></i>Mauritius</div> <div class="item" data-value="mv"><i class="mv flag"></i>Maldives</div> <div class="item" data-value="mw"><i class="mw flag"></i>Malawi</div> <div class="item" data-value="mx"><i class="mx flag"></i>Mexico</div> <div class="item" data-value="my"><i class="my flag"></i>Malaysia</div> <div class="item" data-value="mz"><i class="mz flag"></i>Mozambique</div> <div class="item" data-value="na"><i class="na flag"></i>Namibia</div> <div class="item" data-value="nc"><i class="nc flag"></i>New Caledonia</div> <div class="item" data-value="ne"><i class="ne flag"></i>Niger</div> <div class="item" data-value="nf"><i class="nf flag"></i>Norfolk Island</div> <div class="item" data-value="ng"><i class="ng flag"></i>Nigeria</div> <div class="item" data-value="ni"><i class="ni flag"></i>Nicaragua</div> <div class="item" data-value="nl"><i class="nl flag"></i>Netherlands</div> <div class="item" data-value="no"><i class="no flag"></i>Norway</div> <div class="item" data-value="np"><i class="np flag"></i>Nepal</div> <div class="item" data-value="nr"><i class="nr flag"></i>Nauru</div> <div class="item" data-value="nu"><i class="nu flag"></i>Niue</div> <div class="item" data-value="nz"><i class="nz flag"></i>New Zealand</div> <div class="item" data-value="om"><i class="om flag"></i>Oman</div> <div class="item" data-value="pa"><i class="pa flag"></i>Panama</div> <div class="item" data-value="pe"><i class="pe flag"></i>Peru</div> <div class="item" data-value="pf"><i class="pf flag"></i>French Polynesia</div> <div class="item" data-value="pg"><i class="pg flag"></i>New Guinea</div> <div class="item" data-value="ph"><i class="ph flag"></i>Philippines</div> <div class="item" data-value="pk"><i class="pk flag"></i>Pakistan</div> <div class="item" data-value="pl"><i class="pl flag"></i>Poland</div> <div class="item" data-value="pm"><i class="pm flag"></i>Saint Pierre</div> <div class="item" data-value="pn"><i class="pn flag"></i>Pitcairn Islands</div> <div class="item" data-value="pr"><i class="pr flag"></i>Puerto Rico</div> <div class="item" data-value="ps"><i class="ps flag"></i>Palestine</div> <div class="item" data-value="pt"><i class="pt flag"></i>Portugal</div> <div class="item" data-value="pw"><i class="pw flag"></i>Palau</div> <div class="item" data-value="py"><i class="py flag"></i>Paraguay</div> <div class="item" data-value="qa"><i class="qa flag"></i>Qatar</div> <div class="item" data-value="re"><i class="re flag"></i>Reunion</div> <div class="item" data-value="ro"><i class="ro flag"></i>Romania</div> <div class="item" data-value="rs"><i class="rs flag"></i>Serbia</div> <div class="item" data-value="ru"><i class="ru flag"></i>Russia</div> <div class="item" data-value="rw"><i class="rw flag"></i>Rwanda</div> <div class="item" data-value="sa"><i class="sa flag"></i>Saudi Arabia</div> <div class="item" data-value="sb"><i class="sb flag"></i>Solomon Islands</div> <div class="item" data-value="sc"><i class="sc flag"></i>Seychelles</div> <div class="item" data-value="sd"><i class="sd flag"></i>Sudan</div> <div class="item" data-value="se"><i class="se flag"></i>Sweden</div> <div class="item" data-value="sg"><i class="sg flag"></i>Singapore</div> <div class="item" data-value="sh"><i class="sh flag"></i>Saint Helena</div> <div class="item" data-value="si"><i class="si flag"></i>Slovenia</div> <div class="item" data-value="sj"><i class="sj flag"></i>Svalbard, I Flag Jan Mayen</div> <div class="item" data-value="sk"><i class="sk flag"></i>Slovakia</div> <div class="item" data-value="sl"><i class="sl flag"></i>Sierra Leone</div> <div class="item" data-value="sm"><i class="sm flag"></i>San Marino</div> <div class="item" data-value="sn"><i class="sn flag"></i>Senegal</div> <div class="item" data-value="so"><i class="so flag"></i>Somalia</div> <div class="item" data-value="sr"><i class="sr flag"></i>Suriname</div> <div class="item" data-value="st"><i class="st flag"></i>Sao Tome</div> <div class="item" data-value="sv"><i class="sv flag"></i>El Salvador</div> <div class="item" data-value="sy"><i class="sy flag"></i>Syria</div> <div class="item" data-value="sz"><i class="sz flag"></i>Swaziland</div> <div class="item" data-value="tc"><i class="tc flag"></i>Caicos Islands</div> <div class="item" data-value="td"><i class="td flag"></i>Chad</div> <div class="item" data-value="tf"><i class="tf flag"></i>French Territories</div> <div class="item" data-value="tg"><i class="tg flag"></i>Togo</div> <div class="item" data-value="th"><i class="th flag"></i>Thailand</div> <div class="item" data-value="tj"><i class="tj flag"></i>Tajikistan</div> <div class="item" data-value="tk"><i class="tk flag"></i>Tokelau</div> <div class="item" data-value="tl"><i class="tl flag"></i>Timorleste</div> <div class="item" data-value="tm"><i class="tm flag"></i>Turkmenistan</div> <div class="item" data-value="tn"><i class="tn flag"></i>Tunisia</div> <div class="item" data-value="to"><i class="to flag"></i>Tonga</div> <div class="item" data-value="tr"><i class="tr flag"></i>Turkey</div> <div class="item" data-value="tt"><i class="tt flag"></i>Trinidad</div> <div class="item" data-value="tv"><i class="tv flag"></i>Tuvalu</div> <div class="item" data-value="tw"><i class="tw flag"></i>Taiwan</div> <div class="item" data-value="tz"><i class="tz flag"></i>Tanzania</div> <div class="item" data-value="ua"><i class="ua flag"></i>Ukraine</div> <div class="item" data-value="ug"><i class="ug flag"></i>Uganda</div> <div class="item" data-value="um"><i class="um flag"></i>Us Minor Islands</div> <div class="item" data-value="us"><i class="us flag"></i>United States</div> <div class="item" data-value="uy"><i class="uy flag"></i>Uruguay</div> <div class="item" data-value="uz"><i class="uz flag"></i>Uzbekistan</div> <div class="item" data-value="va"><i class="va flag"></i>Vatican City</div> <div class="item" data-value="vc"><i class="vc flag"></i>Saint Vincent</div> <div class="item" data-value="ve"><i class="ve flag"></i>Venezuela</div> <div class="item" data-value="vg"><i class="vg flag"></i>British Virgin Islands</div> <div class="item" data-value="vi"><i class="vi flag"></i>Us Virgin Islands</div> <div class="item" data-value="vn"><i class="vn flag"></i>Vietnam</div> <div class="item" data-value="vu"><i class="vu flag"></i>Vanuatu</div> <div class="item" data-value="wf"><i class="wf flag"></i>Wallis and Futuna</div> <div class="item" data-value="ws"><i class="ws flag"></i>Samoa</div> <div class="item" data-value="ye"><i class="ye flag"></i>Yemen</div> <div class="item" data-value="yt"><i class="yt flag"></i>Mayotte</div> <div class="item" data-value="za"><i class="za flag"></i>South Africa</div> <div class="item" data-value="zm"><i class="zm flag"></i>Zambia</div> <div class="item" data-value="zw"><i class="zw flag"></i>Zimbabwe</div> </div> </div>
<div class="ui divider"></div> <div class="ui searchable floating dropdown labeled icon button" tabindex="0"> <i class="filter icon"></i> <span class="text">Filter Posts</span> <div class="menu" tabindex="-1"> <div class="header"> Filter </div> <div class="item"> <div class="ui red empty circular label"></div> Tag A </div> <div class="item"> <div class="ui blue empty circular label"></div> Tag B </div> <div class="item"> <div class="ui black empty circular label"></div> Tag C </div> <div class="item"> <div class="ui green empty circular label"></div> Tag D </div> </div> </div> <script type="text/javascript"> $(document) .ready(function(){ $('.demo .ui.dropdown') .dropdown() ; }) ; </script> </div> <div class="no example"> <h4 class="ui header"> <a href="/elements/progress.html">Progress</a> </h4> <div class="ui basic demo progress active"> <div class="bar" style="width: 86%;"> <div class="progress"></div> </div> <div class="label">86% Complete</div> </div>
<div class="ui indicating demo progress success"> <div class="bar" style="width: 100%;"></div> <div class="label">Completed!</div> </div>
<div data-total="20" data-value="6" class="ui teal file demo progress success"> <div class="bar" style="width: 100%;"> <div class="progress"></div> </div> <div class="label">20 Files Uploaded!</div> </div>
<div class="ui top attached indicating demo progress success"> <div class="bar" style="width: 100%;"></div> </div> <div class="ui attached segment"> </div> <div class="ui bottom attached demo progress active"> <div class="bar" style="width: 80%;"></div> </div>
<script type="text/javascript"> $(document) .ready(function() { $('.attached.progress') .progress({ label : false, value : Math.floor(Math.random() * 5) + 1 }) ; $('.basic.progress') .progress({ label : false, value : Math.floor(Math.random() * 5) + 1, text : { active : '{percent}% Complete', success : 'Done!' } }) ; $('.indicating.progress') .progress({ label : true, total : 10, value : Math.floor(Math.random() * 5) + 1, text : { active : '{percent}% Done', success : 'Completed!' } }) ; $('.file.progress') .progress({ label: false, text: { active : 'Uploading {value} of {total}', success : '{total} Files Uploaded!' } }) ; var progress = function() { $('.demo.progress').progress('increment'); setTimeout(progress, (Math.random() * 2000) + 300); }; setTimeout(progress, 1000);
setInterval(function() { $('.demo.progress').progress('reset'); }, 30000);
}) ; </script> </div> <div class="no example"> <h4 class="ui header"> <a href="/elements/segment.html">Segment</a> </h4> <div class="ui piled segment"></div> <div class="ui stacked segment"></div> <div class="ui raised segment"></div> <div class="ui secondary segment"></div> <div class="ui tertiary segment"></div> <div class="ui compact stacked segment"></div> <div class="ui top attached segment"></div> <div class="ui attached segment"></div> <div class="ui bottom attached segment"></div> </div> <div class="no example"> <h4 class="ui header"> <a href="/elements/input.html">Input</a> </h4> <div class="ui action left icon input"> <i class="search icon"></i> <input type="text" placeholder="Search..."> <div class="ui teal button">Search</div> </div>
<div class="ui hidden divider"></div> <div class="ui corner labeled input"> <input type="text" placeholder="Required Field"> <div class="ui corner label"> <i class="asterisk icon"></i> </div> </div>
<div class="ui hidden divider"></div> <div class="ui labeled right icon input"> <div class="ui label"> http:// </div> <input type="text" placeholder="domain.com"> <i class="add circle link icon"></i> </div>
<div class="ui hidden divider"></div> <div class="ui labeled input"> <a class="ui label"> Label </a> <input type="text" placeholder="Placeholder..."> </div> <div class="ui hidden divider"></div> <div class="ui right labeled input"> <input type="text" placeholder="Placeholder..."> <a class="ui label"> Label </a> </div> </div> <div class="no example"> <h4 class="ui header"> <a href="/modules/checkbox.html">Checkbox</a> </h4> <div class="ui checkbox"> <input type="checkbox" name="fun" checked="checked"> <label>Checkbox</label> </div>
<div class="ui hidden divider"></div> <div class="ui form"> <div class="inline fields"> <div class="field"> <div class="ui radio checkbox checked"> <input type="radio" checked="checked" name="fruit"> <label>A</label> </div> </div> <div class="field"> <div class="ui radio checkbox"> <input type="radio" name="fruit"> <label>B</label> </div> </div> <div class="field"> <div class="ui radio checkbox"> <input type="radio" name="fruit"> <label>C</label> </div> </div> <div class="field"> <div class="ui radio checkbox"> <input type="radio" name="fruit"> <label>D</label> </div> </div> </div> </div>
<div class="ui hidden divider"></div> <div class="ui slider checkbox"> <input type="checkbox" name="newsletter"> <label>Slider</label> </div>
<div class="ui hidden divider"></div> <div class="ui toggle checkbox"> <input type="checkbox" name="public"> <label>Toggle</label> </div>
<script type="text/javascript"> $(document) .ready(function(){ $('.demo .ui.checkbox') .checkbox() ; }) ; </script> </div> </div> </div> </div></body>
</html>
|
