add ionic-preview-app

README.md

@@ -5,10 +5,23 @@
 
 *您可以点击小标题跳转到相应的ionic2英文文档。*
 
+## 前言
+
+声明：本仓库中的例子程序使用了ionic官方的例子[ionic-preview-app](https://github.com/driftyco/ionic-preview-app)。
+
+运行：
+
+- `git clone [email protected]:Raineye/ionic2.git`
+- `cd ionic-preview-app`
+- `npm install`
+- `ionic serve`
+
+
+
 ## [ActionSheet](http://ionicframework.com/docs/v2/api/components/action-sheet/ActionSheet/)
-ActionSheet是一个对话框，让用户选择一个选项。而且用户必须要选择其中一个选项才能恢复与应用程序的交互（点击背景会执行`cancle`的事件）。当然也可以利用背景或者后退键来取消对话框从而恢复和程序的交互。
+ActionSheet是一个对话框，让用户选择一个选项。而且用户必须要选择其中一个选项才能恢复与应用程序的交互（点击背景会执行`cancel`的事件）。当然也可以利用背景或者后退键来取消对话框从而恢复和程序的交互。
 
-ActionSheet会从一个数组创建它的按钮选项。每一个按钮都拥有一些属性，例如`text` `handler` `role` 等等。如果`handler`返回`false`时，ActionSheet将不会被销毁。ActionSheet还可以选择有一个标题和副标题。
+ActionSheet会从一个`button`数组创建它的按钮选项。每一个按钮都拥有一些属性，例如`text` `handler` `role` 等等。如果`handler`返回`false`时，ActionSheet将不会消失。ActionSheet还可以选择有一个标题和副标题。
 
 如果有一个button的`role`被设置为`cancel`那么这个按钮不管位于按钮数组的哪个位置它都会位于底部。ionic官方建议`destructive`类型的按钮最好位于数组的第一个位置。另外，如果ActionSheet是由于点击背景而被取消的，那么它将会执行和`cancle`类型的按钮点击一样的事件。
 

app/app.html

@@ -0,0 +1,36 @@
+<img src="img/android-statusbar-blue.png" style="display:none" id="md-only">
+<img src="img/android-statusbar-red.png" style="display:none" id="md-tabs-icon">
+<img src="img/android-statusbar-purple.png" style="display:none" id="md-tabs-icon-text">
+<img src="img/ios-statusbar.png" style="display:none" id="ios-only">
+<img src="img/wp-statusbar.png" style="display:none" id="wp-only">
+
+
+<ion-menu [content]="content" id="leftMenu" side="left">
+
+  <ion-toolbar primary>
+    <ion-title>Menu</ion-title>
+  </ion-toolbar>
+
+  <ion-content>
+    <!-- Display the side menu pages if it is production -->
+    <ion-list *ngIf="isProductionMode">
+      <button ion-item *ngFor="#p of pages" (click)="openPage(p)">
+        {{p.title}}
+      </button>
+
+      <button ion-item menuClose detail-none>
+        Close Menu
+      </button>
+    </ion-list>
+
+    <!-- Display all of the sections if this isn't production -->
+    <ion-list *ngIf="!isProductionMode">
+      <button ion-item *ngFor="#route of routes" menuClose (click)="openPage(route)" >
+        {{ route.path | displayRoute }}
+      </button>
+    </ion-list>
+  </ion-content>
+
+</ion-menu>
+
+<ion-nav id="nav" [root]="rootPage" #content></ion-nav>

app/app.ts

@@ -0,0 +1,224 @@
+import {NgZone} from 'angular2/core';
+import {RouteConfig, Location} from 'angular2/router';
+import {App, IonicApp, Platform, ActionSheet, MenuController} from 'ionic-angular';
+import {Page, Config, Events} from 'ionic-angular';
+import {PageOne, PageTwo, PageThree} from './pages/menus/menus';
+import {DisplayRoutePipe} from './pipes/display-route';
+import * as helpers from './directives/helpers';
+
+// Change the import if you want to change the first page, for example:
+// import { ImagePage as rootPage } from './pages/cards/cards';
+import { BasicPage as rootPage } from './pages/action-sheets/action-sheets';
+
+
+// Import all of the pages in order to add them to the RouteConfig
+import * as actionSheets from './pages/action-sheets/action-sheets';
+import * as alerts from './pages/alerts/alerts';
+import * as badges from './pages/badges/badges';
+import * as buttons from './pages/buttons/buttons';
+import * as cards from './pages/cards/cards';
+import * as checkboxes from './pages/checkboxes/checkboxes';
+import * as grid from './pages/grid/grid';
+import * as icons from './pages/icons/icons';
+import * as inputs from './pages/inputs/inputs';
+import * as lists from './pages/lists/lists';
+import * as menus from './pages/menus/menus';
+import * as modals from './pages/modals/modals';
+import * as navigation from './pages/navigation/navigation';
+import * as radios from './pages/radios/radios';
+import * as ranges from './pages/ranges/ranges';
+import * as searchbars from './pages/searchbars/searchbars';
+import * as segments from './pages/segments/segments';
+import * as selects from './pages/selects/selects';
+import * as slides from './pages/slides/slides';
+import * as tabs from './pages/tabs/tabs';
+import * as toggles from './pages/toggles/toggles';
+import * as toolbar from './pages/toolbar/toolbar';
+
+const ROUTES = [
+  { path: '/action-sheets/basic', component: actionSheets.BasicPage, useAsDefault: true },
+
+  { path: '/alerts/basic', component: alerts.BasicPage },
+  { path: '/alerts/checkbox', component: alerts.CheckboxPage },
+  { path: '/alerts/confirm', component: alerts.ConfirmPage },
+  { path: '/alerts/prompt', component: alerts.PromptPage },
+  { path: '/alerts/radio', component: alerts.RadioPage },
+
+  { path: '/badges/basic', component: badges.BasicPage },
+
+  { path: '/buttons/basic', component: buttons.BasicPage },
+  { path: '/buttons/block', component: buttons.BlockPage },
+  { path: '/buttons/clear', component: buttons.ClearPage },
+  { path: '/buttons/components', component: buttons.ComponentsPage },
+  { path: '/buttons/fab', component: buttons.FabPage },
+  { path: '/buttons/full', component: buttons.FullPage },
+  { path: '/buttons/icons', component: buttons.IconsPage },
+  { path: '/buttons/outline', component: buttons.OutlinePage },
+  { path: '/buttons/round', component: buttons.RoundPage },
+  { path: '/buttons/sizes', component: buttons.SizesPage },
+
+  { path: '/cards/advanced-map', component: cards.AdvancedMapPage },
+  { path: '/cards/advanced-social', component: cards.AdvancedSocialPage },
+  { path: '/cards/advanced-weather', component: cards.AdvancedWeatherPage },
+  { path: '/cards/background', component: cards.BackgroundPage },
+  { path: '/cards/basic', component: cards.BasicPage },
+  { path: '/cards/header', component: cards.HeaderPage },
+  { path: '/cards/image', component: cards.ImagePage },
+  { path: '/cards/list', component: cards.ListPage },
+
+  { path: '/checkboxes/basic', component: checkboxes.BasicPage },
+
+  { path: '/grid/basic', component: grid.BasicPage },
+
+  { path: '/icons/basic', component: icons.BasicPage },
+
+  { path: '/inputs/basic', component: inputs.BasicPage },
+  { path: '/inputs/fixed-inline', component: inputs.FixedInlinePage },
+  { path: '/inputs/floating', component: inputs.FloatingPage },
+  { path: '/inputs/inline', component: inputs.InlinePage },
+  { path: '/inputs/inset', component: inputs.InsetPage },
+  { path: '/inputs/placeholder', component: inputs.PlaceholderPage },
+  { path: '/inputs/stacked', component: inputs.StackedPage },
+
+  { path: '/lists/avatar', component: lists.AvatarPage },
+  { path: '/lists/basic', component: lists.BasicPage },
+  { path: '/lists/dividers', component: lists.DividersPage },
+  { path: '/lists/headers', component: lists.HeadersPage },
+  { path: '/lists/icon', component: lists.IconPage },
+  { path: '/lists/inset', component: lists.InsetPage },
+  { path: '/lists/multiline', component: lists.MultilinePage },
+  { path: '/lists/no-lines', component: lists.NoLinesPage },
+  { path: '/lists/sliding', component: lists.SlidingPage },
+  { path: '/lists/thumbnail', component: lists.ThumbnailPage },
+
+  { path: '/menus/basic', component: menus.BasicPage },
+
+  { path: '/modals/basic', component: modals.BasicPage },
+
+  { path: '/navigation/basic', component: navigation.BasicPage },
+
+  { path: '/radios/basic', component: radios.BasicPage },
+
+  { path: '/ranges/basic', component: ranges.BasicPage },
+
+  { path: '/searchbars/basic', component: searchbars.BasicPage },
+
+  { path: '/segments/basic', component: segments.BasicPage },
+
+  { path: '/selects/basic', component: selects.BasicPage },
+
+  { path: '/slides/basic', component: slides.BasicPage },
+
+  { path: '/tabs/badges', component: tabs.BadgesPage },
+  { path: '/tabs/basic', component: tabs.BasicPage },
+  { path: '/tabs/icon', component: tabs.IconPage },
+  { path: '/tabs/icon-text', component: tabs.IconTextPage },
+
+  { path: '/toggles/basic', component: toggles.BasicPage },
+
+  { path: '/toolbar/basic', component: toolbar.BasicPage },
+  { path: '/toolbar/buttons', component: toolbar.ButtonsPage },
+  { path: '/toolbar/searchbar', component: toolbar.SearchbarPage },
+  { path: '/toolbar/segment', component: toolbar.SegmentPage }
+];
+
+@App({
+  templateUrl: './build/app.html',
+  config: {
+    platforms: {
+      android: {
+        activator: 'ripple',
+        backButtonIcon: 'md-arrow-back'
+      }
+    }
+  },
+  pipes: [DisplayRoutePipe]
+})
+@RouteConfig(ROUTES)
+class DemoApp {
+  isProductionMode: boolean = false;
+  rootPage: any;
+  nextPage: any;
+  currentPlatform: string = "ios";
+
+  pages = [
+    { title: 'Home', component: PageOne },
+    { title: 'Friends', component: PageTwo },
+    { title: 'Events', component: PageThree }
+  ];
+  routes = ROUTES;
+
+  constructor(
+    private app: IonicApp,
+    private platform: Platform,
+    private config: Config,
+    private menu: MenuController,
+    private location: Location,
+    private zone: NgZone) {
+
+    this.menu.enable(true);
+  }
+
+  ngAfterContentInit() {
+    // production-only code
+    // production is false unless viewed on the docs
+    // http://ionicframework.com/docs/v2/components/
+    // ------------------------------------------------------------
+
+    if (this.platform.query("production") === "true") {
+      this.isProductionMode = true;
+
+      // Platform is ios by default
+      // only change it if android or windows
+      if (this.platform.is("android")) {
+        this.currentPlatform = "android";
+      } else if (this.platform.is("windows")) {
+        this.currentPlatform = "windows";
+      }
+
+      if (helpers.hasScrollbar() === true) {
+        setTimeout(function() {
+          var body = document.getElementsByTagName('body')[0];
+          body.className = body.className + ' has-scrollbar';
+        }, 500);
+      }
+
+      window.parent.postMessage(this.currentPlatform, "*");
+      window.addEventListener('message', (e) => {
+        this.zone.run(() => {
+          if (e.data) {
+            var data;
+            try {
+              data = JSON.parse(e.data);
+            } catch (e) {
+              console.error(e);
+            }
+
+            if (data.hash) {
+              this.nextPage = helpers.getPageFor(data.hash.replace('#', ''));
+              if (data.hash !== 'menus') {
+                this.menu.enable(false);
+              }
+            } else {
+              this.nextPage = rootPage;
+            }
+
+            let nav = this.app.getComponent('nav');
+            helpers.debounce(nav.setRoot(this.nextPage), 60, false);
+          }
+        });
+      });
+    }
+  }
+
+  openPage(page) {
+    // close the menu when clicking a link from the menu
+    this.menu.close();
+
+    // Reset the content nav to have just this page
+    // we wouldn't want the back button to show in this scenario
+    let nav = this.app.getComponent('nav');
+    helpers.debounce(nav.setRoot(page.component), 60, false);
+  }
+
+}