data-attribute.html 2.0 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758
  1. <section id="data" data-transition="slide">
  2. <header data-title="Data Attributes">
  3. <nav>
  4. <a href="#back" data-router="section" data-icon="home"></a>
  5. </nav>
  6. </header>
  7. <article id="data-attributes" class="active list scroll indented">
  8. <ul>
  9. <li data-icon="user">
  10. <strong>data-icon</strong>
  11. <small>Creates an icon Lungo vectorized</small>
  12. </li>
  13. <li data-image="http://cdn.tapquo.com/lungo/icon-144.png">
  14. <strong>data-image</strong>
  15. <small>Instance a &lt;img&gt; automatically</small>
  16. </li>
  17. <li>
  18. <strong>data-search</strong>
  19. <small>Creates a search input form</small>
  20. </li>
  21. <form data-search="Type your search..."></form>
  22. <li>
  23. <strong>data-progress</strong>
  24. <small>Creates a progress element</small>
  25. </li>
  26. <form data-progress="25%"></form>
  27. <li>
  28. <strong>data-loading</strong>
  29. <small>Creates a loading element</small>
  30. </li>
  31. <li data-loading="black"></li>
  32. <li class="anchor">Others</li>
  33. <li>
  34. <strong>data-title</strong>
  35. <small>Relationship field between &lt;header&gt; and &lt;a&gt;</small>
  36. </li>
  37. <li>
  38. <strong>data-label</strong>
  39. <small>Creates label in a determinate nav element</small>
  40. </li>
  41. <li>
  42. <div class="right" data-count="23 units"></div>
  43. <strong>data-count</strong>
  44. <small>Creates counters in different &lt;elements&gt;</small>
  45. </li>
  46. <li>
  47. <strong>data-back</strong>
  48. <small>Creates a button that returns to the previous section.</small>
  49. </li>
  50. </ul>
  51. </article>
  52. </section>