Skip to content

Instantly share code, notes, and snippets.

@argelius

argelius/step4.html

Last active January 24, 2016 13:57
Show Gist options
  • Save argelius/fc274a55f89be803a2b5 to your computer and use it in GitHub Desktop.
Save argelius/fc274a55f89be803a2b5 to your computer and use it in GitHub Desktop.
Download ZIP
Adding tabs
Raw
step4.html
<!doctype html>
<html>
<head>
<link href='https://fonts.googleapis.com/css?family=Roboto:400,300italic,300,500,400italic,500italic,700,700italic' rel='stylesheet' type='text/css'>
<link rel="stylesheet" type="text/css" href="https://cdn.rawgit.com/OnsenUI/OnsenUI-dist/2.0.0-beta.5/css/onsenui.css">
<link rel="stylesheet" type="text/css" href="https://cdn.rawgit.com/OnsenUI/OnsenUI-dist/2.0.0-beta.5/css/onsen-css-components.css">
<script src="https://cdn.rawgit.com/OnsenUI/OnsenUI-dist/2.0.0-beta.5/js/onsenui.js"></script>
</head>
<body>
<ons-page modifier="material">
<ons-toolbar modifier="material noshadow">
<div class="left">
<ons-toolbar-button modifier="material">
<ons-icon icon="md-menu"></ons-icon>
</ons-toolbar-button>
</div>
<div class="center">
Fish tank
</div>
<div class="right">
<ons-toolbar-button modifier="material">
<ons-icon icon="md-search"></ons-icon>
</ons-toolbar-button>
<ons-toolbar-button modifier="material">
<ons-icon icon="md-more-vert"></ons-icon>
</ons-toolbar-button>
</div>
</ons-toolbar>
<ons-tabbar modifier="material" position="top" animation="slide">
<ons-tab label="Animals" active page="animals.html"></ons-tab>
<ons-tab label="Water" page="water.html"></ons-tab>
</ons-tabbar>
</ons-page>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment