|
|
<!DOCTYPE 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" />
<!-- Site Properities --> <meta http-equiv="X-Powered-By" content="DocPad v6.32.0"/> <title>Label | Semantic UI</title>
<meta name="description" content="Semantic empowers designers and developers by creating a shared vocabulary for UI." /> <meta name="keywords" content="html5, ui, library, framework, javascript" />
<link rel="stylesheet" type="text/css" href="/stylesheets/reset.css">
<link rel="stylesheet" type="text/css" class="ui" href="/ui/flat/elements/icons.css"> <link rel="stylesheet" type="text/css" class="ui" href="/ui/flat/elements/button.css"> <link rel="stylesheet" type="text/css" class="ui" href="/ui/flat/elements/header.css"> <link rel="stylesheet" type="text/css" class="ui" href="/ui/flat/elements/label.css"> <link rel="stylesheet" type="text/css" class="ui" href="/ui/flat/elements/divider.css"> <link rel="stylesheet" type="text/css" class="ui" href="/ui/flat/elements/block.css"> <link rel="stylesheet" type="text/css" class="ui" href="/ui/flat/elements/segment.css"> <link rel="stylesheet" type="text/css" class="ui" href="/ui/flat/collections/grid.css"> <link rel="stylesheet" type="text/css" class="ui" href="/ui/flat/collections/table.css"> <link rel="stylesheet" type="text/css" class="ui" href="/ui/flat/collections/form.css"> <link rel="stylesheet" type="text/css" class="ui" href="/ui/flat/collections/menu.css"> <link rel="stylesheet" type="text/css" class="ui" href="/ui/flat/modules/shape.css"> <link rel="stylesheet" type="text/css" class="ui" href="/ui/flat/modules/checkbox.css">
<link rel="stylesheet" type="text/css" href="/stylesheets/library/sidr.css"> <link rel="stylesheet" type="text/css" href="/stylesheets/semantic.css"> <link rel="stylesheet" type="text/css" href="/stylesheets/shape.css">
<script src="/javascript/library/jquery.js"></script> <script src="/javascript/library/ace/ace.js"></script> <script src="/javascript/library/sidr.js"></script> <script src="/javascript/library/waypoints.js"></script>
<script src="/ui/flat/modules/behavior/state.js"></script> <script src="/ui/flat/modules/shape.js"></script> <script src="/ui/flat/modules/checkbox.js"></script>
<script src="/javascript/semantic.js"></script> <script src="/javascript/shape.js"></script>
</head><body id="example"> <div class="ui large vertical menu" id="menu"> <div class="header item">Table of Contents</div> <div class="item"><a href="/index.html"><b>Introduction</b></a></div> <div class="item"><a href="/download.html"><b>Download</b></a></div> <div class="item"> <a href="/element.html"><b>UI Elements</b></a> <div class="menu"> <a class="item" href="/elements/button.html">Button</a> <a class="active item" href="/elements/label.html">Label</a> </div> </div> <div class="item"> <a href="/collection.html"><b>UI Collections</b></a> <div class="menu"> <a class="item" href="/collections/form.html">Form</a> <a class="item" href="/collections/grid.html">Grid</a> <a class="item" href="/collections/menu.html">Menu</a> <a class="item" href="/collections/table.html">Table</a> <a class="item" href="/collections/block.html">Text Block</a> </div> </div> <div class="item"> <a href="/module.html"><b>UI Modules</b></a> <div class="menu"> <a class="item" href="/modules/shape.html">Shape</a> </div> </div> </div>
<div class="ui fixed transparent contrasting main menu"> <div class="container"> <div class="title item"> <b>UI Element:</b> Label </div> <div class="icon previous link item"> <a href="/elements/button.html"><i class="icon left-open"></i></a> </div> <div class="section dropdown item"> 2 of 2 <div class="menu"> <div class="item"> <a href="/elements/button.html">1. Button</a> </div> <div class="active item"> <a href="/elements/label.html">2. Label</a> </div> </div> </div> <div class="icon next disabled link item"> <i class="icon right-open"></i> </div> <div class="right menu"> <a class="item" href="https://github.com/quirkyinc/semantic"> <i class="icon github"></i> </a> <div class="dropdown item"> <i class="icon tint"></i> Theme <div class="theme menu"> <div class="active item" data-theme="flat">Flat</div> <div class="item" data-theme="shaded">Shaded</div> <div class="item" data-theme="classic">Classic</div> </div> </div> </div> </div> </div> <div class="ui huge left attached vertical side buttons"> <div class="ui large blue sidebar button"><i class="icon th-list"></i> Menu</div> </div> <div class="segment"> <div class="container"> <h1>Label</h1> <p>Labels can be used to give descriptions to sections of content. They can be formatted like tags, used to mark separate sections of a group of content.</p> </div></div><div class="main container"> <div class="peek"> <div class="ui vertical pointing link menu"> <div class="active item">Standard</div> <div class="item">States</div> <div class="item">Variations</div> <div class="item">Groups</div> </div> </div> <h2>Standard</h2> <div class="example"> <h4>Label</h4> <p>A basic label</p> <div class="ui label"> Fun </div> </div> <div class="example"> <h4>Linkable Label</h4> <p>If an a tag is used, a label will be formatted as a link</p> <a class="ui label"> Fun </a> </div> <div class="example"> <h4>Attached Label</h4> <p>A label attached to a content segment</p> <div class="ui two split grid"> <div class="division"> <div class="ui segment"> <div class="ui attached label">Top Left</div> <div class="ui right attached label">Top Right</div> <div class="ui bottom attached label">Bottom Left</div> <div class="ui bottom right attached label">Bottom Right</div> <p style="margin:40px 0px;">Hey let's look at labels.</p> </div> </div> <div class="division"> <div class="ui segment"> <div class="ui black attached label">Existing Users</div> <div class="ui fluid form"> <div class="field"> <label>E-mail</label> <input type="text"> </div> <div class="field"> <label>Password</label> <input type="password"> </div> <div class="ui button">Log in</div> </div> </div> </div> </div> </div>
<div class="example"> <h4>Label with detail</h4> <p>A tag can optionally display a detail</p> <div class="ui label"> Fun <div class="detail">New</div> </div> <div class="ui label"> Red <div class="detail">22</div> </div> </div>
<div class="example"> <h4>Removable label</h4> <p>A tag can also be removable</p> <div class="ui label"> Witty <i class="icon close"></i> </div> </div>
<h2>States</h2> <p>Labels only have a single ui state</p> <h2>Variations</h2> <div class="example"> <h4>Colors</h4> <p>A label can have different colors</p> <a class="ui black label"> First </a> <a class="ui green label"> Fun </a> <a class="ui red label"> Happy </a> <a class="ui blue label"> Smart </a> <a class="ui purple label"> Insane </a> <a class="ui teal label"> Exciting </a> </div> <div class="example"> <h4>Floating</h4> <p>A label can float above another element</p> <div class="ui compact menu"> <a class="item"> <i class="icon mail"></i> Messages <div class="floating ui red label">22</div> </a> <a class="item"> <i class="icon users"></i> Friends <div class="floating ui teal label">22</div> </a> </div> </div> <div class="example"> <h4>Pointing</h4> <p>A label can point to content next to it</p> <form class="ui fluid form"> <div class="field"> <input type="text" placeholder="First name"> <div class="ui pointing black label"> First Name </div> </div> <div class="ui simple divider"></div> <div class="field" placeholder="Last Name"> <div class="ui pointing below black label"> Last Name </div> <input type="text"> </div> <div class="ui simple divider"></div> <div class="inline field"> <input type="text" placeholder="Username"> <div class="ui pointing left black label"> Username </div> </div> <div class="ui simple divider"></div> <div class="inline field"> <div class="ui pointing right black label"> Password </div> <input type="password"> </div> </form> </div> <div class="example"> <h4>Tag</h4> <p>A label can look like a tag</p> <a class="ui tag label"> First </a> </div>
<div class="example"> <h4>Size</h4> <p>A label can be small or large</p> <div class="ui small label"> Fun </div> <br><br> <div class="ui large label"> Fun </div> </div> <h2>Groups</h2> <div class="example"> <h4>Label Groups</h4> <p>Groups can share variations together</p> <div class="ui large labels"> <div class="ui label"> Fun </div> <div class="ui label"> Happy </div> <div class="ui label"> Smart </div> <div class="ui label"> Witty </div> </div> <br><br> <div class="ui tag labels"> <a class="ui green label"> Fun <i class="icon close"></i> </a> <a class="ui red label"> Happy <div class="detail">22</div> </a> <a class="ui blue label"> Smart </a> <a class="ui purple label"> Insane </a> <a class="ui teal label"> Exciting </a> </div> </div> </div></body>
</html></body>
</html>
|
