index.html 1.3 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <title>Action menu</title>
  6. <meta name="description" content="Presenting a list of actions related to the App content">
  7. <link rel="stylesheet" href="../action_menu.css">
  8. <!--
  9. - This <style> element is only used for the example code;
  10. - it is not required for the real use case.
  11. -->
  12. <style type="text/css">
  13. html, body {
  14. font-family: sans-serif;
  15. margin: 0;
  16. padding: 0;
  17. font-size: 10px;
  18. background-color: #fff;
  19. }
  20. body {
  21. background: none;
  22. }
  23. </style>
  24. </head>
  25. <body role="application">
  26. <p dir="ltr">
  27. <label>
  28. <input type="checkbox"
  29. onchange="document.documentElement.dir = this.checked ? 'rtl' : 'ltr'">
  30. RTL mode
  31. </label>
  32. </p>
  33. <form role="dialog" data-type="action" onsubmit="return false;">
  34. <header>Title</header> <!-- this header is optional -->
  35. <menu type="toolbar">
  36. <button>Action 1</button>
  37. <button disabled> Action 2 (disabled) </button>
  38. <button> Action 3 </button>
  39. <button> Action 4 </button>
  40. <button disabled> Action 5 (disabled) </button>
  41. <button> Action 6 </button>
  42. <button> Action 7 </button>
  43. <button disabled> Action 8 (disabled) </button>
  44. <button> Action 9 </button>
  45. <button> Cancel </button>
  46. </menu>
  47. </form>
  48. </body>
  49. </html>