上一章介紹了OnsenUI一些入門的知識以及它和AngularJS配合的初始化方法。這一章，咱們繼續對這塊內容進行介紹，對OnsenUI提供的組件進行更進一步的學習。
咱們從手機應用布局的最上面開始。手機應用布局最頂端，也就是經常提到的工具欄，是幾乎每個應用都會存在的組件。這么經常出現的組件，OnsenUI當然會提供。<ons-toolbar>，這個就是OnsenUI提供的組件，這個組件使用起來非常的簡單，最常見的使用場景就是<ons-page>下。
除了了解它使用的位置，還要再看它的基本布局。<ons-toolbar>組件分左中右三部分：
從上面的代碼能看出來，<ons-toolbar>的左中右三部分的划分由三個內置樣式類實現。並且左邊的按鈕可以通過<ons-back-button>實現頁面返回上一頁功能，而不必指定路由完成該功能。另外，工具欄左中右三部分的內容可以隨意定制，可以根據自己的項目需要，實現自己想要的任意效果。最后需要提醒大家的是，如果，你在左中右三個樣式類div下直接書寫文本數據，你會發現它的顯示效果不會是上下居中的效果，關於這個問題咱們可以通過樣式來解決，但是，可以通過添加<ons-back-butto>或者<ons-toolbar-button>包裹你顯示的文本來解決。
介紹完了工具欄，咱們再來說一個在項目開發過程中比較常用的組件—側邊欄，也有說法是抽屜布局<ons-sliding-menu>。
側邊欄的使用頻率還是相對來說比較高的，大家經常見到的側邊欄就應該是在左邊。在OnsenUI中，側邊的實現非常簡單，它已經幫你集成了你想要實現的各種效果，你只需要了解其的各個屬性即可。
根據側邊欄的顯示效果，大家應該能想到它的組成應該是兩部分，一部分是主頁面，另一部分應該是側邊欄頁面。OnsenUI提供了兩種方式實現主頁面和側邊欄頁面的聲明。這里咱們直接介紹咱們以后再項目中會使用的方法：
大家應該看到了，在<ons-sliding-menu>里，通過指定main-page和menu-page屬性就可以把主頁面和側邊欄頁面確定。除了上面寫到的side屬性用來定義側邊欄的位置，側邊欄還有其他的屬性用來控制顯示效果。close-on-tap屬性用來定義通過點擊背景自動關閉側邊欄。swipeable屬性用來定義側邊欄是否會響應你的滑動開關側邊欄，當然這個屬性需要配合另外兩個屬性才能有效果，第一個：swipe-target-width屬性用來定義側邊欄的顯示最大展開寬度，第二個：max-slide-distance屬性用來定義在主頁面滑出側邊欄的最大滑動邊距。最后給大家介篩一個與顯示動畫效果相關的。相信大家見過的側邊欄應該有多種形式，當然，OnsenUI也提供了三種，可用值為reveal（默認）push和overlay。大家看到名字應該能想到是什么樣的顯示效果了，那還等什么呢，趕緊去試試吧！
結尾咱們介紹一個和工具欄具有同等地位的組件，為什么要和工具欄組件比較呢？因為，工具欄是顯示在頁面的頂端，而它顯示在頁面的底部。它就是大家應該天天會接觸的<ons-tabbar>。
選項卡欄由<ons-tabbar>組件和<ons-tab>組件組成。通常一個標簽欄有三到五個項目，它們與圖標和標簽一起顯示。每個選項卡欄項目分配到不同的頁面。
要將選項卡欄放置到應用中，請放置<ons-tabbar>元素。一個<ons-tabbar>元素只接受<ons-tab>的元素數量。選項卡欄項目可以有一個icon屬性和一個label屬性。對於icon屬性，請指定<ons-icon>元素中使用的相同圖標名稱。示例代碼如下：
剛才咱們說了，<ons-tabbar>是顯示在頁面的底部的。但是這種說法不是絕對的，咱們可以通過修改標簽欄的屬相，來修改它的顯示位置，這個屬性就是position，它的值默認為bottom，你可以通過修改為top，讓你的標簽欄顯示在頁面的頂部。關於標簽欄里的布局設置，大家可以根據自己的需要，隨意調整。
關於標簽欄里的子項—<ons-tab>，可以通過指定page屬性，來實現點擊某一個子項的時候，跳轉到對應頁面。並且active屬性可以設置哪一個子項默認是激活狀態。
今天咱們從一個頁面的頂部，中間主頁面，一直到底部標簽欄，進行了比較詳細的介紹，結合前一章項目的搭建。現在的你就可以去試試我上面說的這些組件了，希望你能發現更多的組件屬相，加油！