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>
<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"> <title>Theming - Semantic</title>
<!--- Site CSS --> <link rel="stylesheet" type="text/css" href="../../dist/components/reset.css"> <link rel="stylesheet" type="text/css" href="../../dist/components/site.css"> <link rel="stylesheet" type="text/css" href="../../dist/components/grid.css">
<!--- Component CSS --> <link rel="stylesheet" type="text/css" href="../../dist/components/dropdown.css"> <link rel="stylesheet" type="text/css" href="../../dist/components/icon.css"> <link rel="stylesheet" type="text/css" href="../../dist/components/card.css"> <link rel="stylesheet" type="text/css" href="../../dist/components/image.css"> <link rel="stylesheet" type="text/css" href="../../dist/components/button.css"> <link rel="stylesheet" type="text/css" href="../../dist/components/segment.css"> <link rel="stylesheet" type="text/css" href="../../dist/components/divider.css"> <link rel="stylesheet" type="text/css" href="../../dist/components/transition.css">
<!--- Example Libs --> <link rel="stylesheet" type="text/css" href="../../dist/components/popup.css"> <script src="../assets/library/jquery.min.js"></script> <script src="../assets/library/iframe-content.js"></script> <script src="../assets/show-examples.js"></script> <script type="text/javascript" src="../../dist/components/popup.js"></script>
<!--- Component JS --> <script type="text/javascript" src="../../dist/components/transition.js"></script> <script type="text/javascript" src="../../dist/components/dropdown.js"></script>
<!--- Example CSS --> <style> body { padding: 1em; } .spaced > .button { margin-bottom: 1em; } </style>
<!--- Example Javascript --> <script> $(document) .ready(function() { $('.ui.dropdown').dropdown();
$('.ui.buttons .dropdown.button').dropdown({ action: 'combo' }); }) ; </script></head>
<body>
<div class="ui stackable equal width grid"> <div class="column"> <button class="ui button">Default</button> <button class="ui primary button">Primary</button> <button class="ui secondary button">Secondary</button> <button class="ui basic button">Basic</button> <button class="ui compact button"> Compact </button>
<div class="ui divider"></div> <button class="ui icon button"> <i class="heart icon"></i> </button> <button class="ui labeled icon button"> <i class="heart icon"></i> Labeled </button> <button class="ui right labeled icon button"> <i class="heart icon"></i> Labeled </button>
<div class="ui divider"></div>
<div class="ui buttons"> <button class="ui button">Combo</button> <div class="ui floating dropdown icon button"> <i class="dropdown icon"></i> <div class="menu"> <div class="item">Choice 1</div> <div class="item">Choice 2</div> <div class="item">Choice 3</div> </div> </div> </div>
<div class="ui floating search dropdown button"> <span class="text">Search Dropdown</span> <div class="menu"> <div class="item">Arabic</div> <div class="item">Chinese</div> <div class="item">Danish</div> <div class="item">Dutch</div> <div class="item">English</div> <div class="item">French</div> <div class="item">German</div> <div class="item">Greek</div> <div class="item">Hungarian</div> <div class="item">Italian</div> <div class="item">Japanese</div> <div class="item">Korean</div> <div class="item">Lithuanian</div> <div class="item">Persian</div> <div class="item">Polish</div> <div class="item">Portuguese</div> <div class="item">Russian</div> <div class="item">Spanish</div> <div class="item">Swedish</div> <div class="item">Turkish</div> <div class="item">Vietnamese</div> </div> </div>
<div class="ui divider"></div>
<div class="ui animated button" tabindex="0"> <div class="visible content">Horizontal</div> <div class="hidden content"> Hidden </div> </div> <div class="ui vertical animated button" tabindex="0"> <div class="visible content">Vertical</div> <div class="hidden content"> Hidden </div> </div> <div class="ui animated fade button" tabindex="0"> <div class="visible content">Fade In</div> <div class="hidden content"> Hidden </div> </div>
<div class="ui divider"></div> <button class="ui disabled button">Disabled</button> <button class="ui loading button">Loading</button>
<div class="ui divider"></div>
<div class="ui buttons"> <button class="ui button">1</button> <button class="ui button">2</button> <button class="ui button">3</button> </div>
<div class="ui icon buttons"> <button class="ui button"><i class="align left icon"></i></button> <button class="ui button"><i class="align center icon"></i></button> <button class="ui button"><i class="align right icon"></i></button> <button class="ui button"><i class="align justify icon"></i></button> </div>
<div class="ui buttons"> <button class="ui button">1</button> <div class="or"></div> <button class="ui button">2</button> </div>
<div class="ui divider"></div>
<div class="ui two top attached buttons"> <div class="ui button">One</div> <div class="ui button">Two</div> </div> <div class="ui attached segment"> <img src="../assets/images/wireframe/paragraph.png" class="ui wireframe image"> </div> <div class="ui two bottom attached buttons"> <div class="ui button">One</div> <div class="ui button">Two</div> </div>
</div> <div class="column"> <button class="ui mini button">Mini</button> <button class="ui tiny button">Tiny</button> <button class="ui small button">Small</button> <button class="ui large button">Large</button> <button class="ui big button">Big</button> <button class="ui huge button">Huge</button> <button class="ui massive button">Massive</button> <div class="ui divider"></div> <div class="spaced"> <button class="yellow ui button">Yellow</button> <button class="orange ui button">Orange</button> <button class="green ui button">Green</button> <button class="teal ui button">Teal</button> <button class="blue ui button">Blue</button> <button class="purple ui button">Purple</button> <button class="pink ui button">Pink</button> <button class="red ui button">Red</button> <button class="black ui button">Black</button> </div>
<div class="ui divider"></div>
<div class="ui inverted segment"> <button class="ui inverted button">Inverted</button> <button class="ui inverted basic button">Basic</button> <button class="ui inverted blue button">Colored</button> <button class="ui inverted blue basic button">Basic Colored</button> </div>
</div></div>
</body></html>
|
