Example/public/index.html

<!doctype html>
<html>
<head>
  <meta charset="utf-8" />
  <link rel="stylesheet" href="onsenui.css" />
  <link rel="stylesheet" href="onsen-css-components.css" />
  <script src="helper.js"></script>
  <script src="out.js" defer></script>
</head>
<body>
  <ons-page>
    <ons-tabbar>

      <ons-page slot="pages">
        <ons-toolbar slot="toolbar">
          Page 1
        </ons-toolbar>

        <p>The components on this page were written with idris-web-components.</p>

        <p>This includes the toolbar at the top and the tabbar and tabs at the bottom.</p>

        <p>Click on a tab to change pages.</p>
      </ons-page>

      <ons-page slot="pages">
        <ons-toolbar slot="toolbar">
          Page 2
        </ons-toolbar>
        <p>Try inspecting the tab of the current page in your browser dev tools.</p>

        <p>Notice that it has the <code>active</code> attribute.</p>

        <p>Now click on a different tab and notice <code>active</code> has been removed.</p>

        <p>This is handled by parent-child communication between the tabbar and tabs components.</p>
      </ons-page>

      <ons-page slot="pages">
        <ons-toolbar slot="toolbar">
          Page 3
        </ons-toolbar>
        <p>As well as attributes and listeners, other features that can be added to Custom Elements with
        idris-web-components include:</p>

        <ul>
          <li>Shadow DOM templates (<code>Template</code>)</li>
          <li>The ability to depend on the functionality of another Custom Element (<code>Depend</code>)</li>
          <li>Internal state for use in Idris, similar to the React State hook (<code>State</code>)</li>
          <li>Properties that do some side-effect when their value is changed (<code>PropEffect</code>)</li>
        </ul>

        <p>For a full list of features, see the <code>CustomElement</code> data type in
        <a target="_blank" href="https://github.com/emccorson/idris-web-components/blob/master/CustomElement/Types.idr">CustomElement/Types.idr</a>.</p>
      </ons-page>

      <ons-tab class="tabbar__item" slot="tabs">page 1</ons-tab>
      <ons-tab class="tabbar__item" slot="tabs">page 2</ons-tab>
      <ons-tab class="tabbar__item" slot="tabs">page 3</ons-tab>
    </ons-tabbar>
  </ons-page>
  <script>
    window.e = document.querySelector('eric-element');
  </script>
</body>
</html>