ionic UI(四)ionic2 framework - basic and components and native
发布时间:2011-06-23 13:56:14 文章来源:www.iduyao.cn 采编人员:星星草
ionic UI(4)ionic2 framework - basic and components and native
ionic UI(4)ionic2 framework - basic and components and native
Just create a tutorial project with TypeScript
> ionic start myionic2project2 tutorial --v2 --ts
> ionic serve
Visit the page
http://localhost:8100/
Error Message:
ERROR in [default] /Users/carl/work/hybrid/myionic2project2/node_modules/angular2/src/facade/promise.d.ts:1:9
Cannot re-export name that is not defined in the module.
Solution:
No solution yet
waiting this website to upgrade https://github.com/driftyco/ionic2-app-base. angular2 is still beta.
1 Project Structure
app/app.ts is the entry point for our app.
Definition about App
@App({
templateUrl: 'build/app.html',
config: {} // http://ionicframework.com/docs/v2/api/config/Config/
})
./app/app.html - is the main template HTML.
2 Adding Pages
<ion-nav id="nav" [root]="rootPage" #content swipe-back-enabled="false"></ion-nav>
[root] means the first page
In the TS code
rootPage: any = HelloIonicPage;
This page is defined here
import {HelloIonicPage} from './pages/hello-ionic/hello-ionic';
Each page has its own folder. It contains .html, .scss and .ts
import {Page} from 'ionic-angular';
@Page({
templateUrl: 'build/pages/hello-ionic/hello-ionic.html'
})
export class HelloIonicPage {}
@Page decorator from angularJS, Every page should have a html template and a class.
Navigation bar
<ion-navbar *navbar>
Navigating to Pages
this.nav.push(), it works like a simple stack.
http://ionicframework.com/docs/v2/components/#navigation
UI components
http://ionicframework.com/docs/v2/components/
3 Components
http://ionicframework.com/docs/v2/components/
Action Sheets - option buttons
Alert - Basic alert information,
Prompt Alert Information - ask user to input
Confirm Alert
Radio Alert - Select the option you want
Checkbox Alert - Select the options you want
Badges - show the number, like how many likes
Buttons - Buttons in Components
Cards - Display contents - list ; Images list; Background images list;
Checkbox -
Grid -
Icons - list all the icons
http://ionicons.com/
Inputs - floating label input;
Lists - List Dividers; icons List - setting pages; avatar list with small icons; multiple line lists with small icons; Thumbnail list with small icons and buttons
Menus -
Modals - use for login or sign up, it is a new page
Navigation -
Radio -
SearchBar -
Segments - it looks like tabs
Select - Slides for the first few screens.
Tabs - icon tabs; icons and texts;
Badges - show numbers on the tabs icons
Toggle - checkbox
Toolbar - can be used as a header of our apps; buttons in toolbar; segments and buttons in toolbar;
4 Native
ActionSheet - native options;
App Availability - check if an app is installed on this mobile device;
Badge - badge like unread message on the icon of application;
Barcode Scanner - open camera and scan the barcode and return the data;
BLE - Support for iOS and Android - oh.
Calendar - Add event to the calendar
Camera - photo or video
Clipboard -
Contacts - manage and access contacts
Device - get device UUID and other device information
Geolocation - GPS and related GEO information
Image Picker -
Local Notifications -
Push - push notification
Splash screen -
App Rate - rate your app plugin
App Version - read the app version
Base64 to Gallery - save base64 data to photos?
Battery Status -
Date Picker -
Device Motion -
Device Orientation - compass
Dialogs - native dialog
Facebook -
Flashlight -
Globalization -
Hotspot -
Keyboard -
Navigator -
SMS - text message
StatusBar -
Toast -
TouchID -
Vibration -
References:
http://sillycat.iteye.com/blog/2285319
友情提示:
信息收集于互联网,如果您发现错误或造成侵权,请及时通知本站更正或删除,具体联系方式见页面底部联系我们,谢谢。
其他相似内容:
-
c# 类库打包成COM类型库时在vs命令行怎么写
类库打包成COM类型库(在vs命令行中怎么写啊)
路径和格式怎么写?
假如路径是:F:\netTest...
-
int
c#里的int是多少位???????
------解决方案--------------------
int 的值用 31 位来表示,第三十二位为符号位。,其范围从负 2,147,483...
-
求各位大侠帮个忙
做的是一个项目经理评分系统
如何把第一个窗体点击的人的信息显示到第二个窗体里面
------解决方案---------...
-
【asp.net三层怎样入手学习开发?】
我现在搞asp.net都是面向过程的.没有分层
请问怎样做到 mvc ??真正的面向对象的开发??
请问...
-
.net framework 2.0 service pack 1 无法卸载,怎么办
总是提示说安装是发生严重错误,并且说it will affect other application that...
-
Message.Show()的窗体美化
每次弹出的窗口都是那么的单调有没有什么方法能换一下弹出窗体的颜色或者是插一张图片
------解决方...
-
安装vs2010出错,求老师解答!!!
rt
安装vs2010是出错
C:\Users\Administrator\AppData\Local\Temp\SIT32027.tmp\deffactory...
-
怎么做一个转盘出来啊,请教各位大虾
在ASP.NET的页面中怎么弄一个转盘出来啊?
------解决方案--------------------
什么转盘
---...
-
jquery each遍历赋值不上呢
<ul id="myul">
<li><a id="2258">第一个</a></li>
<li><a id="2258">第二个</a></li>
<li>...
-
C#发布问题
这个是怎么回事啊
我在那个debug下面有那个DevExpress.XtraLayout.v9.1.dll这个了 为什么还是报这个错
------解决...