diff options
Diffstat (limited to 'docs/html/design/patterns/actionbar.jd')
| -rw-r--r-- | docs/html/design/patterns/actionbar.jd | 28 |
1 files changed, 14 insertions, 14 deletions
diff --git a/docs/html/design/patterns/actionbar.jd b/docs/html/design/patterns/actionbar.jd index 5467722..ef02c53 100644 --- a/docs/html/design/patterns/actionbar.jd +++ b/docs/html/design/patterns/actionbar.jd @@ -34,8 +34,8 @@ page.metaDescription=The Action bar is an essential design element for all apps. <p>The action bar is split into four different functional areas that apply to most apps.</p> <img src="{@docRoot}design/media/action_bar_basics.png"> -<div class="layout-content-row"> - <div class="layout-content-col span-7 with-callouts"> +<div class="cols"> + <div class="col-7 with-callouts"> <ol> <li class="value-1"><h4>App icon</h4> @@ -57,7 +57,7 @@ Up navigation, see the <a href="{@docRoot}design/patterns/navigation.html">Navig </ol> </div> - <div class="layout-content-col span-6 with-callouts"> + <div class="col-6 with-callouts"> <ol> <li class="value-2"><h4>View control</h4> @@ -107,8 +107,8 @@ content across multiple bars located below the main action bar or at the bottom <h2 id="considerations-split-action-bars">Layout Considerations for Split Action Bars</h2> -<div class="layout-content-row"> - <div class="layout-content-col span-8 with-callouts"> +<div class="cols"> + <div class="col-8 with-callouts"> <p>When splitting up content across multiple action bars, you generally have three possible locations for action bar content:</p> @@ -124,7 +124,7 @@ the top bar.</p> <p>To display actions and, if necessary, the action overflow, use the bottom bar.</p> </div> - <div class="layout-content-col span-5"> + <div class="col-5"> <img src="{@docRoot}design/media/action_bar_pattern_considerations.png"> @@ -144,8 +144,8 @@ action overflow. The action bar should show only those actions that are availabl <p>For guidance on prioritizing actions, use the FIT scheme.</p> -<div class="layout-content-row"> - <div class="layout-content-col span-4"> +<div class="cols"> + <div class="col-4"> <p><strong>F — Frequent</strong></p> <ul> @@ -155,7 +155,7 @@ action overflow. The action bar should show only those actions that are availabl </ul> </div> - <div class="layout-content-col span-4"> + <div class="col-4"> <p><strong>I — Important</strong></p> <ul> @@ -164,7 +164,7 @@ action overflow. The action bar should show only those actions that are availabl </ul> </div> - <div class="layout-content-col span-4"> + <div class="col-4"> <p><strong>T — Typical</strong></p> <ul> @@ -194,8 +194,8 @@ files for further customization. </p> -<div class="layout-content-row"> - <div class="layout-content-col span-6"> +<div class="cols"> + <div class="col-6"> <h4>Action overflow</h4> <p>The action overflow in the action bar provides access to your app's less frequently used actions. @@ -203,7 +203,7 @@ The overflow icon only appears on phones that have no menu hardware keys. Phones display the action overflow when the user presses the key.</p> </div> - <div class="layout-content-col span-7"> + <div class="col-7"> <img src="{@docRoot}design/media/action_bar_pattern_overflow.png"> <div class="figure-caption"> @@ -285,4 +285,4 @@ actions exceeds the capacity of the main action bar, display them separately in <p>Sometimes it is important to display contextual information for your app that's always visible. Examples are the number of unread messages in a messaging inbox view or the Now Playing information in a music player. Carefully plan which important information you would like to display and -structure your action bars accordingly.</p>
\ No newline at end of file +structure your action bars accordingly.</p> |