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.

388 lines
13 KiB

12 years ago
12 years ago
12 years ago
12 years ago
12 years ago
12 years ago
12 years ago
12 years ago
12 years ago
12 years ago
12 years ago
12 years ago
12 years ago
12 years ago
  1. <!DOCTYPE HTML>
  2. <html>
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  5. <title>UI Button - Semantic</title>
  6. <link rel="stylesheet" class="ui" href="../src/ui/flat/panel.css" type="text/css" media="screen" />
  7. <link rel="stylesheet" class="ui" href="../src/ui/flat/button.css" type="text/css" media="screen" />
  8. <link rel="stylesheet" class="ui" href="../src/ui/flat/text.css" type="text/css" media="screen" />
  9. <link rel="stylesheet" class="ui" href="../src/ui/flat/form.css" type="text/css" media="screen" />
  10. <link rel="stylesheet" class="ui" href="../src/ui/flat/icons.css" type="text/css" media="screen" />
  11. <link rel="stylesheet" class="ui" href="../src/ui/flat/table.css" type="text/css" media="screen" />
  12. <link rel="stylesheet" href="../src/ui/flat/menu.css" type="text/css" media="screen" />
  13. <link rel="stylesheet" href="../src/modules/shape.css" type="text/css" media="screen" />
  14. <link rel="stylesheet" href="library/sidr.css" type="text/css" media="screen" />
  15. <link rel="stylesheet" href="stylesheets/example.css" type="text/css" media="screen" />
  16. <script src="library/jquery.js" type="text/javascript"></script>
  17. <script src="library/ace/ace.js" type="text/javascript"></script>
  18. <script src="../src/modules/ui/shape.js" type="text/javascript"></script>
  19. <script src="../src/modules/behavior/state.js" type="text/javascript"></script>
  20. <script src="library/sidr.js" type="text/javascript"></script>
  21. <script src="library/waypoints.js" type="text/javascript"></script>
  22. <script src="javascript/semantic.js" type="text/javascript"></script>
  23. </head>
  24. <body id="example">
  25. <div class="ui large vertical menu" id="menu">
  26. <div class="menu">
  27. <div class="item"><a href="module.html"><b>Introduction</b></a></div>
  28. <div class="item"><a href="download"><b>Download</b></a></div>
  29. <div class="item">
  30. <a href="#"><b>UI Elements</b></a>
  31. <div class="menu">
  32. <div class="active item"><a href="button.html">Button</a></div>
  33. <div class="item"><a href="form.html">Forms</a></div>
  34. <div class="item"><a href="table.html">Table</a></div>
  35. <div class="item"><a href="steps.html">Steps</a></div>
  36. <div class="item"><a href="progress.html">Progress</a></div>
  37. <div class="item"><a href="text.html">Text Block</a></div>
  38. <div class="item"><a href="header.html">Headers</a></div>
  39. <div class="item"><a href="header.html">Segment</a></div>
  40. <div class="item"><a href="column.html">Columns</a></div>
  41. <div class="item"><a href="element.html">Elements (Grid System)</a></div>
  42. <div class="item"><a href="tag.html">Tags</a></div>
  43. <div class="item"><a href="item.html">Items (Lists of Content)</a></div>
  44. <div class="item"><a href="panel.html">Panels (Type of Menu)</a></div>
  45. <div class="item"><a href="icon.html">Icons</a></div>
  46. <div class="item"><a href="divider.html">Dividers</a></div>
  47. </div>
  48. </div>
  49. <div class="item">
  50. <a href="#"><b>UI Views</b></a>
  51. <div class="menu">
  52. <div class="item"><a href="form.html">Forms</a></div>
  53. <div class="item"><a href="activity.html">Activity Feed</a></div>
  54. <div class="item"><a href="list.html">Content List</a></div>
  55. <div class="item"><a href="user-list.html">User List</a></div>
  56. </div>
  57. </div>
  58. <div class="item">
  59. <a href="#"><b>UI Modules</b></a>
  60. <div class="menu">
  61. <div class="item"><a href="accordion.html">Accordion</a></div>
  62. <div class="item"><a href="chatroom.html">Chat Room</a></div>
  63. <div class="item"><a href="modal.html">Modal</a></div>
  64. <div class="item"><a href="nag.html">Nag</a></div>
  65. <div class="item"><a href="popup.html">Popup</a></div>
  66. <div class="item"><a href="search.html">Search</a></div>
  67. <div class="item"><a href="star.html">Star Rating</a></div>
  68. <div class="item"><a href="tab.html">Tabs</a></div>
  69. </div>
  70. </div>
  71. <div class="item">
  72. <a href="#"><b>Behavioral Modules</b></a>
  73. <div class="menu">
  74. <div class="item"><a href="api.html">API</a></div>
  75. <div class="item"><a href="animation.html">Animation</a></div>
  76. <div class="item"><a href="validate.html">Form Validation</a></div>
  77. <div class="item"><a href="placeholder.html">Placeholder Text</a></div>
  78. <div class="item"><a href="shape.html">Shape</a></div>
  79. <div class="item"><a href="state.html">State</a></div>
  80. </div>
  81. </div>
  82. </div>
  83. </div>
  84. <div class="ui fixed transparent black menu">
  85. <div class="container">
  86. <div class="title item">
  87. Semantic UI: Button
  88. </div>
  89. <div class="icon previous disabled item">
  90. <i class="icon left-open"></i>
  91. </div>
  92. <div class="section dropdown item">
  93. 1 of 14
  94. <div class="menu">
  95. <a class="active item">1. Button</a>
  96. <a href="form.html" class="item">2. Form</a>
  97. <a class="item">3. Headers</a>
  98. <a class="item">4. Columns</a>
  99. <a class="item">5. Elements</a>
  100. <a class="item">6. Tags</a>
  101. <a class="item">7. Items</a>
  102. <a class="item">8. Panels</a>
  103. </div>
  104. </div>
  105. <div class="icon next link item">
  106. <a href="form.html"><i class="icon right-open"></i></a>
  107. </div>
  108. <div class="right menu">
  109. <a class="item" href="http://github.com/quirky/quirkyinc/semantic">
  110. <i class="icon cloud"></i>
  111. </a>
  112. <a class="item" href="http://github.com/quirky/quirkyinc/semantic">
  113. <i class="icon github"></i>
  114. </a>
  115. <div class="dropdown item">
  116. <i class="icon tint"></i> Theme
  117. <div class="theme menu">
  118. <div class="active item" data-theme="flat">Flat</div>
  119. <div class="item" data-theme="shaded">Shaded</div>
  120. <div class="item" data-theme="classic">Classic</div>
  121. </div>
  122. </div>
  123. </div>
  124. </div>
  125. </div>
  126. <div class="ui huge left attached vertical side buttons">
  127. <div class="ui blue menu button">Menu</div>
  128. </div>
  129. <div class="segment">
  130. <div class="container">
  131. <h1>Button</h1>
  132. <p>Buttons indicate a possible action a user may take.</p>
  133. <p>Button variations are used to explain relationships between user actions and other elements, or to show emphasis.</p>
  134. </div>
  135. </div>
  136. <div class="main container">
  137. <div class="peek">
  138. <div class="ui large vertical pointing bottom attached panel">
  139. <li class="active">Standard</li>
  140. <li>States</li>
  141. <li>Variations</li>
  142. <li>Group</li>
  143. </div>
  144. </div>
  145. <h2>Standard</h2>
  146. <div class="example">
  147. <h4>Button:</h4>
  148. <p>A standard button</p>
  149. <div class="ui button">Button</div>
  150. </div>
  151. <h2>States</h2>
  152. <div class="example">
  153. <h4>Hover</h4>
  154. <p>Changes when a user moves their cursor over it</p>
  155. <div class="ui hover button">Hovered Button</div>
  156. </div>
  157. <div class="example">
  158. <h4>Down</h4>
  159. <p>Changes when pressed using touch or mouse events</p>
  160. <div class="ui down button">Pressed Button</div>
  161. </div>
  162. <div class="example">
  163. <h4>Active</h4>
  164. <p>Changes to show it is currently the selected user action</p>
  165. <div class="ui active button">Active Button</div>
  166. </div>
  167. <div class="example">
  168. <h4>Disabled</h4>
  169. <p>Changes to show it is currently unable to be interacted with</p>
  170. <div class="ui disabled button">Disabled Button</div>
  171. </div>
  172. <div class="example">
  173. <h4>Loading</h4>
  174. <p>Can show a loading indicator:</p>
  175. <div class="ui loading button">Loading Button</div>
  176. </div>
  177. <div class="example">
  178. <h4>Success</h4>
  179. <p>Can alert to a succesful action:</p>
  180. <div class="ui success button">Successful Button</div>
  181. </div>
  182. <div class="example">
  183. <h4>Error</h4>
  184. <p>Can alert user of an error:</p>
  185. <div class="ui error button">Error</div>
  186. </div>
  187. <div class="example">
  188. <h4>All together:</h4>
  189. <div class="ui button">Normal</div>
  190. <div class="ui button hover">Hover</div>
  191. <div class="ui button down">Down</div>
  192. <div class="ui button loading">Loading</div>
  193. <br><br>
  194. <div class="ui button disabled">Disabled</div>
  195. <div class="ui button active">Active</div>
  196. <div class="ui button active toggle">Toggled</div>
  197. <div class="ui button error">Error</div>
  198. <div class="ui button success">Success</div>
  199. </div>
  200. <h2>Variations</h2>
  201. <div class="example">
  202. <h4>Sizes</h4>
  203. <p>Can have different sizes:</p>
  204. <div class="mini ui button">
  205. Mini
  206. </div>
  207. <div class="tiny ui button">
  208. Tiny
  209. </div>
  210. <div class="small ui button">
  211. Small
  212. </div>
  213. <div class="medium ui button">
  214. Medium
  215. </div>
  216. <div class="large ui button">
  217. Large
  218. </div>
  219. <div class="big ui button">
  220. Big
  221. </div>
  222. <div class="huge ui button">
  223. Huge
  224. </div>
  225. <div class="massive ui button">
  226. Massive
  227. </div>
  228. <div class="gigantic ui button">
  229. Gigantic
  230. </div>
  231. </div>
  232. <div class="example">
  233. <h4>Colors</h4>
  234. <p>Can have different colors:</p>
  235. <div class="blue ui button">Blue Button</div>
  236. <div class="purple ui button">Purple Button</div>
  237. </div>
  238. <h4>Feedback</h4>
  239. <div class="example">
  240. <p>Can be positive or negative:</p>
  241. <div class="positive ui button">Positive Button</div>
  242. <div class="negative ui button">Negative Button</div>
  243. </div>
  244. <div class="example">
  245. <h4>Fluid</h4>
  246. <p>Can fit parent container:</p>
  247. <div class="fluid ui button">Fits container</div>
  248. </div>
  249. <div class="example">
  250. <h4>Bubbly</h4>
  251. <p>Can be bubbly:</p>
  252. <div class="bubbly ui button">More bubbly</div>
  253. </div>
  254. <div class="example">
  255. <h4>Icon</h4>
  256. <p>Can be formatted as an icon toolbar:</p>
  257. <div class="massive icon ui button">
  258. <i class="icon cloud"></i>
  259. </div>
  260. </div>
  261. <div class="example">
  262. <h4>Vertically Attached</h4>
  263. <p>Can be attached to the top or bottom of other content</p>
  264. <div class="ui top attached button">Top</div>
  265. <div style="border-left: 1px solid #DDDDDD;border-right: 1px solid #DDDDDD;background-color:#FFFFFF;height:200px;"></div>
  266. <div class="ui bottom attached button">Bottom</div>
  267. </div>
  268. <div class="example">
  269. <h4>Horizontally Attached</h4>
  270. <p>Can be attached to the left or right of other content</p>
  271. <div class="ui left attached button">Left</div>
  272. <div style="width: 200px; display: inline-block; background-color: rgb(255, 255, 255); vertical-align: middle; height: 34px; margin: 0px -4px; border-bottom: 2px solid rgb(221, 221, 221); border-top: 2px solid rgb(221, 221, 221);"></div>
  273. <div class="ui right attached button">Right</div>
  274. </div>
  275. <div class="example">
  276. <h4>Form Attached</h4>
  277. <p>Can be attached to an input field</p>
  278. <div class="ui form">
  279. <input type="text" class="attached">
  280. <div class="ui attached button">Search</div>
  281. </div>
  282. </div>
  283. <h2>Group</h2>
  284. <div class="example">
  285. <h4>Buttons</h4>
  286. <p>Can exist together as groups</p>
  287. <div class="ui buttons">
  288. <div class="ui button">One</div>
  289. <div class="ui button">Two</div>
  290. <div class="ui button">Three</div>
  291. </div>
  292. </div>
  293. <div class="example">
  294. <h4>Conditionals</h4>
  295. <p>Groups can be separated by conditionals</p>
  296. <div class="ui buttons">
  297. <div class="ui button">Cancel</div>
  298. <div class="or"></div>
  299. <div class="ui positive button">Save</div>
  300. </div>
  301. </div>
  302. <h3>Plural Variations</h3>
  303. <p>Singular variations can be applied to groups to infer all elements share the same quality</p>
  304. <div class="example">
  305. <h4>Icon</h4>
  306. <p>Groups can be formatted as icon toolbars</p>
  307. <div class="ui icon buttons">
  308. <div class="ui button"><i class="icon pause"></i></div>
  309. <div class="ui button"><i class="icon play"></i></div>
  310. <div class="ui button"><i class="icon fast-fw"></i></div>
  311. </div>
  312. </div>
  313. <div class="example">
  314. <h4>Fluid</h4>
  315. <p>Groups can be divided evenly to fit parent</p>
  316. <div class="ui five fluid buttons">
  317. <div class="ui button">One</div>
  318. <div class="ui button">Two</div>
  319. <div class="ui button">Three</div>
  320. <div class="ui button">Four</div>
  321. <div class="ui button">Five</div>
  322. </div>
  323. </div>
  324. <div class="example">
  325. <h4>Colors</h4>
  326. <p>Groups can have a shared color</p>
  327. <div class="blue ui buttons">
  328. <div class="ui button">One</div>
  329. <div class="ui button">Two</div>
  330. <div class="ui button">Three</div>
  331. </div>
  332. <div class="blue large icon ui buttons">
  333. </div>
  334. <div class="example"></div>
  335. <h4>Sizes</h4>
  336. <p>Groups can have a shared size</p>
  337. <div class="huge ui buttons">
  338. <div class="ui button">One</div>
  339. <div class="ui button">Two</div>
  340. <div class="ui button">Three</div>
  341. </div>
  342. </div>
  343. </div>
  344. </body>
  345. </html>