Browse files

Button docs heading tweaks

shortened H1's, added H2's
  • Loading branch information...
1 parent 7c1a952 commit 0f9c75291ce90eec523248b12aa68b9c61cb30c9 @toddparker toddparker committed Apr 2, 2012
Showing with 16 additions and 2 deletions.
  1. +15 −1 docs/buttons/buttons-grouped.html
  2. +1 −1 docs/buttons/buttons-inline.html
16 docs/buttons/buttons-grouped.html
@@ -17,14 +17,15 @@
<div data-role="page" class="type-interior">
<div data-role="header" data-theme="f">
- <h1>Grouped buttons</h1>
+ <h1>Grouped</h1>
<a href="../../" data-icon="home" data-iconpos="notext" data-direction="reverse">Home</a>
<a href="../nav.html" data-icon="search" data-iconpos="notext" data-rel="dialog" data-transition="fade">Search</a>
</div><!-- /header -->
<div data-role="content">
<div class="content-primary">
+ <h2>Grouped buttons</h2>
<p>Occasionally, you may want to visually group a set of buttons together to form a single block that looks contained like a navigation component. To get this effect, wrap a set of buttons in a container with the <code> data-role="controlgroup"</code> attribute &mdash; the framework will create a vertical button group, remove all margins and drop shadows between the buttons, and only round the first and last buttons of the set to create the effect that they are grouped together. </p>
&lt;div data-role=&quot;controlgroup&quot;&gt;
@@ -50,13 +51,26 @@
<a href="index.html" data-role="button">No</a>
<a href="index.html" data-role="button">Maybe</a>
+ <p>Mini horizontal grouped buttons by adding <code>data-mini="true</code> to the controlgroup:</p>
+ <div data-role="controlgroup" data-type="horizontal" data-mini="true">
+ <a href="index.html" data-role="button">Yes</a>
+ <a href="index.html" data-role="button">No</a>
+ <a href="index.html" data-role="button">Maybe</a>
+ </div>
<p>Horizontal grouped buttons with icons:</p>
<div data-role="controlgroup" data-type="horizontal" >
<a href="index.html" data-role="button" data-icon="plus">Add</a>
<a href="index.html" data-role="button" data-icon="delete">Delete</a>
+ <p>Mini horizontal grouped buttons with icons by adding <code>data-mini="true</code> to the controlgroup::</p>
+ <div data-role="controlgroup" data-type="horizontal" data-mini="true">
+ <a href="index.html" data-role="button" data-icon="plus">Add</a>
+ <a href="index.html" data-role="button" data-icon="delete">Delete</a>
+ </div>
<p>Horizontal grouped buttons, icon only:</p>
<div data-role="controlgroup" data-type="horizontal" >
<a href="index.html" data-role="button" data-icon="arrow-u" data-iconpos="notext">Up</a>
2 docs/buttons/buttons-inline.html
@@ -24,7 +24,7 @@
<div data-role="content">
<div class="content-primary">
+ <h2>Inline buttons</h2>
<p>By default, all buttons in the body content are styled as block-level element so they fill the width of the screen:</p>
<a href="index.html" data-role="button">Button</a>

0 comments on commit 0f9c752

Please sign in to comment.