<ons-page>
  <ons-toolbar>
    <div class="center">Lebaran Virtual</div>
  </ons-toolbar>

  <ons-tabbar swipeable position="auto">
    <ons-tab page="tab1.html" label="Saudara" icon="md-home, material:md-home" badge="7" active>
    </ons-tab>
    <ons-tab page="tab2.html" label="Teman" icon="md-favorite" active-icon="md-face">
    </ons-tab>
    <ons-tab page="tab3.html" label="Mantan" icon="md-delete" active-icon="md-face">
    </ons-tab>
  </ons-tabbar>
</ons-page>

<template id="tab1.html">
  <ons-page id="Tab1">
    
    <ons-page>
      <ons-list>
        <ons-list-item modifier="chevron" tappable>Sekudux City</ons-list-item>
        <ons-list-item modifier="chevron" tappable>Lokal Singkawang</ons-list-item>
        <ons-list-item modifier="chevron" tappable>Amerika Selatan</ons-list-item>
        <ons-list-item modifier="chevron" tappable>Arab Saudi (Gurun Pasir)</ons-list-item>
        <ons-list-item modifier="chevron" tappable>Kampong Hubei</ons-list-item>
      </ons-list>
    </ons-page>

  </ons-page>
</template>

<template id="tab2.html">
  <ons-page id="Tab2">
    <ons-page>
      <ons-list>
        <ons-list-item modifier="chevron" tappable>dr. Sogol, Sp.pd</ons-list-item>
        <ons-list-item modifier="chevron" tappable>Leni Geboy</ons-list-item>
        <ons-list-item modifier="chevron" tappable>Suparno</ons-list-item>
        <ons-list-item modifier="chevron" tappable>Sumpeno</ons-list-item>
        <ons-list-item modifier="chevron" tappable>Aliang Liongfu</ons-list-item>
        <ons-list-item modifier="chevron" tappable>Amok Trump</ons-list-item>
        <ons-list-item modifier="chevron" tappable>JokoSungaiWie</ons-list-item>
      </ons-list>
    </ons-page>
  </ons-page>
</template>

<template id="tab3.html">
  <ons-page id="Tab3">
    <ons-page>
      <ons-list>
        <ons-list-item modifier="chevron" tappable>Mantan ke-50</ons-list-item>
        <ons-list-item modifier="chevron" tappable>Ako warung Depan</ons-list-item>
        <ons-list-item modifier="chevron" tappable>Bodo tapi Kaye</ons-list-item>
        <ons-list-item modifier="chevron" tappable>Daan tepakai</ons-list-item>
        <ons-list-item modifier="chevron" tappable>Tauke Lelong</ons-list-item>
        <ons-list-item modifier="chevron" tappable>Deni Bank Unan</ons-list-item>
      </ons-list>
    </ons-page>
  </ons-page>
</template>
document.addEventListener('init', function(event) {
  var page = event.target;

  if (page.id === 'page1') {
    page.querySelector('#push-button').onclick = function() {
      document.querySelector('#myNavigator').pushPage('page2.html', {data: {title: 'Page 2'}});
    };
  } else if (page.id === 'page2') {
    page.querySelector('ons-toolbar .center').innerHTML = page.data.title;
  }
});

External CSS

  1. https://unpkg.com/onsenui/css/onsenui.css
  2. https://unpkg.com/onsenui/css/onsen-css-components.css

External JavaScript

  1. https://unpkg.com/onsenui/js/onsenui.js
  2. https://cdnjs.cloudflare.com/ajax/libs/onsen/2.10.10/js/onsenui.min.js