標籤：family todo margin center blog his item 項目 weight
ionic--基於AngularJS的app架構
1 安裝ionic
1.HBuilder建立APP項目，匯入ionic的css，js（fonts）檔案。
2.匯入ionic.css和ionic.bundle.js檔案。
2 使用ionic架構提供的樣式進行APP製作
1.HTML代碼
<body ng-app="todo"> <ion-side-menus> <!-- 中心內容 --> <ion-side-menu-content> <ion-header-bar class="bar-dark"> <h1 class="title">Ionic</h1> </ion-header-bar> <ion-content> <div class="list card"> <div class="item item-avatar"> <img src="../img/222.jpg"/> <h2>Ionic Demo</h2> <p>LJY</p> </div> <div class="item item-image"> <img src="../img/2852185939109769629.jpg"> </div> <a class="item assertive" href="#"> Try Ionic </a></div> </ion-content> </ion-side-menu-content> <!-- 左側菜單 --> <ion-side-menu side="left"> <ion-header-bar class="bar-dark"> <h1 class="title">Projects</h1> </ion-header-bar> <div class="list"> <div class="item item-divider"> 這是左側菜單 </div> <a class="item" href="#"> This is page1 </a><a class="item" href="#"> This is page2 </a><a class="item" href="#"> This is page3 </a></div> </ion-side-menu> </ion-side-menus><script type="text/javascript" src="../js/app.js"></script> </body>
2.js
angular.module(‘todo‘, [‘ionic‘])
這樣就實現了簡單的首頁和側邊菜單的製作，更多具體ionic樣式可以參考說明文檔。
ionic構建APP--簡單操作實現APP製作
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
