mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2025-08-19 19:57:22 +08:00
chore(demos): add a demo for FAB
This commit is contained in:
Dan Bucholtz
@ -6,12 +6,11 @@
|
||||
"author": "Ionic Team <hi@ionic.io> (http://ionic.io)",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"ionic-angular": "2.0.0-beta.11-201609161747",
|
||||
"ionicons": "3.0.0",
|
||||
"rxjs": "5.0.0-beta.12"
|
||||
"@ionic/storage": "^1.0.3",
|
||||
"ionic-angular": "nightly",
|
||||
"ionicons": "^3.0.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@angular/compiler-cli": "0.6.2",
|
||||
"typescript": "rc"
|
||||
"typescript": "^2.0.3"
|
||||
}
|
||||
}
|
||||
|
||||
30
demos/src/fab/app.component.ts
Normal file
30
demos/src/fab/app.component.ts
Normal file
@ -0,0 +1,30 @@
|
||||
import { Component } from '@angular/core';
|
||||
import { FabContainer } from 'ionic-angular';
|
||||
|
||||
@Component({
|
||||
templateUrl: 'page.html'
|
||||
})
|
||||
export class ApiDemoPage {
|
||||
array: number[] = [];
|
||||
|
||||
add() {
|
||||
this.array.push(1);
|
||||
}
|
||||
|
||||
clickMainFAB() {
|
||||
console.log('Clicked open social menu');
|
||||
}
|
||||
|
||||
openSocial(network: string, fab: FabContainer) {
|
||||
console.log('Share in ' + network);
|
||||
fab.close();
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@Component({
|
||||
template: '<ion-nav [root]="root"></ion-nav>'
|
||||
})
|
||||
export class ApiDemoApp {
|
||||
root = ApiDemoPage;
|
||||
}
|
||||
@ -1,12 +1,11 @@
|
||||
import { NgModule } from '@angular/core';
|
||||
import { IonicApp, IonicModule } from 'ionic-angular';
|
||||
import { ApiDemoApp, ApiDemoPage, CleanLocalDataPipe } from './app.component';
|
||||
import { ApiDemoApp, ApiDemoPage } from './app.component';
|
||||
|
||||
@NgModule({
|
||||
declarations: [
|
||||
ApiDemoApp,
|
||||
ApiDemoPage,
|
||||
CleanLocalDataPipe
|
||||
ApiDemoPage
|
||||
],
|
||||
imports: [
|
||||
IonicModule.forRoot(ApiDemoApp)
|
||||
@ -17,3 +16,4 @@ import { ApiDemoApp, ApiDemoPage, CleanLocalDataPipe } from './app.component';
|
||||
]
|
||||
})
|
||||
export class AppModule {}
|
||||
|
||||
72
demos/src/fab/page.html
Normal file
72
demos/src/fab/page.html
Normal file
@ -0,0 +1,72 @@
|
||||
<ion-header>
|
||||
<ion-toolbar>
|
||||
<ion-title>Floating Action Buttons</ion-title>
|
||||
</ion-toolbar>
|
||||
</ion-header>
|
||||
|
||||
<ion-content fullscreen>
|
||||
<div f></div>
|
||||
<div f></div>
|
||||
<div f *ngFor="let a of array"></div>
|
||||
|
||||
<ion-fab top right edge #fab1>
|
||||
<button ion-fab mini (click)="clickMainFAB()"><ion-icon name="add"></ion-icon></button>
|
||||
<ion-fab-list>
|
||||
<button ion-fab (click)="openSocial('facebook', fab1)"><ion-icon name="logo-facebook"></ion-icon></button>
|
||||
<button ion-fab (click)="openSocial('twitter', fab1)"><ion-icon name="logo-twitter"></ion-icon></button>
|
||||
<button ion-fab (click)="openSocial('vimeo', fab1)"><ion-icon name="logo-vimeo"></ion-icon></button>
|
||||
<button ion-fab (click)="openSocial('googleplus', fab1)"><ion-icon name="logo-googleplus"></ion-icon></button>
|
||||
</ion-fab-list>
|
||||
</ion-fab>
|
||||
|
||||
<ion-fab right bottom #fab2>
|
||||
<button ion-fab color="light"><ion-icon name="arrow-dropleft"></ion-icon></button>
|
||||
<ion-fab-list side="left">
|
||||
<button ion-fab (click)="openSocial('facebook', fab2)"><ion-icon name="logo-facebook"></ion-icon></button>
|
||||
<button ion-fab (click)="openSocial('twitter', fab2)"><ion-icon name="logo-twitter"></ion-icon></button>
|
||||
<button ion-fab (click)="openSocial('vimeo', fab2)"><ion-icon name="logo-vimeo"></ion-icon></button>
|
||||
<button ion-fab (click)="openSocial('googleplus', fab2)"><ion-icon name="logo-googleplus"></ion-icon></button>
|
||||
</ion-fab-list>
|
||||
</ion-fab>
|
||||
|
||||
<ion-fab left top #fab3>
|
||||
<button ion-fab color="secondary"><ion-icon name="arrow-dropright"></ion-icon></button>
|
||||
<ion-fab-list side="right">
|
||||
<button ion-fab (click)="openSocial('facebook', fab3)"><ion-icon name="logo-facebook"></ion-icon></button>
|
||||
<button ion-fab (click)="openSocial('twitter', fab3)"><ion-icon name="logo-twitter"></ion-icon></button>
|
||||
<button ion-fab (click)="openSocial('vimeo', fab3)"><ion-icon name="logo-vimeo"></ion-icon></button>
|
||||
<button ion-fab (click)="openSocial('googleplus', fab3)"><ion-icon name="logo-googleplus"></ion-icon></button>
|
||||
</ion-fab-list>
|
||||
</ion-fab>
|
||||
|
||||
<ion-fab left bottom #fab4>
|
||||
<button ion-fab color="dark"><ion-icon name="arrow-dropup"></ion-icon></button>
|
||||
<ion-fab-list side="top">
|
||||
<button ion-fab (click)="openSocial('facebook', fab4)"><ion-icon name="logo-facebook"></ion-icon></button>
|
||||
<button ion-fab (click)="openSocial('twitter', fab4)"><ion-icon name="logo-twitter"></ion-icon></button>
|
||||
<button ion-fab (click)="openSocial('vimeo', fab4)"><ion-icon name="logo-vimeo"></ion-icon></button>
|
||||
<button ion-fab (click)="openSocial('googleplus', fab4)"><ion-icon name="logo-googleplus"></ion-icon></button>
|
||||
</ion-fab-list>
|
||||
</ion-fab>
|
||||
|
||||
<ion-fab center middle #fab5>
|
||||
<button ion-fab color="danger" (click)="clickMainFAB()"><ion-icon name="md-share"></ion-icon></button>
|
||||
<ion-fab-list side="top">
|
||||
<button ion-fab (click)="openSocial('vimeo', fab5)" color="primary"><ion-icon name="logo-vimeo"></ion-icon></button>
|
||||
</ion-fab-list>
|
||||
<ion-fab-list side="bottom">
|
||||
<button ion-fab (click)="openSocial('facebook', fab5)" color="secondary"><ion-icon name="logo-facebook"></ion-icon></button>
|
||||
</ion-fab-list>
|
||||
<ion-fab-list side="left">
|
||||
<button ion-fab (click)="openSocial('googleplus', fab5)" color="light"><ion-icon name="logo-googleplus"></ion-icon></button>
|
||||
</ion-fab-list>
|
||||
<ion-fab-list side="right">
|
||||
<button ion-fab (click)="openSocial('twitter', fab5)" color="dark"><ion-icon name="logo-twitter"></ion-icon></button>
|
||||
</ion-fab-list>
|
||||
</ion-fab>
|
||||
|
||||
<ion-fab right middle>
|
||||
<button ion-fab color="danger" (click)="add()"><ion-icon name="add"></ion-icon></button>
|
||||
</ion-fab>
|
||||
|
||||
</ion-content>
|
||||
@ -1,86 +0,0 @@
|
||||
import { Component, Injectable, Pipe, PipeTransform } from '@angular/core';
|
||||
import { LocalStorage, Storage } from 'ionic-angular';
|
||||
|
||||
@Pipe({
|
||||
name: 'cleanLocalData'
|
||||
})
|
||||
@Injectable()
|
||||
export class CleanLocalDataPipe implements PipeTransform {
|
||||
validKeys: string[];
|
||||
output: any;
|
||||
data: any;
|
||||
|
||||
transform(obj: any): any {
|
||||
this.validKeys = ['username', 'name', 'email', 'address'];
|
||||
this.output = {};
|
||||
this.data = JSON.parse(obj);
|
||||
for (var i = 0; i < Object.keys(this.data).length; i++) {
|
||||
if (this.validKeys.indexOf( Object.keys(this.data)[i] ) > -1) {
|
||||
this.output[Object.keys(this.data)[i]] = this.data[Object.keys(this.data)[i]];
|
||||
}
|
||||
}
|
||||
return JSON.stringify(this.output, null, 2);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@Component({
|
||||
templateUrl: 'page.html'
|
||||
})
|
||||
export class ApiDemoPage {
|
||||
local: Storage;
|
||||
localStorageDemo: string;
|
||||
myItem: any;
|
||||
keys = ['username', 'name', 'email', 'address'];
|
||||
values = ['admin', 'Administrator', 'admin@administrator.com', '123 Admin St'];
|
||||
addedKeys = [];
|
||||
delKey: any;
|
||||
|
||||
constructor() {
|
||||
this.local = new Storage(LocalStorage);
|
||||
this.localStorageDemo = '{}';
|
||||
window.localStorage.clear();
|
||||
|
||||
this.myItem = {
|
||||
key: 'username',
|
||||
value: 'admin'
|
||||
};
|
||||
}
|
||||
|
||||
set() {
|
||||
if (this.myItem.key) {
|
||||
let added = false;
|
||||
|
||||
for (let i = 0; i < this.addedKeys.length; i++) {
|
||||
if (this.addedKeys[i] === this.myItem.key) {
|
||||
added = true;
|
||||
}
|
||||
}
|
||||
|
||||
if (added === false) {
|
||||
this.addedKeys.push(this.myItem.key);
|
||||
this.delKey = this.myItem.key;
|
||||
this.local.set(this.myItem.key, this.myItem.value );
|
||||
this.localStorageDemo = JSON.stringify(window.localStorage, null, 2);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
remove() {
|
||||
this.local.remove(this.delKey);
|
||||
this.localStorageDemo = JSON.stringify(window.localStorage, null, 2);
|
||||
|
||||
let index = this.addedKeys.indexOf(this.delKey);
|
||||
if (index > -1) {
|
||||
this.addedKeys.splice(index, 1);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@Component({
|
||||
template: '<ion-nav [root]="root"></ion-nav>'
|
||||
})
|
||||
export class ApiDemoApp {
|
||||
root = ApiDemoPage;
|
||||
}
|
||||
@ -1,68 +0,0 @@
|
||||
<ion-header>
|
||||
|
||||
<ion-navbar>
|
||||
<ion-title>Local Storage</ion-title>
|
||||
</ion-navbar>
|
||||
|
||||
</ion-header>
|
||||
|
||||
|
||||
<ion-content class="local-storage-demo outer-content">
|
||||
|
||||
<ion-list no-margin>
|
||||
<ion-list-header>Add to Local Storage</ion-list-header>
|
||||
|
||||
<ion-item>
|
||||
<ion-label>Key</ion-label>
|
||||
<ion-select [(ngModel)]="myItem.key">
|
||||
<ion-option *ngFor="let key of keys" [value]="key">
|
||||
{{ key }}
|
||||
</ion-option>
|
||||
</ion-select>
|
||||
</ion-item>
|
||||
|
||||
<ion-item>
|
||||
<ion-label>Value</ion-label>
|
||||
<ion-select [(ngModel)]="myItem.value">
|
||||
<ion-option *ngFor="let value of values" [value]="value">
|
||||
{{ value }}
|
||||
</ion-option>
|
||||
</ion-select>
|
||||
</ion-item>
|
||||
|
||||
</ion-list>
|
||||
|
||||
<div padding>
|
||||
<button ion-button icon-left block color="secondary" (click)="set()">
|
||||
<ion-icon name="add"></ion-icon>
|
||||
Add
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<ion-list no-margin>
|
||||
<ion-list-header>Delete from Local Storage</ion-list-header>
|
||||
|
||||
<ion-item>
|
||||
<ion-label>Key</ion-label>
|
||||
<ion-select [(ngModel)]="delKey">
|
||||
<ion-option selected>Select a Key</ion-option>
|
||||
<ion-option *ngFor="let key of addedKeys" [value]="key">
|
||||
{{ key }}
|
||||
</ion-option>
|
||||
</ion-select>
|
||||
</ion-item>
|
||||
</ion-list>
|
||||
|
||||
<div padding>
|
||||
<button ion-button icon-left block color="danger" (click)="remove()">
|
||||
<ion-icon name="remove"></ion-icon>
|
||||
Delete
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div padding>
|
||||
<h5>Local Storage:</h5>
|
||||
<pre>local: {{ localStorageDemo | cleanLocalData }}</pre>
|
||||
</div>
|
||||
|
||||
</ion-content>
|
||||
@ -125,6 +125,7 @@ function buildDemos(done: Function) {
|
||||
|
||||
function cleanDemos(done: Function) {
|
||||
deleteFiles([`${DEMOS_SRC_ROOT}/**/*.js`,
|
||||
`${DEMOS_SRC_ROOT}/**/*.js.map`,
|
||||
`${DEMOS_SRC_ROOT}/**/*.d.ts`,
|
||||
`${DEMOS_SRC_ROOT}/**/*.ngfactory.ts`,
|
||||
`${DEMOS_SRC_ROOT}/**/*.metadata.json`,
|
||||
|
||||
Reference in New Issue
Block a user