Ionic2學習筆記(1):新建一個頁面


作者:Grey

原文地址: http://www.cnblogs.com/greyzeng/p/5532323.html

       

       

新建一個頁面:

上一篇中的HelloWorld,我們可以新建一個頁面,並把頁面內容展示出來:

  • 進入項目目錄:

命令:cd MyFirstApp

  • 新建頁面:

命令:ionic g page NewPage

控制台提示一句話:

Don't forget to add an import for new-page.scss in app\themes\app.core.scss:

@import "..\pages\new-page\new-page.scss";

     

我們在項目目錄下找到:.\app\theme\app.core.scss 這個文件,

在里面增加一句:

@import "../pages/new-page/new-page.scss";

     

     

自此,我們就新建了一個頁面,在項目目錄下,你會找到這樣一個文件夾:

     

我們在new-page.html中寫一些東西:

找到.\MyFirstApp\app\app.ts文件,修改app.ts頁面的內容為:

展示頁面的內容:

命令:ionic serve -l,

在Chrome瀏覽器中模擬的效果:

我們還可以在頁面中增加更多的元素,ionic2提供了豐富的組件和樣式供選擇

比如:

修改new-page.html頁面:

重新運行程序:

命令:ionic serve -l

更多樣式:Ionic Component Documentation - Ionic Framework

------

上一篇:Ionic2學習筆記(0):HelloWorld

下一篇:Ionic2學習筆記(2):自定義Component


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM