<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Action menu</title>
<meta name="description" content="Presenting a list of actions related to the App content">
<link rel="stylesheet" href="../action_menu.css">
<!--
- This <style> element is only used for the example code;
- it is not required for the real use case.
-->
<style type="text/css">
html, body {
font-family: sans-serif;
margin: 0;
padding: 0;
font-size: 10px;
background-color: #fff;
}
body {
background: none;
}
</style>
</head>
<body role="application">
<p dir="ltr">
<label>
<input type="checkbox"
onchange="document.documentElement.dir = this.checked ? 'rtl' : 'ltr'">
RTL mode
</label>
</p>
<form role="dialog" data-type="action" onsubmit="return false;">
<header>Title</header> <!-- this header is optional -->
<menu type="toolbar">
<button>Action 1</button>
<button disabled> Action 2 (disabled) </button>
<button> Action 3 </button>
<button> Action 4 </button>
<button disabled> Action 5 (disabled) </button>
<button> Action 6 </button>
<button> Action 7 </button>
<button disabled> Action 8 (disabled) </button>
<button> Action 9 </button>
<button> Cancel </button>
</menu>
</form>
</body>
</html>