examples.html in Skinr 6.2
File
help/examples.html
View source
<p>Below are some quick side-by-side comparisons of basic Skinr syntax and
what they translate to in the UI.</p>
<dl>
<dt>
<h4>Single</h4>
</dt>
<dd>
<pre>
skinr[example_single][title] = Single
skinr[example_single][description] = A skin with a single option.
skinr[example_single][options][1][label] = Foo
skinr[example_single][options][1][class] = foo-class</pre>
<img src="&path&images/ui-a.png" alt="Single Example" />
</dd>
<dt>
<h4>Multiple</h4>
</dt>
<dd>
<pre>
skinr[example_multiple][title] = Multiple (checkboxes)
skinr[example_multiple][description] = A skin multiple options that uses a <strong>checkboxes</strong> (multiple choices).
skinr[example_multiple][options][1][label] = Foo
skinr[example_multiple][options][1][class] = foo-class
skinr[example_multiple][options][2][label] = Bar
skinr[example_multiple][options][2][class] = bar-class</pre>
<img src="&path&images/ui-b.png" alt="Multiple (checkboxes)" />
</dd>
<dt>
<h4>Multiple (radios)</h4>
</dt>
<dd>
<pre>
skinr[example_multiple_radio][title] = Multiple (radios)
skinr[example_multiple_radio][type] = radios
skinr[example_multiple_radio][description] = A skin multiple options that uses <strong>radios</strong> (single choice).
skinr[example_multiple_radio][options][1][label] = Foo
skinr[example_multiple_radio][options][1][class] = foo-class
skinr[example_multiple_radio][options][2][label] = Bar
skinr[example_multiple_radio][options][2][class] = bar-class</pre>
<img src="&path&images/ui-c.png" alt="Multiple (radios)" />
</dd>
<dt>
<h4>Multiple (select)</h4>
</dt>
<dd>
<pre>
skinr[example_multiple_radio][title] = Multiple (select)
skinr[example_multiple_radio][type] = select
skinr[example_multiple_radio][description] = A skin multiple options that uses <strong>radios</strong> (single choice).
skinr[example_multiple_radio][options][1][label] = Foo
skinr[example_multiple_radio][options][1][class] = foo-class
skinr[example_multiple_radio][options][2][label] = Bar
skinr[example_multiple_radio][options][2][class] = bar-class</pre>
<img src="&path&images/ui-d.png" alt="Multiple (select)" />
</dd>
</dl>