<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<script src="../platform/platform.js"></script>
<link rel="import" href="../basic-framed-content/basic-framed-content.html">
<link rel="import" href="basic-modes.html">

<style>
body,
button,
input {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 15px;
}

body {
  margin: 0;
}

basic-framed-content {
  padding: 2em;
}
</style>

</head>

<body unresolved>
<basic-framed-content>
<template is="auto-binding">
  Select mode: <select value="{{choice}}">
    <option value="0">First</option>
    <option value="1">Second</option>
    <option value="2">Third</option>
    <option value="3">Fourth</option>
  </select>
  <button onclick="document.querySelector('#modes').previous()" disabled?="{{!previousEnabled}}">Previous</button>
  <button onclick="document.querySelector('#modes').next()" disabled?="{{!nextEnabled}}">Next</button>
  <basic-modes id="modes" selected="{{choice}}" canGoNext="{{nextEnabled}}" canGoPrevious="{{previousEnabled}}">
    <div>First mode</div>
    <div>Second mode</div>
    <div>Third mode</div>
    <div>Fourth mode</div>
  </basic-modes>
</template>
</basic-framed-content>
</body>

</html>

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<script src="../platform/platform.js"></script>
<link rel="import" href="../basic-framed-content/basic-framed-content.html">
<link rel="import" href="basic-modes.html">

<style>
body,
button,
input {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 15px;
}

body {
  margin: 0;
}

basic-framed-content {
  padding: 2em;
}
</style>

</head>

<body unresolved>
<basic-framed-content>
<template is="auto-binding">
  Select mode: <select value="{{choice}}">
    <option value="0">First</option>
    <option value="1">Second</option>
    <option value="2">Third</option>
    <option value="3">Fourth</option>
  </select>
  <basic-modes id="modes" selected="{{choice}}" canGoNext="{{nextEnabled}}" canGoPrevious="{{previousEnabled}}">
    <div>First mode</div>
    <div>Second mode</div>
    <div>Third mode</div>
    <div>Fourth mode</div>
  </basic-modes>
</template>
</basic-framed-content>
</body>

</html>

Move next/previous example to basic-sequence-navigator.
Move next/previous example to basic-sequence-navigator.
