Skip to content

Instantly share code, notes, and snippets.

@argelius

argelius/tabs.html

Last active February 10, 2016 06:43
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save argelius/5949819bd89fbfaeba6e to your computer and use it in GitHub Desktop.
Save argelius/5949819bd89fbfaeba6e to your computer and use it in GitHub Desktop.
Download ZIP
Material tabs
Raw
tabs.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.6/css/onsenui.css">
<link rel="stylesheet" type="text/css" href="https://cdn.rawgit.com/OnsenUI/OnsenUI-dist/2.0.0-beta.6/css/onsen-css-components.css">
<script src="https://cdn.rawgit.com/OnsenUI/OnsenUI-dist/2.0.0-beta.6/js/onsenui.js"></script>
</head>
<body>
<ons-page>
<ons-toolbar>
<div class="left">
<ons-toolbar-button>
<ons-icon icon="md-menu"></ons-icon>
</ons-toolbar-button>
</div>
<div class="center">
My App
</div>
<div class="right">
<ons-toolbar-button>
<ons-icon icon="md-search"></ons-icon>
</ons-toolbar-button>
<ons-toolbar-button>
<ons-icon icon="md-more-vert"></ons-icon>
</ons-toolbar-button>
</div>
</ons-toolbar>
<ons-tabbar position="bottom">
<ons-tab label="Tab 1" active page="tab1.html"></ons-tab>
<ons-tab label="Tab 2" page="tab2.html"></ons-tab>
</ons-tabbar>
</ons-page>
<ons-template id="tab1.html">
<ons-page>
<ons-list>
<ons-list-header>General</ons-list-header>
<ons-list-item>
<div class="list__item__center">
<div class="list__item__title">Profile photo</div>
<div class="list__item__subtitle">Change Google+ profile photo</div>
</div>
</ons-list-item>
<ons-list-item>
<div class="list__item__center">
<div class="list__item__title">Show your status</div>
<div class="list__item__subtitle">Your status is visible to everyone</div>
</div>
</ons-list-item>
<ons-list-header>Settings</ons-list-header>
<ons-list-item>
<div class="list__item__left">
<label class="checkbox">
<input type="checkbox" class="checkbox__input">
<div class="checkbox__checkmark"></div>
</label>
</div>
<div class="list__item__center">
<div class="list__item__title">Notifications</div>
<div class="list__item__subtitle">Allow notifications</div>
</div>
</ons-list-item>
<ons-list-item>
<div class="list__item__left">
<label class="checkbox">
<input type="checkbox" class="checkbox__input">
<div class="checkbox__checkmark"></div>
</label>
</div>
<div class="list__item__center">
<div class="list__item__title">Sound</div>
<div class="list__item__subtitle">Hangouts message</div>
</div>
</ons-list-item>
<ons-list-item>
<div class="list__item__left">
<label class="checkbox">
<input type="checkbox" class="checkbox__input">
<div class="checkbox__checkmark"></div>
</label>
</div>
<div class="list__item__center">
<div class="list__item__title">Video sounds</div>
<div class="list__item__subtitle">Hangouts video call</div>
</div>
</ons-list-item>
<ons-list-item>
<div class="list__item__left">
<label class="checkbox">
<input type="checkbox" checked class="checkbox__input">
<div class="checkbox__checkmark"></div>
</label>
</div>
<div class="list__item__center">
<div class="list__item__title">Invites</div>
<div class="list__item__subtitle">Notify when receiving invites</div>
</div>
</ons-list-item>
</ons-list>
</ons-page>
</ons-template>
<ons-template id="tab2.html">
<ons-page></ons-page>
</ons-template>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment