diff options
Diffstat (limited to 'docs/html/design/building-blocks/dialogs.jd')
| -rw-r--r-- | docs/html/design/building-blocks/dialogs.jd | 186 |
1 files changed, 0 insertions, 186 deletions
diff --git a/docs/html/design/building-blocks/dialogs.jd b/docs/html/design/building-blocks/dialogs.jd deleted file mode 100644 index 9c91abf..0000000 --- a/docs/html/design/building-blocks/dialogs.jd +++ /dev/null @@ -1,186 +0,0 @@ -page.title=Dialogs -page.tags=dialog,alert,popup,toast -@jd:body - -<a class="notice-designers-material" - href="http://www.google.com/design/spec/components/dialogs.html"> - <div> - <h3>Material Design</h3> - <p>Dialogs<p> - </div> -</a> - -<a class="notice-developers" href="{@docRoot}guide/topics/ui/dialogs.html"> - <div> - <h3>Developer Docs</h3> - <p>Dialogs</p> - </div> -</a> - -<p itemprop="description">Dialogs prompt the user for decisions or additional information required by the app to continue a -task. Such requests can range from simple Cancel/OK decisions to more complex layouts asking the -user to adjust settings or enter text.</p> - -<img src="{@docRoot}design/media/dialogs_main.png"> - -<div class="with-callouts"> - -<ol> - <li> - <h4>Optional title region</h4> - <p>The title introduces the content of your dialog. It can, for example, identify the name of a - setting that the user is about to change, or request a decision.</p> - </li> - <li> - <h4>Content area</h4> - <p>Dialog content varies widely. For settings dialogs, a dialog may contain UI elements such as - sliders, text fields, checkboxes, or radio buttons that allow the user to change app or system - settings. In other cases, such as alerts, the content may consist solely of text that provides - further context for a user decision.</p> - </li> - - <li> - <h4>Action buttons</h4> - <p>Action buttons are typically Cancel and/or OK, with OK indicating the preferred or most likely action. However, if the options consist of specific actions such as Close or Wait rather than a confirmation or cancellation of the action described in the content, then all the buttons should be active verbs. Order actions following these rules:</p> - <ul> - - <li>The dismissive action of a dialog is always on the left. Dismissive actions return to the user to the previous state.</li> - <li>The affirmative actions are on the right. Affirmative actions continue progress toward the user goal that triggered the dialog.</li> - </ul> - </li> -</ol> -</div> - -<img src="{@docRoot}design/media/dialogs_examples.png"> -<div class="figure-caption"> - Samples of typical dialog use in Android. -</div> - -<h2 id="alerts">Alerts</h2> - -<p>Alerts inform the user about a situation that requires their confirmation or acknowledgement before -proceeding. They differ slightly in appearance based upon the severity and impact of the message -conveyed.</p> - -<div class="layout-content-row"> - <div class="layout-content-col span-8"> - - <img src="{@docRoot}design/media/dialogs_w_no_title.png"> - - </div> - <div class="layout-content-col span-5"> - -<h4>Alerts without title bars</h4> -<p>Most alerts don't need titles. Usually the decision doesn't have a severe impact and can be summed -up succinctly in a sentence or two. The content area should either ask a question (such as "Delete -this conversation?") or make a clear statement whose relationship to the action buttons is obvious.</p> - - </div> -</div> - - -<div class="layout-content-row"> - <div class="layout-content-col span-8"> - - <img src="{@docRoot}design/media/dialogs_w_title.png"> - - </div> - <div class="layout-content-col span-5"> - -<h4>Alerts with title bars</h4> -<p>Use alerts with title bars sparingly. They are appropriate only when a high-risk operation involving -potential loss of data, connectivity, extra charges, and so on requires a clear question or -statement (the title) and some additional explanation (in the content area).</p> -<p>Keep the question or statement short: for example, "Erase USB storage?" Avoid apologies. A user -should be able to skip the content completely and still have a clear idea of what choices are -available based on the title and the text of the action buttons.</p> - - </div> -</div> -<p>When crafting a confirmation dialog, make the title meaningful by echoing the requested action.</p> - -<div class="layout-content-row"> - <div class="layout-content-col span-4"> - <div class="do-dont-label bad">Don't</div> - <table class="ui-table bad"> - <thead> - <tr> - <th class="label"> - Are you sure? - </th> - </tr> - </thead> - </table> - </div> - <div class="layout-content-col span-4"> - <div class="do-dont-label bad">Don't</div> - <table class="ui-table bad"> - <thead> - <tr> - <th class="label"> - Warning! - </th> - </tr> - </thead> - </table> - </div> - <div class="layout-content-col span-5"> - <div class="do-dont-label good">Do</div> - <table class="ui-table good"> - <thead> - <tr> - <th class="label"> - Erase USB storage? - </th> - </tr> - </thead> - </table> - </div> -</div> - - -<h2 id="popups">Popups</h2> - -<p>Popups are lightweight version of dialogs that require a single selection from the user. Popups -don't have have explicit buttons that accept or cancel the operation. Instead, making a selection -advances the workflow, and simply touching outside the popup dismisses it.</p> - -<img src="{@docRoot}design/media/dialogs_popups_example.png"> - - -<h2 id="toasts">Toasts</h2> - - -<div class="layout-content-row"> - <div class="layout-content-col span-6"> - - <div class="vspace size-3"></div> - -<p>Toasts provide lightweight feedback about an operation in a small popup. For example, navigating -away from an email before you send it triggers a "Draft saved" toast to let you know that you can -continue editing later. Toasts automatically disappear after a timeout.</p> - -<a class="notice-designers-material left" - href="http://www.google.com/design/spec/components/snackbars-toasts.html"> - <div> - <h3>Material Design</h3> - <p>Toasts<p> - </div> -</a> - - -<a class="notice-developers left" href="{@docRoot}guide/topics/ui/notifiers/toasts.html"> - <div> - <h3>Developer Docs</h3> - <p>Toasts</p> - </div> -</a> - - </div> - <div class="layout-content-col span-7"> - - <img src="{@docRoot}design/media/dialogs_toasts.png"> - - </div> -</div> - |