examples.html 2.1 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556
  1. <p>Below are some quick side-by-side comparisons of basic Skinr syntax and
  2. what they translate to in the UI.</p>
  3. <dl>
  4. <dt>
  5. <h4>Single</h4>
  6. </dt>
  7. <dd>
  8. <pre>
  9. skinr[example_single][title] = Single
  10. skinr[example_single][description] = A skin with a single option.
  11. skinr[example_single][options][1][label] = Foo
  12. skinr[example_single][options][1][class] = foo-class</pre>
  13. <img src="&path&images/ui-a.png" alt="Single Example" />
  14. </dd>
  15. <dt>
  16. <h4>Multiple</h4>
  17. </dt>
  18. <dd>
  19. <pre>
  20. skinr[example_multiple][title] = Multiple (checkboxes)
  21. skinr[example_multiple][description] = A skin multiple options that uses a <strong>checkboxes</strong> (multiple choices).
  22. skinr[example_multiple][options][1][label] = Foo
  23. skinr[example_multiple][options][1][class] = foo-class
  24. skinr[example_multiple][options][2][label] = Bar
  25. skinr[example_multiple][options][2][class] = bar-class</pre>
  26. <img src="&path&images/ui-b.png" alt="Multiple (checkboxes)" />
  27. </dd>
  28. <dt>
  29. <h4>Multiple (radios)</h4>
  30. </dt>
  31. <dd>
  32. <pre>
  33. skinr[example_multiple_radio][title] = Multiple (radios)
  34. skinr[example_multiple_radio][type] = radios
  35. skinr[example_multiple_radio][description] = A skin multiple options that uses <strong>radios</strong> (single choice).
  36. skinr[example_multiple_radio][options][1][label] = Foo
  37. skinr[example_multiple_radio][options][1][class] = foo-class
  38. skinr[example_multiple_radio][options][2][label] = Bar
  39. skinr[example_multiple_radio][options][2][class] = bar-class</pre>
  40. <img src="&path&images/ui-c.png" alt="Multiple (radios)" />
  41. </dd>
  42. <dt>
  43. <h4>Multiple (select)</h4>
  44. </dt>
  45. <dd>
  46. <pre>
  47. skinr[example_multiple_radio][title] = Multiple (select)
  48. skinr[example_multiple_radio][type] = select
  49. skinr[example_multiple_radio][description] = A skin multiple options that uses <strong>radios</strong> (single choice).
  50. skinr[example_multiple_radio][options][1][label] = Foo
  51. skinr[example_multiple_radio][options][1][class] = foo-class
  52. skinr[example_multiple_radio][options][2][label] = Bar
  53. skinr[example_multiple_radio][options][2][class] = bar-class</pre>
  54. <img src="&path&images/ui-d.png" alt="Multiple (select)" />
  55. </dd>
  56. </dl>