list-styles.html 9.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194
  1. <h3>List Styles UI</h3>
  2. <div class="list-styles-ui">
  3. <button type="button" data-list="disc">disc</button>
  4. <button type="button" data-list="circle">circle</button>
  5. <button type="button" data-list="square">square</button>
  6. <button type="button" data-list="decimal">decimal</button>
  7. <button type="button" data-list="decimal-leading-zero">decimal-leading-zero</button>
  8. <button type="button" data-list="lower-latin">lower-latin</button>
  9. <button type="button" data-list="lower-roman">lower-roman</button>
  10. <button type="button" data-list="default">default</button>
  11. </div>
  12. <br>
  13. <div id="editor">
  14. <h2>Default styles</h2>
  15. <figure class="table">
  16. <table style="width: 600px;">
  17. <tbody>
  18. <tr>
  19. <td colspan="2" style="text-align: center">
  20. <span class="text-big" style="font-weight: bold">Default styles</span>
  21. </td>
  22. </tr>
  23. <tr>
  24. <td style="text-align: center"><span class="text-big" style="font-weight: bold">Bulleted</span></td>
  25. <td style="text-align: center"><span class="text-big" style="font-weight: bold">Numbered</span></td>
  26. </tr>
  27. <tr>
  28. <td style="vertical-align:top; width: 50%">
  29. <ul>
  30. <li>UL List item 1</li>
  31. <li>UL List item 2</li>
  32. <li>UL List item 3</li>
  33. </ul>
  34. </td>
  35. <td style="vertical-align:top; width: 50%">
  36. <ol>
  37. <li>OL List item 1</li>
  38. <li>OL List item 2</li>
  39. <li>OL List item 3</li>
  40. </ol>
  41. </td>
  42. </tr>
  43. </tbody>
  44. </table>
  45. </figure>
  46. <h2>Bulleted lists</h2>
  47. <figure class="table">
  48. <table style="width: 600px;">
  49. <tbody>
  50. <tr>
  51. <td colspan="4" style="text-align: center">
  52. <span class="text-big" style="font-weight: bold">Type of list</span>
  53. </td>
  54. </tr>
  55. <tr>
  56. <td style="text-align: center"><span class="text-big" style="font-weight: bold">Circle</span></td>
  57. <td style="text-align: center"><span class="text-big" style="font-weight: bold">Disc</span></td>
  58. <td style="text-align: center"><span class="text-big" style="font-weight: bold">Square</span></td>
  59. <td style="text-align: center"><span class="text-big" style="font-weight: bold">'👉'</span></td>
  60. </tr>
  61. <tr>
  62. <td style="vertical-align:top; width: 25%">
  63. <ul style="list-style-type: circle;">
  64. <li>UL List item 1</li>
  65. <li>UL List item 2</li>
  66. <li>UL List item 3</li>
  67. </ul>
  68. </td>
  69. <td style="vertical-align:top; width: 25%">
  70. <ul style="list-style-type: disc;">
  71. <li>UL List item 1</li>
  72. <li>UL List item 2</li>
  73. <li>UL List item 3</li>
  74. </ul>
  75. </td>
  76. <td style="vertical-align:top; width: 25%">
  77. <ul style="list-style-type: square;">
  78. <li>UL List item 1</li>
  79. <li>UL List item 2</li>
  80. <li>UL List item 3</li>
  81. </ul>
  82. </td>
  83. <td style="vertical-align:top; width: 25%">
  84. <ul style="list-style-type: '👉';">
  85. <li>UL List item 1</li>
  86. <li>UL List item 2</li>
  87. <li>UL List item 3</li>
  88. </ul>
  89. </td>
  90. </tr>
  91. </tbody>
  92. </table>
  93. </figure>
  94. <h2>Numbered lists</h2>
  95. <figure class="table">
  96. <table style="width: 800px;">
  97. <tbody>
  98. <tr>
  99. <td colspan="4" style="text-align: center">
  100. <span class="text-big" style="font-weight: bold">Type of list</span>
  101. </td>
  102. </tr>
  103. <tr>
  104. <td style="text-align: center"><span class="text-big" style="font-weight: bold">Decimal</span></td>
  105. <td style="text-align: center"><span class="text-big" style="font-weight: bold">Decimal-leading-zero</span></td>
  106. <td style="text-align: center"><span class="text-big" style="font-weight: bold">Lower-latin</span></td>
  107. <td style="text-align: center"><span class="text-big" style="font-weight: bold">Lower-roman</span></td>
  108. </tr>
  109. <tr>
  110. <td style="vertical-align:top; width: 25%">
  111. <ol style="list-style-type: decimal;">
  112. <li>OL List item 1</li>
  113. <li>OL List item 2</li>
  114. <li>OL List item 3</li>
  115. </ol>
  116. </td>
  117. <td style="vertical-align:top; width: 25%">
  118. <ol style="list-style-type: decimal-leading-zero;">
  119. <li>OL List item 1</li>
  120. <li>OL List item 2</li>
  121. <li>OL List item 3</li>
  122. </ol>
  123. </td>
  124. <td style="vertical-align:top; width: 25%">
  125. <ol style="list-style-type: lower-latin;">
  126. <li>OL List item 1</li>
  127. <li>OL List item 2</li>
  128. <li>OL List item 3</li>
  129. </ol>
  130. </td>
  131. <td style="vertical-align:top; width: 25%">
  132. <ol style="list-style-type: lower-roman;">
  133. <li>OL List item 1</li>
  134. <li>OL List item 2</li>
  135. <li>OL List item 3</li>
  136. </ol>
  137. </td>
  138. </tr>
  139. </tbody>
  140. </table>
  141. </figure>
  142. <h2>Nested/mixed lists (numbered and bulleted)</h2>
  143. <figure class="table">
  144. <table style="width: 1200px;">
  145. <tr>
  146. <td style="width: 50%">
  147. <ol style="list-style-type: lower-roman;">
  148. <li>OL 1.1 <code>OL[style: lower-roman]</code></li>
  149. <li>OL 1.2 <code>OL[style: lower-roman]</code>
  150. <ul style="list-style-type: square;">
  151. <li>UL 1.2.1 <code>OL[style: lower-roman] &gt; UL[style: square]</code></li>
  152. <li>UL 1.2.2 <code>OL[style: lower-roman] &gt; UL[style: square]</code></li>
  153. <li>UL 1.2.3 <code>OL[style: lower-roman] &gt; UL[style: square]</code></li>
  154. </ul>
  155. </li>
  156. <li>OL 1.3 <code>OL[style: lower-roman]</code></li>
  157. <li>OL 1.4 <code>OL[style: lower-roman]</code></li>
  158. <ol style="list-style-type: lower-alpha;">
  159. <li>OL 1.4.1 <code>OL[style: lower-roman] &gt; OL[style: lower-alpha]</code></li>
  160. <li>OL 1.4.2 <code>OL[style: lower-roman] &gt; OL[style: lower-alpha]</code></li>
  161. <li>OL 1.4.3 <code>OL[style: lower-roman] &gt; OL[style: lower-alpha]</code></li>
  162. </ol>
  163. </li>
  164. <li>OL 1.5 <code>OL[style: lower-roman]</code></li>
  165. <li>OL 1.6 <code>OL[style: lower-roman]</code></li>
  166. </ol>
  167. </td>
  168. <td style="width: 50%">
  169. <ol style="list-style-type: upper-alpha;">
  170. <li>OL 2.1 <code>OL[style: upper-alpha]</code>
  171. <ol style="list-style-type: lower-greek;">
  172. <li>OL 2.2.1 <code>OL[style: lower-alpha] &gt; OL[style: lower-greek]</code>
  173. <ul style="list-style-type: circle;">
  174. <li>UL 2.2.1.1 <code>... &gt; OL[style: lower-greek] &gt; UL[style: circle]</code></li>
  175. <li>UL 2.2.1.2 <code>... &gt; OL[style: lower-greek] &gt; UL[style: circle]</code></li>
  176. <li>UL 2.2.1.3 <code>... &gt; OL[style: lower-greek] &gt; UL[style: circle]</code></li>
  177. </ul>
  178. </li>
  179. <li>OL 2.2.2 <code>OL[style: lower-alpha] &gt; OL[style: lower-greek]</code></li>
  180. <li>OL 2.2.3 <code>OL[style: lower-alpha] &gt; OL[style: lower-greek]</code></li>
  181. </ol>
  182. </li>
  183. <li>OL 2.2 <code>OL[style: upper-alpha]</code></li>
  184. </ol>
  185. </td>
  186. </tr>
  187. </table>
  188. </figure>
  189. </div>