checkbox.yml 7.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211
  1. Title : 核取方塊
  2. Description: 好的。
  3. Definitions:
  4. - Title : 種類
  5. Description: 核取方塊有不同的種類可供選擇。
  6. Sections :
  7. - Title : 基本
  8. Description: 最基本的核取方塊。
  9. Since : 2.3.3
  10. HTML : |
  11. <div class="ts [[checkbox]]">
  12. <input type="checkbox" id="thirdGender">
  13. <label for="thirdGender">第三性</label>
  14. </div>
  15. - Title : 單選方塊
  16. Description: 一個僅能夠在多個選項中核取其中一項的單選方塊。
  17. Since : 2.3.3
  18. HTML : |
  19. <div class="ts [[radio]] checkbox">
  20. <input type="radio" id="radio">
  21. <label for="radio">男性</label>
  22. </div>
  23. - Title : 指撥開關
  24. Description: 一個可供切換的指撥開關。
  25. Since : 2.3.3
  26. HTML : |
  27. <div class="ts [[toggle]] checkbox">
  28. <input type="checkbox" id="toggle">
  29. <label for="toggle">暫離</label>
  30. </div>
  31. - Title : 群組
  32. Description: 多個核取方塊可以組成一個群組。
  33. Sections :
  34. - Title : 核取群組
  35. Description: 核取方塊群組可以用來排列。
  36. Since : 2.3.3
  37. HTML : |
  38. <div class="ts [[checkboxes]]">
  39. <div class="ts radio checkbox">
  40. <input type="radio" name="gender" id="male">
  41. <label for="male">男性</label>
  42. </div>
  43. <div class="ts radio checkbox">
  44. <input type="radio" name="gender" id="female">
  45. <label for="female">女性</label>
  46. </div>
  47. <div class="ts radio checkbox">
  48. <input type="radio" name="gender" id="third">
  49. <label for="third">第三性</label>
  50. </div>
  51. </div>
  52. - Title : 水平群組
  53. Description: 群組可以是水平排列的。
  54. Since : 2.3.3
  55. HTML : |
  56. <div class="ts [[horizontal]] checkboxes">
  57. <div class="ts checkbox">
  58. <input type="checkbox" id="blue">
  59. <label for="blue">小藍</label>
  60. </div>
  61. <div class="ts checkbox">
  62. <input type="checkbox" id="seed">
  63. <label for="seed">小芽</label>
  64. </div>
  65. <div class="ts checkbox">
  66. <input type="checkbox" id="orenji">
  67. <label for="orenji">橙希</label>
  68. </div>
  69. </div>
  70. - Title : 輕巧版
  71. Description: 群組可以是依照內容為寬度基準,而不是一開始就服貼容器的寬度。
  72. Since : 2.3.3
  73. HTML : |
  74. <div class="ts [[compact]] horizontal checkboxes">
  75. <div class="ts checkbox">
  76. <input type="checkbox" id="apple">
  77. <label for="apple">蘋果</label>
  78. </div>
  79. <div class="ts checkbox">
  80. <input type="checkbox" id="polo">
  81. <label for="polo">菠蘿</label>
  82. </div>
  83. <div class="ts checkbox">
  84. <input type="checkbox" id="bavone">
  85. <label for="bavone">拔鳳梨</label>
  86. </div>
  87. </div>
  88. - Title : 水平對齊
  89. Description: 群組可以靠右、左、甚至置中。
  90. Remove :
  91. - <br><br>
  92. Since : 2.3.3
  93. HTML : |
  94. <div class="ts [[left aligned]] compact horizontal checkboxes">
  95. <div class="ts checkbox">
  96. <input type="checkbox" id="lelia">
  97. <label for="lelia">雷莉亞</label>
  98. </div>
  99. <div class="ts checkbox">
  100. <input type="checkbox" id="avane">
  101. <label for="avane">亞凡芽</label>
  102. </div>
  103. </div>
  104. <br><br>
  105. <div class="ts [[center aligned]] compact horizontal checkboxes">
  106. <div class="ts checkbox">
  107. <input type="checkbox" id="aoi">
  108. <label for="aoi">吳雨藍</label>
  109. </div>
  110. <div class="ts checkbox">
  111. <input type="checkbox" id="shirone">
  112. <label for="shirone">羽田白音</label>
  113. </div>
  114. </div>
  115. <br><br>
  116. <div class="ts [[right aligned]] compact horizontal checkboxes">
  117. <div class="ts checkbox">
  118. <input type="checkbox" id="caris">
  119. <label for="caris">卡莉絲</label>
  120. </div>
  121. <div class="ts checkbox">
  122. <input type="checkbox" id="iknore">
  123. <label for="iknore">依可諾爾</label>
  124. </div>
  125. </div>
  126. - Title : 狀態
  127. Description: 核取方塊有不同的狀態。
  128. Sections :
  129. - Title : 已停用
  130. Description: 一個核取方塊可以顯示已經被停用、不可使用的樣子。
  131. Since : 2.3.3
  132. HTML : |
  133. <div class="ts [[disabled]] checkbox">
  134. <input type="checkbox">
  135. <label>你不能點擊我</label>
  136. </div>
  137. - Title : 外觀
  138. Description: 核取方塊有不同的外觀。
  139. Sections :
  140. - Title : 自動層疊
  141. Description: 核取方塊群組可以在行動裝置上自動層疊,而不是保持水平排列。欲要觀看效果,你可能需要使用手機裝置瀏覽此範例。
  142. Since : 2.3.3
  143. Responsive : true
  144. HTML : |
  145. <div class="ts horizontal [[stackable]] checkboxes">
  146. <div class="ts radio checkbox">
  147. <input type="radio" name="os" id="windows">
  148. <label for="windows">Windows</label>
  149. </div>
  150. <div class="ts radio checkbox">
  151. <input type="radio" name="os" id="linux">
  152. <label for="linux">Linux</label>
  153. </div>
  154. <div class="ts radio checkbox">
  155. <input type="radio" name="os" id="macos">
  156. <label for="macos">macOS</label>
  157. </div>
  158. </div>
  159. - Title : 反色
  160. Description: 核取方塊可以是反色的。
  161. Since : 2.3.3
  162. HTML : |
  163. <div class="ts inverted {{segment}}">
  164. <div class="ts [[inverted]] checkboxes">
  165. <div class="ts checkbox">
  166. <input type="checkbox" id="xiaoan">
  167. <label for="xiaoan">洨安</label>
  168. </div>
  169. <div class="ts checkbox">
  170. <input type="checkbox" id="kataya">
  171. <label for="kataya">卡特雅</label>
  172. </div>
  173. <div class="ts checkbox">
  174. <input type="checkbox" id="pear">
  175. <label for="pear">皮爾</label>
  176. </div>
  177. </div>
  178. </div>
  179. Modules:
  180. - Title : JavaScript
  181. Description: 核取方塊有提供可用的 JavaScript 模塊。
  182. Sections :
  183. - Title : 簡單
  184. Description: 你可以使用 JavaScript 來省去撰寫 `[id=""]` 和 `[for=""]` 的困擾。
  185. Since : 2.3.3
  186. HTML : |
  187. <div class="ts checkbox">
  188. <input type="checkbox">
  189. <label>第三性</label>
  190. </div>
  191. JavaScript: |
  192. ts('.ts.checkbox').checkbox();
  193. AutoExecute: true