Added links to bar and content block examples.

This commit is contained in:
toddparker 2011-10-03 17:22:39 -04:00
parent 1791e671c9
commit b483eebc78

View file

@ -51,11 +51,11 @@
<p>The default theme contains the following five Bar styles:</p>
<div class="swatch-preview">
<div class="ui-bar ui-bar-a">Bar A</div>
<div class="ui-bar ui-bar-b">Bar B</div>
<div class="ui-bar ui-bar-c">Bar C</div>
<div class="ui-bar ui-bar-d">Bar D</div>
<div class="ui-bar ui-bar-e">Bar E</div>
<div class="ui-bar ui-bar-a">Bar A - <a href="#" data-role="none" class="ui-link">Link</a></div>
<div class="ui-bar ui-bar-b">Bar B - <a href="#" data-role="none" class="ui-link">Link</a></div>
<div class="ui-bar ui-bar-c">Bar C - <a href="#" data-role="none" class="ui-link">Link</a></div>
<div class="ui-bar ui-bar-d">Bar D - <a href="#" data-role="none" class="ui-link">Link</a></div>
<div class="ui-bar ui-bar-e">Bar E - <a href="#" data-role="none" class="ui-link">Link</a></div>
</div><!-- end swatch-bars -->
<p>By default, the framework assigns the "a" swatch to all headers and footers, because these are typically given high visual priority in an application. To set the color of a bar to a different swatch color, simply add the <code> data-theme</code> attribute to your header or footer and specify an alternate swatch letter ('b' or 'd', for example) and the specified theme swatch color will be applied. Learn more about <a href="../toolbars/bars-themes.html">toolbar theming</a>.</p>
@ -66,11 +66,11 @@
<p>The default theme also includes color swatch values for use in content blocks, designed to coordinate with the header color swatches in the theme. </p>
<div class="swatch-preview">
<div class="ui-body ui-body-a">Block A</div>
<div class="ui-body ui-body-b">Block B</div>
<div class="ui-body ui-body-c">Block C</div>
<div class="ui-body ui-body-d">Block D</div>
<div class="ui-body ui-body-e">Block E</div>
<div class="ui-body ui-body-a">Block A - <a href="#">Link</a></div>
<div class="ui-body ui-body-b">Block B - <a href="#">Link</a></div>
<div class="ui-body ui-body-c">Block C - <a href="#">Link</a></div>
<div class="ui-body ui-body-d">Block D - <a href="#">Link</a></div>
<div class="ui-body ui-body-e">Block E - <a href="#">Link</a></div>
</div><!-- end swatch-bars -->