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.

183 lines
6.2 KiB

11 years ago
11 years ago
11 years ago
11 years ago
11 years ago
11 years ago
11 years ago
11 years ago
11 years ago
11 years ago
11 years ago
11 years ago
11 years ago
11 years ago
11 years ago
11 years ago
11 years ago
11 years ago
11 years ago
11 years ago
11 years ago
11 years ago
11 years ago
11 years ago
11 years ago
11 years ago
11 years ago
11 years ago
11 years ago
11 years ago
11 years ago
11 years ago
  1. <!DOCTYPE html>
  2. <head>
  3. <!-- Standard Meta -->
  4. <meta charset="utf-8" />
  5. <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
  6. <meta name="viewport" content="width=device-width" />
  7. <!-- Site Properities -->
  8. <meta http-equiv="X-Powered-By" content="DocPad v6.32.0"/>
  9. <title>UI Collections | Semantic UI</title>
  10. <meta name="description" content="Semantic empowers designers and developers by creating a shared vocabulary for UI." />
  11. <meta name="keywords" content="html5, ui, library, framework, javascript" />
  12. <link rel="stylesheet" type="text/css" href="/stylesheets/reset.css">
  13. <link rel="stylesheet" type="text/css" class="ui" href="/ui/flat/elements/icons.css">
  14. <link rel="stylesheet" type="text/css" class="ui" href="/ui/flat/elements/button.css">
  15. <link rel="stylesheet" type="text/css" class="ui" href="/ui/flat/elements/header.css">
  16. <link rel="stylesheet" type="text/css" class="ui" href="/ui/flat/elements/label.css">
  17. <link rel="stylesheet" type="text/css" class="ui" href="/ui/flat/elements/divider.css">
  18. <link rel="stylesheet" type="text/css" class="ui" href="/ui/flat/elements/block.css">
  19. <link rel="stylesheet" type="text/css" class="ui" href="/ui/flat/elements/segment.css">
  20. <link rel="stylesheet" type="text/css" class="ui" href="/ui/flat/collections/grid.css">
  21. <link rel="stylesheet" type="text/css" class="ui" href="/ui/flat/collections/table.css">
  22. <link rel="stylesheet" type="text/css" class="ui" href="/ui/flat/collections/form.css">
  23. <link rel="stylesheet" type="text/css" class="ui" href="/ui/flat/collections/menu.css">
  24. <link rel="stylesheet" type="text/css" class="ui" href="/ui/flat/modules/shape.css">
  25. <link rel="stylesheet" type="text/css" class="ui" href="/ui/flat/modules/checkbox.css">
  26. <link rel="stylesheet" type="text/css" href="/stylesheets/library/sidr.css">
  27. <link rel="stylesheet" type="text/css" href="/stylesheets/semantic.css">
  28. <link rel="stylesheet" type="text/css" href="/stylesheets/shape.css">
  29. <script src="/javascript/library/jquery.js"></script>
  30. <script src="/javascript/library/ace/ace.js"></script>
  31. <script src="/javascript/library/sidr.js"></script>
  32. <script src="/javascript/library/waypoints.js"></script>
  33. <script src="/ui/flat/modules/behavior/state.js"></script>
  34. <script src="/ui/flat/modules/shape.js"></script>
  35. <script src="/ui/flat/modules/checkbox.js"></script>
  36. <script src="/javascript/semantic.js"></script>
  37. <script src="/javascript/shape.js"></script>
  38. </head>
  39. <body id="example">
  40. <div class="ui large vertical menu" id="menu">
  41. <div class="header item">Table of Contents</div>
  42. <div class="item"><a href="/index.html"><b>Introduction</b></a></div>
  43. <div class="item"><a href="/download.html"><b>Download</b></a></div>
  44. <div class="item">
  45. <a href="/element.html"><b>UI Elements</b></a>
  46. <div class="menu">
  47. <a class="item" href="/elements/button.html">Button</a>
  48. <a class="item" href="/elements/label.html">Label</a>
  49. </div>
  50. </div>
  51. <div class="item">
  52. <a href="/collection.html"><b>UI Collections</b></a>
  53. <div class="menu">
  54. <a class="item" href="/collections/form.html">Form</a>
  55. <a class="item" href="/collections/grid.html">Grid</a>
  56. <a class="item" href="/collections/menu.html">Menu</a>
  57. <a class="item" href="/collections/table.html">Table</a>
  58. <a class="item" href="/collections/block.html">Text Block</a>
  59. </div>
  60. </div>
  61. <div class="item">
  62. <a href="/module.html"><b>UI Modules</b></a>
  63. <div class="menu">
  64. <a class="item" href="/modules/shape.html">Shape</a>
  65. </div>
  66. </div>
  67. </div>
  68. <div class="ui fixed transparent contrasting main menu">
  69. <div class="container">
  70. <div class="title item">
  71. <b>Library:</b> UI Collections
  72. </div>
  73. <div class="icon previous link item">
  74. <a href="/download.html"><i class="icon left-open"></i></a>
  75. </div>
  76. <div class="section dropdown item">
  77. 3 of 5
  78. <div class="menu">
  79. <div class="item">
  80. <a href="/index.html">1. About</a>
  81. </div>
  82. <div class="item">
  83. <a href="/download.html">2. Download</a>
  84. </div>
  85. <div class="active item">
  86. <a href="/collection.html">3. UI Collections</a>
  87. </div>
  88. <div class="item">
  89. <a href="/element.html">4. UI Elements</a>
  90. </div>
  91. <div class="item">
  92. <a href="/module.html">5. UI Modules</a>
  93. </div>
  94. </div>
  95. </div>
  96. <div class="icon next link item">
  97. <a href="/element.html"><i class="icon right-open"></i></a>
  98. </div>
  99. <div class="right menu">
  100. <a class="item" href="https://github.com/quirkyinc/semantic">
  101. <i class="icon github"></i>
  102. </a>
  103. <div class="dropdown item">
  104. <i class="icon tint"></i> Theme
  105. <div class="theme menu">
  106. <div class="active item" data-theme="flat">Flat</div>
  107. <div class="item" data-theme="shaded">Shaded</div>
  108. <div class="item" data-theme="classic">Classic</div>
  109. </div>
  110. </div>
  111. </div>
  112. </div>
  113. </div>
  114. <div class="ui huge left attached vertical side buttons">
  115. <div class="ui large blue sidebar button"><i class="icon th-list"></i> Menu</div>
  116. </div>
  117. <div class="segment">
  118. <div class="container">
  119. <h1>UI Collection</h1>
  120. <p>UI collections are heterogeneous groups of elements with related functions.</p>
  121. </div>
  122. </div>
  123. <div class="main container">
  124. <div class="peek">
  125. <div class="ui vertical pointing link menu">
  126. <div class="active item">Definition</div>
  127. <div class="item">Distinction</div>
  128. </div>
  129. </div>
  130. <h2>Definition</h2>
  131. <p>UI collections are groupings that may or may not contain different types of elements inside. For example, some forms may have dropdown boxes, others may have only input fields.</p>
  132. <h2>Distinction</h2>
  133. </div>
  134. </body>
  135. </html>
  136. </body>
  137. </html>