上一章介绍了OnsenUI一些入门的知识以及它和AngularJS配合的初始化方法。这一章,咱们继续对这块内容进行介绍,对OnsenUI提供的组件进行更进一步的学习。
咱们从手机应用布局的最上面开始。手机应用布局最顶端,也就是经常提到的工具栏,是几乎每个应用都会存在的组件。这么经常出现的组件,OnsenUI当然会提供。<ons-toolbar>,这个就是OnsenUI提供的组件,这个组件使用起来非常的简单,最常见的使用场景就是<ons-page>下。
除了了解它使用的位置,还要再看它的基本布局。
从上面的代码能看出来,
介绍完了工具栏,咱们再来说一个在项目开发过程中比较常用的组件—侧边栏,也有说法是抽屉布局<ons-sliding-menu>。
侧边栏的使用频率还是相对来说比较高的,大家经常见到的侧边栏就应该是在左边。在OnsenUI中,侧边的实现非常简单,它已经帮你集成了你想要实现的各种效果,你只需要了解其的各个属性即可。
根据侧边栏的显示效果,大家应该能想到它的组成应该是两部分,一部分是主页面,另一部分应该是侧边栏页面。OnsenUI提供了两种方式实现主页面和侧边栏页面的声明。这里咱们直接介绍咱们以后再项目中会使用的方法:
大家应该看到了,在
结尾咱们介绍一个和工具栏具有同等地位的组件,为什么要和工具栏组件比较呢?因为,工具栏是显示在页面的顶端,而它显示在页面的底部。它就是大家应该天天会接触的
要将选项卡栏放置到应用中,请放置元素。一个元素只接受的元素数量。选项卡栏项目可以有一个icon属性和一个label属性。对于icon属性,请指定元素中使用的相同图标名称。示例代码如下:
来源: http://www.cnblogs.com/jerehedu/p/6604840.html