<ons-page>:每个<ons-page>表示一个页面,类似Android的Activity。
页面包含:头部导航栏、中间内容区、底部工具栏。(非必须存在)
<ons-toolbar> / <ons-bottom-toolbar> 工具条(只位置不同)
<ons-back-button> / <ons-toolbar-button> 按钮
<ons-page ng-controller="xxCtrl">
<ons-toolbar>
<div class="left" ng-click="back()">
<ons-back-button>back</ons-back-button>
</div>
<div class="center">TITLE</div>
<div class="right" ng-click="XX()">
<ons-toolbar-button>
<ons-icon icon="XX">
</ons-toolbar-button>
</div>
</ons-toolbar>
</ons-page>
<ons-tabbar> 导航栏,默认在页面底部
active="true" 默认对应子项为激活状态
<ons-page ng-controller="xxCtrl">
<ons-tabbar var='xxTab' position="top">
<ons-tab page="xx1.html" label="xx1" icon="xx1" active="true"></ons-tab>
<ons-tab page="xx2.html" label="xx2" icon="xx2"></ons-tab>
<ons-tab page="xx3.html" label="xx3" icon="xx3"></ons-tab>
</ons-tabbar>
</ons-page>
<ons-modal> 蒙版
<ons-page ng-controller="xxCtrl">
<ons-modal var="xxModal">
<div>
<span>正在加载...</span>
</div>
</ons-modal>
</ons-page>
<ons-list>
<ons-page ng-controller="xxCtrl">
<ons-list>
<ons-list-header>xx</ons-list-header>
<ons-list-item>xx1</ons-list-item>
<ons-list-item>xx2</ons-list-item>
</ons-list>
</ons-page>
<ons-page ng-controller="xxCtrl">
<ons-scroll>
<ons-list>
<ons-list-item ng-repeat="item in items" ng-click="xx(item);" >
<div>
<span ng-bind="item.**"></span>
</div>
</ons-list-item>
</ons-list>
</ons-scroll>
</ons-page>
<ons-dialog>
<ons-dialog>
...
</ons-dialog>
<script>
ons.ready(function() {
ons.createDialog('xxDialog.html').then(function(dialog) {
dialog.show();
});
});
</script>