| |
| |
| |
| <h2 id="introduction">Introduction</h2> |
| <p>The Material Design Lite (MDL) <strong>dialog</strong> component allows for verification of |
| user actions, simple data input, and alerts to provide extra information to users.</p> |
| <h2 id="basic-usage">Basic Usage</h2> |
| <p>To use the dialog component, you must be using a browser that supports the <a href="http://www.w3.org/TR/2013/CR-html5-20130806/interactive-elements.html#the-dialog-element">dialog element</a>. |
| Only Chrome and Opera have native support at the time of writing. |
| For other browsers you will need to include the <a href="https://github.com/GoogleChrome/dialog-polyfill">dialog polyfill</a> or create your own.</p> |
| <p>Once you have dialog support create a dialog element. |
| The element when using the polyfill <strong>must</strong> be a child of the <code>body</code> element. |
| Within that container, add a content element with the class <code>mdl-dialog__content</code>. |
| Add you content, then create an action container with the class <code>mdl-dialog__actions</code>. |
| Finally for the markup, add your buttons within this container for triggering dialog functions.</p> |
| <p>Keep in mind, the order is automatically reversed for actions. |
| Material Design requires that the primary (confirmation) action be displayed last. |
| So, the first action you create will appear last on the action bar. |
| This allows for more natural coding and tab ordering while following the specification.</p> |
| <p>Remember to add the event handlers for your action items. |
| After your dialog markup is created, add the event listeners to the page to trigger the dialog to show.</p> |
| <p>For example:</p> |
| <pre><code class="lang-javascript"> var button = document.querySelector('button'); |
| var dialog = document.querySelector('dialog'); |
| button.addEventListener('click', function() { |
| dialog.showModal(); |
| /* Or dialog.show(); to show the dialog without a backdrop. */ |
| }); |
| </code></pre> |
| <h2 id="examples">Examples</h2> |
| <h3 id="simple-dialog">Simple Dialog</h3> |
| <p>See this example live in <a href="http://codepen.io/Garbee/full/EPoaMj/">codepen</a>.</p> |
| <pre><code class="lang-html"><body> |
| <button id="show-dialog" type="button" class="mdl-button">Show Dialog</button> |
| <dialog class="mdl-dialog"> |
| <h4 class="mdl-dialog__title">Allow data collection?</h4> |
| <div class="mdl-dialog__content"> |
| <p> |
| Allowing us to collect data will let us get you the information you want faster. |
| </p> |
| </div> |
| <div class="mdl-dialog__actions"> |
| <button type="button" class="mdl-button">Agree</button> |
| <button type="button" class="mdl-button close">Disagree</button> |
| </div> |
| </dialog> |
| <script> |
| var dialog = document.querySelector('dialog'); |
| var showDialogButton = document.querySelector('#show-dialog'); |
| if (! dialog.showModal) { |
| dialogPolyfill.registerDialog(dialog); |
| } |
| showDialogButton.addEventListener('click', function() { |
| dialog.showModal(); |
| }); |
| dialog.querySelector('.close').addEventListener('click', function() { |
| dialog.close(); |
| }); |
| </script> |
| </body> |
| </code></pre> |
| <h3 id="dialog-with-full-width-actions">Dialog with full width actions</h3> |
| <p>See this example live in <a href="http://codepen.io/Garbee/full/JGMowG/">codepen</a>.</p> |
| <pre><code class="lang-html"><body> |
| <button type="button" class="mdl-button show-modal">Show Modal</button> |
| <dialog class="mdl-dialog"> |
| <div class="mdl-dialog__content"> |
| <p> |
| Allow this site to collect usage data to improve your experience? |
| </p> |
| </div> |
| <div class="mdl-dialog__actions mdl-dialog__actions--full-width"> |
| <button type="button" class="mdl-button">Agree</button> |
| <button type="button" class="mdl-button close">Disagree</button> |
| </div> |
| </dialog> |
| <script> |
| var dialog = document.querySelector('dialog'); |
| var showModalButton = document.querySelector('.show-modal'); |
| if (! dialog.showModal) { |
| dialogPolyfill.registerDialog(dialog); |
| } |
| showModalButton.addEventListener('click', function() { |
| dialog.showModal(); |
| }); |
| dialog.querySelector('.close').addEventListener('click', function() { |
| dialog.close(); |
| }); |
| </script> |
| </body> |
| </code></pre> |
| <h2 id="css-classes">CSS Classes</h2> |
| <h3 id="blocks">Blocks</h3> |
| <table> |
| <thead> |
| <tr> |
| <th>MDL Class</th> |
| <th>Effect</th> |
| <th>Remarks</th> |
| </tr> |
| </thead> |
| <tbody> |
| <tr> |
| <td><code>mdl-dialog</code></td> |
| <td>Defines the container of the dialog component.</td> |
| <td>Required on dialog container.</td> |
| </tr> |
| </tbody> |
| </table> |
| <h3 id="elements">Elements</h3> |
| <table> |
| <thead> |
| <tr> |
| <th>MDL Class</th> |
| <th>Effect</th> |
| <th>Remarks</th> |
| </tr> |
| </thead> |
| <tbody> |
| <tr> |
| <td><code>mdl-dialog__title</code></td> |
| <td>Defines the title container in the dialog.</td> |
| <td>Optional on title container.</td> |
| </tr> |
| <tr> |
| <td><code>mdl-dialog__content</code></td> |
| <td>Defines the content container of the dialog.</td> |
| <td>Required on content container.</td> |
| </tr> |
| <tr> |
| <td><code>mdl-dialog__actions</code></td> |
| <td>Defines the actions container in the dialog.</td> |
| <td>Required on action container.</td> |
| </tr> |
| </tbody> |
| </table> |
| <h3 id="modifiers">Modifiers</h3> |
| <table> |
| <thead> |
| <tr> |
| <th>MDL Class</th> |
| <th>Effect</th> |
| <th>Remarks</th> |
| </tr> |
| </thead> |
| <tbody> |
| <tr> |
| <td><code>mdl-dialog__actions--full-width</code></td> |
| <td>Modifies the actions to each take the full width of the container. This makes each take their own line.</td> |
| <td>Optional on action container.</td> |
| </tr> |
| </tbody> |
| </table> |
| |
| |