在 Day 3 Route & Menu 的基礎上，我今天想要做個 Grid Menu 做個練習，類似下圖:

建立專案

ionic start demo3 tabs

建立頁面的指令

ionic generate page main-menu

他主要會幫你建立
demo3/src/app/main-menu/main-menu-routing.module.ts
demo3/src/app/main-menu/main-menu.module.ts
demo3/src/app/main-menu/main-menu.page.html
demo3/src/app/main-menu/main-menu.page.scss
demo3/src/app/main-menu/main-menu.page.spec.ts
demo3/src/app/main-menu/main-menu.page.ts
需要注意的應該是建立檔案的位置，他的起始使從 app 之後開始，然後會幫你建立一個資料夾，另外，他會幫你在 app-routing.module.ts 加入 route。

Tabs 加入 Main Menu Page

把剛剛自動加入在 app-routing.module.ts 的 main-menu 的 route 移到 tabs-routing.module.ts 中，這邊額外注意一下相對路徑。
然後把 path: '' 的 redirectTo 設置為 '/tabs/main-menu' 設置起始頁面。

接著在 tabs.html 加入 MainMenu 的 ico-tab-bar 的原件。

基本上這樣就加好了。

Main Menu 實作

先定義好我們的 MenuItemModel

然後在 main-menu.page.ts 先把資料準備好

然後在 main-menu.page.html 中用 ngFor 把所有的 Menu Item Render 出來。

最後 css 調一下。

最後在用指令建立所有的頁面

ionic generate page music
ionic generate page flight
ionic generate page bus
ionic generate page shopping
ionic generate page eat
ionic generate page social
ionic generate page weather
ionic generate page stock
ionic generate page mail

最後的成品

這邊最主要的就是使用 ion-grid、ion-row、ion-col 就是他的 Grid 的特性，1 row 有 12 格的概念。
因為我一直在想怎麼三欄的排列出來，本來想要除以3跑兩層迴圈，又卡在 ion-row 的加入問題。
有了 Grid 這個特性，基本上我只要在 ion-col size 設置他佔多少格就好了。
最後的成品圖就是三欄我就把 ion-col size="4"

兩欄，我就把 size="6"

四欄，我就把 size="3"