mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2025-08-20 12:29:55 +08:00
chore(docs): remove component-docs demo
This commit is contained in:
Drew Rygh
@ -1 +0,0 @@
|
||||
export * from './basic/pages';
|
||||
@ -1,9 +0,0 @@
|
||||
<ion-navbar *navbar hideBackButton class="android-attr">
|
||||
<ion-title>Action Sheet</ion-title>
|
||||
</ion-navbar>
|
||||
|
||||
<ion-content padding class="has-header components-demo">
|
||||
<button block (click)="openMenu()" class="android-attr">
|
||||
Show Actionsheet
|
||||
</button>
|
||||
</ion-content>
|
||||
@ -1,102 +0,0 @@
|
||||
import {Platform, Page, ActionSheet, NavController} from 'ionic/ionic';
|
||||
import {forwardRef} from 'angular2/core';
|
||||
import {AndroidAttribute} from '../../helpers';
|
||||
|
||||
@Page({
|
||||
templateUrl: 'action-sheets/basic/basic.html',
|
||||
directives: [forwardRef(() => AndroidAttribute)]
|
||||
|
||||
})
|
||||
export class BasicPage {
|
||||
|
||||
constructor(platform: Platform, nav: NavController) {
|
||||
this.nav = nav;
|
||||
this.platform = platform;
|
||||
}
|
||||
|
||||
openMenu() {
|
||||
let buttonHandler = (index) => {
|
||||
console.log('Button clicked', index);
|
||||
if (index == 1) { return false; }
|
||||
return true;
|
||||
}
|
||||
|
||||
if (this.platform.is('android')) {
|
||||
var androidSheet = {
|
||||
title: 'Albums',
|
||||
buttons: [
|
||||
{ text: 'Share',
|
||||
handler: buttonHandler,
|
||||
icon: 'share'
|
||||
},
|
||||
{ text: 'Play',
|
||||
handler: buttonHandler,
|
||||
icon: 'arrow-dropright-circle'
|
||||
},
|
||||
{ text: 'Favorite',
|
||||
handler: buttonHandler,
|
||||
icon: 'ion-md-heart-outline'
|
||||
},
|
||||
{
|
||||
text: 'Delete',
|
||||
style: 'destructive',
|
||||
handler: () => {
|
||||
console.log('Destructive clicked');
|
||||
}
|
||||
},
|
||||
{
|
||||
text: 'Cancel',
|
||||
style: 'cancel',
|
||||
handler: () => {
|
||||
console.log('Cancel clicked');
|
||||
}
|
||||
}
|
||||
],
|
||||
};
|
||||
}
|
||||
|
||||
let actionSheet = ActionSheet.create( androidSheet || {
|
||||
buttons: [
|
||||
{
|
||||
text: 'Share',
|
||||
handler: () => {
|
||||
console.log('Share clicked');
|
||||
}
|
||||
},
|
||||
{
|
||||
text: 'Play',
|
||||
handler: () => {
|
||||
console.log('Play clicked');
|
||||
}
|
||||
},
|
||||
{
|
||||
text: 'Favorite',
|
||||
handler: () => {
|
||||
console.log('Favorite clicked');
|
||||
}
|
||||
},
|
||||
{
|
||||
text: 'Delete',
|
||||
style: 'destructive',
|
||||
handler: () => {
|
||||
console.log('Destructive clicked');
|
||||
}
|
||||
},
|
||||
{
|
||||
text: 'Cancel',
|
||||
style: 'cancel',
|
||||
handler: () => {
|
||||
console.log('Cancel clicked');
|
||||
}
|
||||
}
|
||||
]
|
||||
});
|
||||
|
||||
this.nav.present(actionSheet);
|
||||
}
|
||||
|
||||
onPageWillLeave() {
|
||||
actionSheet && actionSheet.dismiss();
|
||||
}
|
||||
|
||||
}
|
||||
@ -1,19 +0,0 @@
|
||||
.md .ion-md-share {
|
||||
color: #ED4248;
|
||||
}
|
||||
.md .ion-md-arrow-dropright-circle {
|
||||
color: #508AE4;
|
||||
}
|
||||
.md .ion-md-heart-outline {
|
||||
color: #31D55F;
|
||||
}
|
||||
|
||||
.md .action-sheet-destructive {
|
||||
margin-top: 2px;
|
||||
padding-top: 1px;
|
||||
}
|
||||
|
||||
.md .action-sheet-cancel ion-icon,
|
||||
.md .action-sheet-destructive ion-icon {
|
||||
color: #757575;
|
||||
}
|
||||
@ -1 +0,0 @@
|
||||
export * from './basic/pages';
|
||||
@ -1,83 +0,0 @@
|
||||
import {Page, Alert, NavController} from 'ionic/ionic';
|
||||
import {AndroidAttribute} from '../../helpers';
|
||||
import {forwardRef} from 'angular2/core';
|
||||
|
||||
|
||||
@Page({
|
||||
templateUrl: 'alerts/basic/template.html',
|
||||
directives: [forwardRef(() => AndroidAttribute)]
|
||||
})
|
||||
export class BasicPage {
|
||||
|
||||
constructor(nav: NavController) {
|
||||
this.nav = nav;
|
||||
}
|
||||
|
||||
doAlert() {
|
||||
let alert = Alert.create({
|
||||
title: 'New Friend!',
|
||||
subTitle: 'Your friend, Obi wan Kenobi, just accepted your friend request!',
|
||||
buttons: ['Ok']
|
||||
});
|
||||
this.nav.present(alert);
|
||||
}
|
||||
|
||||
doPrompt() {
|
||||
let prompt = Alert.create({
|
||||
title: 'Login',
|
||||
body: "Enter a name for this new album you're so keen on adding",
|
||||
inputs: [
|
||||
{
|
||||
name: 'title',
|
||||
placeholder: 'Title'
|
||||
},
|
||||
],
|
||||
buttons: [
|
||||
{
|
||||
text: 'Cancel',
|
||||
handler: data => {
|
||||
console.log('Cancel clicked');
|
||||
}
|
||||
},
|
||||
{
|
||||
text: 'Save',
|
||||
handler: data => {
|
||||
console.log('Saved clicked');
|
||||
}
|
||||
}
|
||||
]
|
||||
});
|
||||
this.nav.present(prompt);
|
||||
}
|
||||
|
||||
doConfirm() {
|
||||
let confirm = Alert.create({
|
||||
title: 'Use this lightsaber?',
|
||||
body: 'Do you agree to use this lightsaber to do good across the intergalactic galaxy?',
|
||||
buttons: [
|
||||
{
|
||||
text: 'Disagree',
|
||||
handler: () => {
|
||||
console.log('Disagree clicked');
|
||||
}
|
||||
},
|
||||
{
|
||||
text: 'Agree',
|
||||
handler: () => {
|
||||
console.log('Agree clicked');
|
||||
}
|
||||
}
|
||||
]
|
||||
});
|
||||
this.nav.present(confirm);
|
||||
}
|
||||
|
||||
// onPageWillLeave() {
|
||||
// let popup = this.popup.get();
|
||||
// // only try to close if there is an active popup
|
||||
// if (popup) {
|
||||
// popup.close();
|
||||
// }
|
||||
// }
|
||||
|
||||
}
|
||||
@ -1,10 +0,0 @@
|
||||
|
||||
<ion-navbar *navbar hideBackButton class="android-attr">
|
||||
<ion-title>Popups</ion-title>
|
||||
</ion-navbar>
|
||||
|
||||
<ion-content padding>
|
||||
<button dark (click)="doAlert()">Alert</button>
|
||||
<button light (click)="doPrompt()">Prompt</button>
|
||||
<button primary (click)="doConfirm()">Confirm</button>
|
||||
</ion-content>
|
||||
@ -1,31 +0,0 @@
|
||||
<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">
|
||||
|
||||
|
||||
<ion-menu [content]="content" id="leftMenu" side="left">
|
||||
|
||||
<ion-toolbar primary>
|
||||
<ion-title>Menu</ion-title>
|
||||
</ion-toolbar>
|
||||
|
||||
<ion-content>
|
||||
|
||||
<ion-list>
|
||||
|
||||
<button ion-item *ngFor="#p of pages" (click)="openPage(p)">
|
||||
{{p.title}}
|
||||
</button>
|
||||
|
||||
<button ion-item menuClose="leftMenu" detail-none>
|
||||
Close Menu
|
||||
</button>
|
||||
|
||||
</ion-list>
|
||||
</ion-content>
|
||||
|
||||
</ion-menu>
|
||||
|
||||
<ion-nav id="nav" [root]="rootPage" #content></ion-nav>
|
||||
|
||||
@ -1,151 +0,0 @@
|
||||
$colors: (
|
||||
primary: #387ef5,
|
||||
secondary: #32db64,
|
||||
danger: #f53d3d,
|
||||
light: #f4f4f4,
|
||||
dark: #222,
|
||||
energized: #ffc527,
|
||||
royal: #7e60ff,
|
||||
);
|
||||
$font-path: '../../dist/fonts';
|
||||
$checkbox-md-icon-checkmark-color: #fff !important;
|
||||
$checkbox-ios-icon-checkmark-color: #fff !important;
|
||||
$segment-button-md-text-color-activated: #fff !important;
|
||||
|
||||
@import "../../ionic/ionic";
|
||||
@import "action-sheets/basic/styles";
|
||||
@import "buttons/fab/styles";
|
||||
@import "buttons/components/styles";
|
||||
@import "cards/background/styles";
|
||||
@import "cards/list/styles";
|
||||
@import "cards/advanced-weather/styles";
|
||||
@import "cards/advanced-map/styles";
|
||||
@import "grid/basic/styles";
|
||||
@import "icons/basic/styles";
|
||||
@import "lists/avatar/styles";
|
||||
@import "lists/basic/styles";
|
||||
@import "lists/headers/styles";
|
||||
@import "lists/icon/styles";
|
||||
@import "lists/inset/styles";
|
||||
@import "lists/multiline/styles";
|
||||
@import "lists/no-lines/styles";
|
||||
@import "lists/thumbnail/styles";
|
||||
@import "menus/basic/styles";
|
||||
@import "slides/basic/styles";
|
||||
@import "tabs/basic/styles";
|
||||
@import "tabs/icon/styles";
|
||||
@import "tabs/icon-text/styles";
|
||||
|
||||
|
||||
|
||||
|
||||
//////////////////////////////////
|
||||
// Global Styles
|
||||
//////////////////////////////////
|
||||
|
||||
body, body:hover, body a, body button, body media-switch {
|
||||
cursor: url('http://ionicframework.com/img/finger.png') 8 8, auto;
|
||||
}
|
||||
|
||||
body ion-app {
|
||||
overflow: visible;
|
||||
}
|
||||
|
||||
ion-page {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
ion-scroll {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
body.has-scrollbar scroll-content {
|
||||
margin-right: -15px;
|
||||
}
|
||||
body.has-scrollbar ion-menu scroll-content {
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
scroll-content {
|
||||
overflow-y: scroll;
|
||||
}
|
||||
|
||||
section.hidden {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
.components-demo h4 {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.section-padding {
|
||||
padding: 16px;
|
||||
}
|
||||
|
||||
.components-demo section {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
#card-wireframe {
|
||||
width: 100%;
|
||||
margin-bottom: 2.7em;
|
||||
}
|
||||
|
||||
.demo-card {
|
||||
height: 0;
|
||||
}
|
||||
.demo-card button {
|
||||
font-size: 1.3rem;
|
||||
}
|
||||
|
||||
.ios ion-content.cards-bg {
|
||||
background-color: #f4f4f7;
|
||||
}
|
||||
.md ion-content.cards-bg {
|
||||
background-color: #EEEEEE !important;
|
||||
}
|
||||
|
||||
.demo-list-icons icon {
|
||||
color: #444444;
|
||||
}
|
||||
.demo-list-icons icon#secondary {
|
||||
color: #32DB64;
|
||||
}
|
||||
body.md {
|
||||
border-top: 24px solid black;
|
||||
}
|
||||
|
||||
body.md backdrop {
|
||||
top: -24px;
|
||||
height: 107%;
|
||||
}
|
||||
|
||||
body.md img#md-only {
|
||||
display: block !important;
|
||||
position: absolute;
|
||||
top: -24px;
|
||||
width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
body.md img#md-tabs-icon, body.md img#md-tabs-icon-text {
|
||||
display: none;
|
||||
position: absolute;
|
||||
top: -24px;
|
||||
width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
body.ios img#ios-only {
|
||||
display: block !important;
|
||||
position: absolute;
|
||||
background-color: #F8F8F8;
|
||||
padding: 5px 0;
|
||||
top: 0px;
|
||||
width: 100%;
|
||||
height: auto;
|
||||
z-index: 999;
|
||||
}
|
||||
|
||||
@ -1 +0,0 @@
|
||||
export * from './basic/pages';
|
||||
@ -1,13 +0,0 @@
|
||||
import {Page} from 'ionic/ionic';
|
||||
import {forwardRef} from 'angular2/core';
|
||||
import {AndroidAttribute} from '../../helpers';
|
||||
|
||||
@Page({
|
||||
templateUrl: 'badge/basic/template.html',
|
||||
directives: [forwardRef(() => AndroidAttribute)]
|
||||
})
|
||||
export class BasicPage {
|
||||
constructor() {
|
||||
|
||||
}
|
||||
}
|
||||
@ -1,4 +0,0 @@
|
||||
.preview-icons {
|
||||
font-size: 2em;
|
||||
text-align: center;
|
||||
}
|
||||
@ -1,35 +0,0 @@
|
||||
|
||||
<ion-navbar *navbar hideBackButton class="show-navbar android-attr">
|
||||
<ion-title>Badge</ion-title>
|
||||
</ion-navbar>
|
||||
|
||||
<ion-content>
|
||||
|
||||
<ion-card>
|
||||
|
||||
<img src="img/bjork-live.png"/>
|
||||
|
||||
<ion-card-content>
|
||||
<h2 class="card-title">
|
||||
Björk
|
||||
</h2>
|
||||
<p>
|
||||
Björk first came to prominence as one of the lead vocalists of the avant pop Icelandic sextet the Sugarcubes, but when...
|
||||
</p>
|
||||
</ion-card-content>
|
||||
|
||||
<ion-item>
|
||||
<ion-icon name="musical-notes" item-left style="color: #d03e84"></ion-icon>
|
||||
Albums
|
||||
<ion-badge item-right>9</ion-badge>
|
||||
</ion-item>
|
||||
|
||||
<ion-item>
|
||||
<ion-icon name="twitter-logo" item-left style="color: #55acee"></ion-icon>
|
||||
Followers
|
||||
<ion-badge item-right>260k</ion-badge>
|
||||
</ion-item>
|
||||
|
||||
</ion-card>
|
||||
|
||||
</ion-content>
|
||||
@ -1,25 +0,0 @@
|
||||
<ion-navbar *navbar hideBackButton class="android-attr">
|
||||
<ion-title>Buttons</ion-title>
|
||||
</ion-navbar>
|
||||
|
||||
<ion-content padding class="has-header components-demo">
|
||||
<p>
|
||||
<button light>Light</button>
|
||||
</p>
|
||||
|
||||
<p>
|
||||
<button>Default</button>
|
||||
</p>
|
||||
|
||||
<p>
|
||||
<button secondary>Secondary</button>
|
||||
</p>
|
||||
|
||||
<p>
|
||||
<button danger>Danger</button>
|
||||
</p>
|
||||
|
||||
<p>
|
||||
<button dark>Dark</button>
|
||||
</p>
|
||||
</ion-content>
|
||||
@ -1,13 +0,0 @@
|
||||
import {Page} from 'ionic/ionic';
|
||||
import {forwardRef} from 'angular2/core';
|
||||
import {AndroidAttribute} from '../../helpers';
|
||||
|
||||
@Page({
|
||||
templateUrl: 'buttons/basic/basic.html',
|
||||
directives: [forwardRef(() => AndroidAttribute)]
|
||||
})
|
||||
export class BasicPage {
|
||||
constructor() {
|
||||
|
||||
}
|
||||
}
|
||||
@ -1,25 +0,0 @@
|
||||
<ion-navbar *navbar hideBackButton class="android-attr">
|
||||
<ion-title>Block Buttons</ion-title>
|
||||
</ion-navbar>
|
||||
|
||||
<ion-content padding class="has-header components-demo">
|
||||
<p>
|
||||
<button light block>Light</button>
|
||||
</p>
|
||||
|
||||
<p>
|
||||
<button block>Default</button>
|
||||
</p>
|
||||
|
||||
<p>
|
||||
<button secondary block>Secondary</button>
|
||||
</p>
|
||||
|
||||
<p>
|
||||
<button danger block>Danger</button>
|
||||
</p>
|
||||
|
||||
<p>
|
||||
<button dark block>Dark</button>
|
||||
</p>
|
||||
</ion-content>
|
||||
@ -1,13 +0,0 @@
|
||||
import {Page} from 'ionic/ionic';
|
||||
import {forwardRef} from 'angular2/core';
|
||||
import {AndroidAttribute} from '../../helpers';
|
||||
|
||||
@Page({
|
||||
templateUrl: 'buttons/block/block.html',
|
||||
directives: [forwardRef(() => AndroidAttribute)]
|
||||
})
|
||||
export class BlockPage {
|
||||
constructor() {
|
||||
|
||||
}
|
||||
}
|
||||
@ -1,10 +0,0 @@
|
||||
export * from './basic/pages';
|
||||
export * from './block/pages';
|
||||
export * from './clear/pages';
|
||||
export * from './components/pages';
|
||||
export * from './fab/pages';
|
||||
export * from './full/pages';
|
||||
export * from './icons/pages';
|
||||
export * from './outline/pages';
|
||||
export * from './round/pages';
|
||||
export * from './sizes/pages';
|
||||
@ -1,25 +0,0 @@
|
||||
<ion-navbar *navbar hideBackButton class="android-attr">
|
||||
<ion-title>Clear Buttons</ion-title>
|
||||
</ion-navbar>
|
||||
|
||||
<ion-content padding class="has-header components-demo">
|
||||
<p>
|
||||
<button light clear>Light</button>
|
||||
</p>
|
||||
|
||||
<p>
|
||||
<button clear>Default</button>
|
||||
</p>
|
||||
|
||||
<p>
|
||||
<button secondary clear>Secondary</button>
|
||||
</p>
|
||||
|
||||
<p>
|
||||
<button danger clear>Danger</button>
|
||||
</p>
|
||||
|
||||
<p>
|
||||
<button dark clear>Dark</button>
|
||||
</p>
|
||||
</ion-content>
|
||||
@ -1,13 +0,0 @@
|
||||
import {Page} from 'ionic/ionic';
|
||||
import {forwardRef} from 'angular2/core';
|
||||
import {AndroidAttribute} from '../../helpers';
|
||||
|
||||
@Page({
|
||||
templateUrl: 'buttons/clear/clear.html',
|
||||
directives: [forwardRef(() => AndroidAttribute)]
|
||||
})
|
||||
export class ClearPage {
|
||||
constructor() {
|
||||
|
||||
}
|
||||
}
|
||||
@ -1,57 +0,0 @@
|
||||
<ion-navbar *navbar hideBackButton class="android-attr">
|
||||
|
||||
<ion-title>Buttons</ion-title>
|
||||
|
||||
<ion-buttons start>
|
||||
<button>
|
||||
<ion-icon name="contact"></ion-icon>
|
||||
</button>
|
||||
</ion-buttons>
|
||||
<ion-buttons end>
|
||||
<button>
|
||||
<ion-icon name="search"></ion-icon>
|
||||
</button>
|
||||
</ion-buttons>
|
||||
|
||||
</ion-navbar>
|
||||
|
||||
<ion-content padding class="has-header components-demo">
|
||||
|
||||
|
||||
<ion-card class="buttons-in-components">
|
||||
<ion-card-content class="buttons-in-components">
|
||||
<img src="img/img-icon.png" />
|
||||
</ion-card-content>
|
||||
|
||||
<ion-item actions>
|
||||
<button clear item-left>Like</button>
|
||||
<button clear item-right>Comment</button>
|
||||
</ion-item>
|
||||
|
||||
</ion-card>
|
||||
|
||||
<ion-list>
|
||||
|
||||
<ion-item>
|
||||
Inner Button
|
||||
<button item-right outline>Outline</button>
|
||||
</ion-item>
|
||||
|
||||
<ion-item>
|
||||
Left Icon Button
|
||||
<button item-right outline>
|
||||
<ion-icon name="star"></ion-icon>
|
||||
Left Icon
|
||||
</button>
|
||||
</ion-item>
|
||||
|
||||
<ion-item>
|
||||
Right Icon Button
|
||||
<button item-right outline>
|
||||
Right Icon
|
||||
<ion-icon name="star"></ion-icon>
|
||||
</button>
|
||||
</ion-item>
|
||||
|
||||
</ion-list>
|
||||
</ion-content>
|
||||
@ -1,13 +0,0 @@
|
||||
import {Page} from 'ionic/ionic';
|
||||
import {forwardRef} from 'angular2/core';
|
||||
import {AndroidAttribute} from '../../helpers';
|
||||
|
||||
@Page({
|
||||
templateUrl: 'buttons/components/components.html',
|
||||
directives: [forwardRef(() => AndroidAttribute)]
|
||||
})
|
||||
export class ComponentsPage {
|
||||
constructor() {
|
||||
|
||||
}
|
||||
}
|
||||
@ -1,12 +0,0 @@
|
||||
ion-card ion-card-content.buttons-in-components {
|
||||
background-color: #F4F5F8;
|
||||
}
|
||||
ion-card ion-card-content.buttons-in-components img {
|
||||
width: auto;
|
||||
height: 44px;
|
||||
display: block;
|
||||
margin: 20px auto;
|
||||
}
|
||||
ion-card.buttons-in-components {
|
||||
margin-bottom: 2em;
|
||||
}
|
||||
@ -1,24 +0,0 @@
|
||||
<ion-navbar *navbar hideBackButton class="android-attr">
|
||||
<ion-title>FAB</ion-title>
|
||||
</ion-navbar>
|
||||
|
||||
<ion-content class="has-header components-demo">
|
||||
<p>
|
||||
<button fab primary fab-top fab-left>
|
||||
<ion-icon name="add"></ion-icon>
|
||||
</button>
|
||||
<button fab secondary fab-top fab-center>
|
||||
<ion-icon name="compass" is-active="false"></ion-icon>
|
||||
</button>
|
||||
<button fab danger fab-top fab-right>
|
||||
<ion-icon name="mic" is-active="false"></ion-icon>
|
||||
</button>
|
||||
</p>
|
||||
</ion-content>
|
||||
|
||||
<button fab dark fab-bottom fab-center style="z-index: 999">
|
||||
<ion-icon name="heart" is-active="false"></ion-icon>
|
||||
</button>
|
||||
|
||||
<ion-toolbar id="subtle-footer">
|
||||
</ion-toolbar>
|
||||
@ -1,13 +0,0 @@
|
||||
import {Page} from 'ionic/ionic';
|
||||
import {forwardRef} from 'angular2/core';
|
||||
import {AndroidAttribute} from '../../helpers';
|
||||
|
||||
@Page({
|
||||
templateUrl: 'buttons/fab/fab.html',
|
||||
directives: [forwardRef(() => AndroidAttribute)]
|
||||
})
|
||||
export class FabPage {
|
||||
constructor() {
|
||||
|
||||
}
|
||||
}
|
||||
@ -1,19 +0,0 @@
|
||||
#subtle-footer {
|
||||
background-color: #fff;
|
||||
border-image-source: url(../component-docs/img/footer-wireframe.png);
|
||||
border-image-repeat: repeat;
|
||||
border-image-width: 100%;
|
||||
border-bottom: 0;
|
||||
border-left: 0;
|
||||
border-right: 0;
|
||||
position: absolute;
|
||||
bottom:0;
|
||||
}
|
||||
#demo-fab-bottom {
|
||||
padding-top: 3px;
|
||||
z-index: 100;
|
||||
}
|
||||
#subtle-footer .toolbar-background {
|
||||
background-color: #fff;
|
||||
border-bottom: 0;
|
||||
}
|
||||
@ -1,28 +0,0 @@
|
||||
<ion-navbar *navbar hideBackButton class="android-attr">
|
||||
<ion-title>Full Buttons</ion-title>
|
||||
</ion-navbar>
|
||||
|
||||
<ion-content class="has-header components-demo">
|
||||
|
||||
<p>
|
||||
<button light full>Light</button>
|
||||
</p>
|
||||
<p>
|
||||
<button full>Default</button>
|
||||
</p>
|
||||
|
||||
<p>
|
||||
<button secondary full>Secondary</button>
|
||||
</p>
|
||||
|
||||
<p>
|
||||
<button danger full>Danger</button>
|
||||
</p>
|
||||
<p>
|
||||
<button dark full>Dark</button>
|
||||
</p>
|
||||
</ion-content>
|
||||
|
||||
|
||||
|
||||
|
||||
@ -1,13 +0,0 @@
|
||||
import {Page} from 'ionic/ionic';
|
||||
import {forwardRef} from 'angular2/core';
|
||||
import {AndroidAttribute} from '../../helpers';
|
||||
|
||||
@Page({
|
||||
templateUrl: 'buttons/full/full.html',
|
||||
directives: [forwardRef(() => AndroidAttribute)]
|
||||
})
|
||||
export class FullPage {
|
||||
constructor() {
|
||||
|
||||
}
|
||||
}
|
||||
@ -1,77 +0,0 @@
|
||||
|
||||
<ion-navbar *navbar hideBackButton class="android-attr">
|
||||
<ion-title>Icon Buttons</ion-title>
|
||||
</ion-navbar>
|
||||
|
||||
<ion-content padding class="has-header components-demo">
|
||||
|
||||
<p>
|
||||
<button light>
|
||||
<ion-icon name="arrow-back"></ion-icon>
|
||||
Back
|
||||
</button>
|
||||
|
||||
<button light>
|
||||
<ion-icon name="arrow-down"></ion-icon>
|
||||
</button>
|
||||
|
||||
<button light>
|
||||
<ion-icon name="arrow-up"></ion-icon>
|
||||
</button>
|
||||
|
||||
<button light>
|
||||
Next
|
||||
<ion-icon name="arrow-forward"></ion-icon>
|
||||
</button>
|
||||
</p>
|
||||
|
||||
<p>
|
||||
<button>
|
||||
<ion-icon name="home"></ion-icon>
|
||||
Home
|
||||
</button>
|
||||
<button outline >
|
||||
<ion-icon name="briefcase" is-active="false"></ion-icon>
|
||||
Work
|
||||
</button>
|
||||
<button clear>
|
||||
<ion-icon name="beer" is-active="false"></ion-icon>
|
||||
Pub
|
||||
</button>
|
||||
</p>
|
||||
|
||||
<p>
|
||||
<button secondary>
|
||||
<ion-icon name="people"></ion-icon>
|
||||
Friends
|
||||
</button>
|
||||
<button secondary outline>
|
||||
<ion-icon name="paw" is-active="false"></ion-icon>
|
||||
Best Friend
|
||||
</button>
|
||||
</p>
|
||||
|
||||
<p>
|
||||
<button danger>
|
||||
<ion-icon name="close"></ion-icon>
|
||||
Remove
|
||||
</button>
|
||||
<button danger outline>
|
||||
<ion-icon name="remove-circle" is-active="false"></ion-icon>
|
||||
</button>
|
||||
<button danger clear>
|
||||
<ion-icon name="trash" is-active="false"></ion-icon>
|
||||
</button>
|
||||
</p>
|
||||
|
||||
<p>
|
||||
<button dark round>
|
||||
<ion-icon name="construct" is-active="false"></ion-icon>
|
||||
Tools
|
||||
</button>
|
||||
<button dark clear>
|
||||
<ion-icon name="hammer" is-active="false"></ion-icon>
|
||||
</button>
|
||||
</p>
|
||||
|
||||
</ion-content>
|
||||
@ -1,13 +0,0 @@
|
||||
import {Page} from 'ionic/ionic';
|
||||
import {forwardRef} from 'angular2/core';
|
||||
import {AndroidAttribute} from '../../helpers';
|
||||
|
||||
@Page({
|
||||
templateUrl: 'buttons/icons/icons.html',
|
||||
directives: [forwardRef(() => AndroidAttribute)]
|
||||
})
|
||||
export class IconsPage {
|
||||
constructor() {
|
||||
|
||||
}
|
||||
}
|
||||
@ -1,26 +0,0 @@
|
||||
<ion-navbar *navbar hideBackButton class="android-attr">
|
||||
<ion-title>Outline Buttons</ion-title>
|
||||
</ion-navbar>
|
||||
|
||||
<ion-content padding class="has-header components-demo">
|
||||
|
||||
<p>
|
||||
<button light outline>Light</button>
|
||||
</p>
|
||||
|
||||
<p>
|
||||
<button outline>Default</button>
|
||||
</p>
|
||||
|
||||
<p>
|
||||
<button secondary outline>Secondary</button>
|
||||
</p>
|
||||
|
||||
<p>
|
||||
<button danger outline>Danger</button>
|
||||
</p>
|
||||
|
||||
<p>
|
||||
<button dark outline>Dark</button>
|
||||
</p>
|
||||
</ion-content>
|
||||
@ -1,13 +0,0 @@
|
||||
import {Page} from 'ionic/ionic';
|
||||
import {forwardRef} from 'angular2/core';
|
||||
import {AndroidAttribute} from '../../helpers';
|
||||
|
||||
@Page({
|
||||
templateUrl: 'buttons/outline/outline.html',
|
||||
directives: [forwardRef(() => AndroidAttribute)]
|
||||
})
|
||||
export class OutlinePage {
|
||||
constructor() {
|
||||
|
||||
}
|
||||
}
|
||||
@ -1,13 +0,0 @@
|
||||
import {Page} from 'ionic/ionic';
|
||||
import {forwardRef} from 'angular2/core';
|
||||
import {AndroidAttribute} from '../../helpers';
|
||||
|
||||
@Page({
|
||||
templateUrl: 'buttons/round/round.html',
|
||||
directives: [forwardRef(() => AndroidAttribute)]
|
||||
})
|
||||
export class RoundPage {
|
||||
constructor() {
|
||||
|
||||
}
|
||||
}
|
||||
@ -1,24 +0,0 @@
|
||||
<ion-navbar *navbar hideBackButton class="android-attr">
|
||||
<ion-title>Round Buttons</ion-title>
|
||||
</ion-navbar>
|
||||
|
||||
<ion-content padding class="has-header components-demo">
|
||||
<p>
|
||||
<button light round>Light</button>
|
||||
</p>
|
||||
<p>
|
||||
<button round>Default</button>
|
||||
</p>
|
||||
|
||||
<p>
|
||||
<button secondary round>Secondary</button>
|
||||
</p>
|
||||
|
||||
<p>
|
||||
<button danger round>Danger</button>
|
||||
</p>
|
||||
|
||||
<p>
|
||||
<button dark round>Dark</button>
|
||||
</p>
|
||||
</ion-content>
|
||||
@ -1,13 +0,0 @@
|
||||
import {Page} from 'ionic/ionic';
|
||||
import {forwardRef} from 'angular2/core';
|
||||
import {AndroidAttribute} from '../../helpers';
|
||||
|
||||
@Page({
|
||||
templateUrl: 'buttons/sizes/sizes.html',
|
||||
directives: [forwardRef(() => AndroidAttribute)]
|
||||
})
|
||||
export class SizesPage {
|
||||
constructor() {
|
||||
|
||||
}
|
||||
}
|
||||
@ -1,22 +0,0 @@
|
||||
<ion-navbar *navbar hideBackButton class="android-attr">
|
||||
<ion-title>Button Sizes</ion-title>
|
||||
</ion-navbar>
|
||||
|
||||
<ion-content padding class="has-header components-demo">
|
||||
<p>
|
||||
<button light small>Light Small</button>
|
||||
</p>
|
||||
<p>
|
||||
<button small>Default Small</button>
|
||||
</p>
|
||||
<p>
|
||||
<button secondary>Secondary Medium</button>
|
||||
</p>
|
||||
|
||||
<p>
|
||||
<button danger medium>Danger Medium</button>
|
||||
</p>
|
||||
<p>
|
||||
<button dark large>Dark Large</button>
|
||||
</p>
|
||||
</ion-content>
|
||||
@ -1,13 +0,0 @@
|
||||
import {Page} from 'ionic/ionic';
|
||||
import {forwardRef} from 'angular2/core';
|
||||
import {AndroidAttribute} from '../../helpers';
|
||||
|
||||
@Page({
|
||||
templateUrl: 'cards/advanced-map/template.html',
|
||||
directives: [forwardRef(() => AndroidAttribute)]
|
||||
})
|
||||
export class AdvancedMapPage {
|
||||
constructor() {
|
||||
|
||||
}
|
||||
}
|
||||
@ -1,40 +0,0 @@
|
||||
ion-card.adv-map p {
|
||||
font-size: 0.7em !important;
|
||||
}
|
||||
p.time-ago {
|
||||
color: #bbbbbb !important;
|
||||
margin-left: 4px !important;
|
||||
margin-right: 0px !important;
|
||||
|
||||
}
|
||||
button[fab].fab-map {
|
||||
top: 190px;
|
||||
z-index: 50;
|
||||
}
|
||||
body.ios button[fab].fab-map {
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
}
|
||||
body.md button[fab].fab-map {
|
||||
top: 220px;
|
||||
}
|
||||
|
||||
ion-card .icon-avatar {
|
||||
margin: 10px 8px;
|
||||
min-width: 2.4rem !important;
|
||||
color: #444444;
|
||||
font-size: 1.8em;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.item-bold {
|
||||
font-weight: bold;
|
||||
color: #32DB64;
|
||||
}
|
||||
.item-subtle {
|
||||
color: #656565;
|
||||
margin-left: -3px !important;
|
||||
}
|
||||
.item-subtle:before {
|
||||
padding-right: 5px;
|
||||
}
|
||||
@ -1,105 +0,0 @@
|
||||
|
||||
<ion-navbar *navbar hideBackButton class="show-navbar android-attr">
|
||||
<ion-title>Map Card</ion-title>
|
||||
</ion-navbar>
|
||||
|
||||
<ion-content class="has-header components-demo cards-bg">
|
||||
|
||||
<ion-card class="adv-map">
|
||||
<div style="position: relative">
|
||||
<img src="img/advance-card-map-madison.png">
|
||||
<button fab fab-right fab-top class="fab-map">
|
||||
<ion-icon name="pin"></ion-icon>
|
||||
</button>
|
||||
</div>
|
||||
<ion-item>
|
||||
<ion-avatar item-left class="icon-avatar">
|
||||
<ion-icon name="football"></ion-icon>
|
||||
</ion-avatar>
|
||||
<h2>Museum of Football</h2>
|
||||
<p>11 N. Way St, Madison, WI 53703</p>
|
||||
</ion-item>
|
||||
<ion-item>
|
||||
<ion-avatar item-left class="icon-avatar">
|
||||
<ion-icon name="wine"></ion-icon>
|
||||
</ion-avatar>
|
||||
<h2>Institute of Fine Cocktails</h2>
|
||||
<p>14 S. Hop Avenue, Madison, WI 53703</p>
|
||||
</ion-item>
|
||||
<ion-item actions>
|
||||
<span item-left class="item-bold">18 min</span>
|
||||
<span item-left class="item-subtle">(2.6 mi)</span>
|
||||
<button primary clear item-right>
|
||||
<ion-icon name="navigate"></ion-icon>
|
||||
Start
|
||||
</button>
|
||||
</ion-item>
|
||||
|
||||
</ion-card>
|
||||
|
||||
<ion-card class="adv-map">
|
||||
<div style="position: relative">
|
||||
<img src="img/advance-card-map-mario.png">
|
||||
<button danger fab fab-right fab-top class="fab-map">
|
||||
<ion-icon name="pin"></ion-icon>
|
||||
</button>
|
||||
</div>
|
||||
<ion-item>
|
||||
<ion-avatar item-left class="icon-avatar">
|
||||
<ion-icon name="cloud"></ion-icon>
|
||||
</ion-avatar>
|
||||
<h2>Yoshi"s Island</h2>
|
||||
<p>Iggy Koopa</p>
|
||||
</ion-item>
|
||||
<ion-item>
|
||||
<ion-avatar item-left class="icon-avatar">
|
||||
<ion-icon name="leaf"></ion-icon>
|
||||
</ion-avatar>
|
||||
<h2>Forest of Illusion</h2>
|
||||
<p>Roy Koopa</p>
|
||||
</ion-item>
|
||||
<ion-item actions>
|
||||
<span item-left class="item-bold">3 hr</span>
|
||||
<span item-left class="item-subtle">(4.8 mi)</span>
|
||||
<button danger clear item-right>
|
||||
<ion-icon name="navigate"></ion-icon>
|
||||
Start
|
||||
</button>
|
||||
</ion-item>
|
||||
|
||||
</ion-card>
|
||||
|
||||
<ion-card class="adv-map">
|
||||
<div style="position: relative">
|
||||
<img src="img/advance-card-map-paris.png">
|
||||
<button secondary fab fab-right fab-top class="fab-map">
|
||||
<ion-icon name="pin"></ion-icon>
|
||||
</button>
|
||||
</div>
|
||||
<ion-item>
|
||||
<ion-avatar item-left class="icon-avatar">
|
||||
<ion-icon name="information-circle"></ion-icon>
|
||||
</ion-avatar>
|
||||
<h2>Museum of Information</h2>
|
||||
<p>44 Rue de Info, 75010 Paris, France</p>
|
||||
</ion-item>
|
||||
<ion-item>
|
||||
<ion-avatar item-left class="icon-avatar">
|
||||
<ion-icon name="leaf"></ion-icon>
|
||||
</ion-avatar>
|
||||
<h2>General Pharmacy</h2>
|
||||
<p>1 Avenue Faux, 75010 Paris, France</p>
|
||||
</ion-item>
|
||||
<ion-item actions>
|
||||
<span item-left secondary class="item-bold">26 min</span>
|
||||
<span item-left class="item-subtle">(8.1 mi)</span>
|
||||
<button secondary clear item-right>
|
||||
<ion-icon name="navigate"></ion-icon>
|
||||
Start
|
||||
</button>
|
||||
</ion-item>
|
||||
|
||||
</ion-card>
|
||||
|
||||
|
||||
</ion-content>
|
||||
@ -1,13 +0,0 @@
|
||||
import {Page} from 'ionic/ionic';
|
||||
import {forwardRef} from 'angular2/core';
|
||||
import {AndroidAttribute} from '../../helpers';
|
||||
|
||||
@Page({
|
||||
templateUrl: 'cards/advanced-social/template.html',
|
||||
directives: [forwardRef(() => AndroidAttribute)]
|
||||
})
|
||||
export class AdvancedSocialPage {
|
||||
constructor() {
|
||||
|
||||
}
|
||||
}
|
||||
@ -1,105 +0,0 @@
|
||||
|
||||
<ion-navbar *navbar hideBackButton class="show-navbar android-attr">
|
||||
<ion-title>Social Card</ion-title>
|
||||
</ion-navbar>
|
||||
|
||||
<ion-content class="has-header components-demo cards-bg">
|
||||
|
||||
<ion-card>
|
||||
|
||||
<ion-item>
|
||||
<ion-avatar item-left>
|
||||
<img src="img/marty-avatar.png">
|
||||
</ion-avatar>
|
||||
<h2>Marty McFly</h2>
|
||||
<p>November 5, 1955</p>
|
||||
</ion-item>
|
||||
|
||||
<img src="img/advance-card-bttf.png">
|
||||
|
||||
<ion-card-content>
|
||||
<p>Wait a minute. Wait a minute, Doc. Uhhh... Are you telling me that you built a time machine... out of a DeLorean?! Whoa. This is heavy.</p>
|
||||
</ion-card-content>
|
||||
|
||||
<ion-item actions class="demo-card">
|
||||
<button primary clear item-left>
|
||||
<ion-icon name="thumbs-up"></ion-icon>
|
||||
<div>12 Likes</div>
|
||||
</button>
|
||||
<button primary clear item-left>
|
||||
<ion-icon name="text"></ion-icon>
|
||||
<div>4 Comments</div>
|
||||
</button>
|
||||
<p item-left class="time-ago">
|
||||
11h ago
|
||||
</p>
|
||||
</ion-item>
|
||||
|
||||
</ion-card>
|
||||
|
||||
|
||||
<ion-card>
|
||||
|
||||
<ion-item>
|
||||
<ion-avatar item-left>
|
||||
<img src="img/sarah-avatar.png.jpeg">
|
||||
</ion-avatar>
|
||||
<h2>Sarah Connor</h2>
|
||||
<p>May 12, 1984</p>
|
||||
</ion-item>
|
||||
|
||||
<img src="img/advance-card-tmntr.jpg">
|
||||
|
||||
<ion-card-content>
|
||||
<p>I face the unknown future, with a sense of hope. Because if a machine, a Terminator, can learn the value of human life, maybe we can too.</p>
|
||||
</ion-card-content>
|
||||
|
||||
<ion-item actions class="demo-card">
|
||||
<button primary clear item-left>
|
||||
<ion-icon name="thumbs-up"></ion-icon>
|
||||
<div>30 Likes</div>
|
||||
</button>
|
||||
<button primary clear item-left>
|
||||
<ion-icon name="text"></ion-icon>
|
||||
<div>64 Comments</div>
|
||||
</button>
|
||||
<p item-left class="time-ago">
|
||||
30yr ago
|
||||
</p>
|
||||
</ion-item>
|
||||
|
||||
</ion-card>
|
||||
|
||||
|
||||
<ion-card>
|
||||
|
||||
<ion-item>
|
||||
<ion-avatar item-left>
|
||||
<img src="img/ian-avatar.png">
|
||||
</ion-avatar>
|
||||
<h2>Dr. Ian Malcolm</h2>
|
||||
<p>June 28, 1990</p>
|
||||
</ion-item>
|
||||
|
||||
<img src="img/advance-card-jp.jpg">
|
||||
|
||||
<ion-card-content>
|
||||
<p>Your scientists were so preoccupied with whether or not they could, that they didn"t stop to think if they should.</p>
|
||||
</ion-card-content>
|
||||
|
||||
<ion-item actions class="demo-card">
|
||||
<button primary clear item-left>
|
||||
<ion-icon name="thumbs-up"></ion-icon>
|
||||
<div>46 Likes</div>
|
||||
</button>
|
||||
<button primary clear item-left>
|
||||
<ion-icon name="text"></ion-icon>
|
||||
<div>66 Comments</div>
|
||||
</button>
|
||||
<p item-left class="time-ago">2d ago</p>
|
||||
</ion-item>
|
||||
|
||||
</ion-card>
|
||||
|
||||
|
||||
</ion-content>
|
||||
@ -1,13 +0,0 @@
|
||||
import {Page} from 'ionic/ionic';
|
||||
import {forwardRef} from 'angular2/core';
|
||||
import {AndroidAttribute} from '../../helpers';
|
||||
|
||||
@Page({
|
||||
templateUrl: 'cards/advanced-weather/template.html',
|
||||
directives: [forwardRef(() => AndroidAttribute)]
|
||||
})
|
||||
export class AdvancedWeatherPage {
|
||||
constructor() {
|
||||
|
||||
}
|
||||
}
|
||||
@ -1,125 +0,0 @@
|
||||
body.ios ion-card .advanced-weather-tabs tabbar {
|
||||
height: 88px;
|
||||
}
|
||||
body.md ion-card .advanced-weather-tabs tabbar {
|
||||
height: 100px;
|
||||
}
|
||||
body.md ion-card .advanced-weather-tabs tabbar a span.tab-button-text {
|
||||
text-transform: uppercase;
|
||||
}
|
||||
body.md .cards-bg tab-highlight {
|
||||
background-color: #fff !important;
|
||||
top: 0;
|
||||
}
|
||||
body.ios ion-card p.advanced-background-title-large span {
|
||||
font-weight: 300;
|
||||
}
|
||||
|
||||
|
||||
.preview-weather-cards {
|
||||
|
||||
ion-card ion-item.advanced-trans.item p {
|
||||
font-size: 12px;
|
||||
letter-spacing: 1.7px;
|
||||
font-weight: 500;
|
||||
opacity: 0.7;
|
||||
}
|
||||
ion-card ion-item.advanced-trans.item p {
|
||||
font-size: 12px;
|
||||
letter-spacing: 1.7px;
|
||||
font-weight: 500;
|
||||
opacity: 0.7;
|
||||
color: #fff !important;
|
||||
}
|
||||
|
||||
ion-card p.advanced-background-subtitle {
|
||||
font-size: 1.0em;
|
||||
position: absolute;
|
||||
top: 48%;
|
||||
width: 100%;
|
||||
color: #fff !important;
|
||||
}
|
||||
|
||||
.advanced-background {
|
||||
position: relative;
|
||||
text-align: center !important;
|
||||
}
|
||||
|
||||
ion-card ion-item.advanced-trans.item {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
padding: 12px 20px !important;
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
|
||||
ion-card p.advanced-background-title {
|
||||
position: absolute;
|
||||
top: 25%;
|
||||
font-size: 2.0em;
|
||||
width: 100%;
|
||||
font-weight: bold;
|
||||
color: #fff !important;
|
||||
}
|
||||
|
||||
ion-card p.advanced-background-title-large {
|
||||
top: 29%;
|
||||
font-weight: normal;
|
||||
font-size: 4.4em;
|
||||
color: #fff !important;
|
||||
}
|
||||
ion-card p.advanced-background-title-large span {
|
||||
vertical-align: top;
|
||||
padding-top: 5px;
|
||||
font-size: 72px;
|
||||
height: 74px;
|
||||
line-height: 1;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
ion-card .advanced-weather-tabs tabbar {
|
||||
background: transparent;
|
||||
border-top: none;
|
||||
}
|
||||
|
||||
ion-card .advanced-weather-tabs tabbar a {
|
||||
height: 100%;
|
||||
border-top: 2px solid transparent !important;
|
||||
border-bottom: 0px !important;
|
||||
}
|
||||
ion-card .advanced-weather-tabs tabbar a ion-icon.tab-button-icon {
|
||||
color: #fff;
|
||||
font-size: 2.8em;
|
||||
}
|
||||
ion-card .advanced-weather-tabs tabbar a span.tab-button-text {
|
||||
color: #fff;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
md-ripple {
|
||||
background: rgba(255,255,255, 0.15);
|
||||
}
|
||||
|
||||
ion-card .advanced-weather-tabs {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
background: transparent;
|
||||
}
|
||||
ion-card ion-item.advanced-trans.item {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
padding: 12px 20px !important;
|
||||
background: transparent;
|
||||
color: #fff !important;
|
||||
}
|
||||
}
|
||||
|
||||
ion-card .advanced-weather-tabs {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
background: transparent;
|
||||
}
|
||||
@ -1,69 +0,0 @@
|
||||
|
||||
<ion-navbar *navbar hideBackButton class="show-navbar android-attr">
|
||||
<ion-title>Weather Card</ion-title>
|
||||
</ion-navbar>
|
||||
|
||||
<ion-content class="has-header components-demo cards-bg preview-weather-cards">
|
||||
|
||||
<ion-card class="advanced-background">
|
||||
<img src="img/advance-card-alaska.jpg"/>
|
||||
|
||||
<ion-item class="advanced-trans">
|
||||
<p item-left>ALASKA, USA</p>
|
||||
<p item-right>SUN</p>
|
||||
</ion-item>
|
||||
|
||||
<p class="advanced-background-title advanced-background-title-large">
|
||||
<ion-icon name="moon"></ion-icon>
|
||||
<span>23°</span>
|
||||
</p>
|
||||
|
||||
<ion-tabs light class="advanced-weather-tabs" no-navbar tabbarPlacement="bottom">
|
||||
<ion-tab light tabTitle="Sun" tabIcon="sunny"></ion-tab>
|
||||
<ion-tab tabTitle="Mon" tabIcon="snow"></ion-tab>
|
||||
<ion-tab tabTitle="Tue" tabIcon="cloudy"></ion-tab>
|
||||
</ion-tabs>
|
||||
</ion-card>
|
||||
|
||||
<ion-card class="advanced-background">
|
||||
<img src="img/advance-card-machu-picchu-1.jpg"/>
|
||||
|
||||
<ion-item class="advanced-trans">
|
||||
<p item-left>MACHU PICCHU, PERU</p>
|
||||
<p item-right>TUE</p>
|
||||
</ion-item>
|
||||
|
||||
<p class="advanced-background-title advanced-background-title-large">
|
||||
<ion-icon name="sunny"></ion-icon>
|
||||
<span>78°</span>
|
||||
</p>
|
||||
|
||||
<ion-tabs light class="advanced-weather-tabs" no-navbar tabbarPlacement="bottom">
|
||||
<ion-tab light tabTitle="Tue" tabIcon="sunny"></ion-tab>
|
||||
<ion-tab tabTitle="Wed" tabIcon="partly-sunny"></ion-tab>
|
||||
<ion-tab tabTitle="Thr" tabIcon="cloudy"></ion-tab>
|
||||
</ion-tabs>
|
||||
</ion-card>
|
||||
|
||||
<ion-card class="advanced-background">
|
||||
<img src="img/advance-card-london.jpg"/>
|
||||
|
||||
<ion-item class="advanced-trans">
|
||||
<p item-left>LONDON, UK</p>
|
||||
<p item-right>SUN</p>
|
||||
</ion-item>
|
||||
|
||||
<p class="advanced-background-title advanced-background-title-large">
|
||||
<ion-icon name="thunderstorm"></ion-icon>
|
||||
<span>41°</span>
|
||||
</p>
|
||||
|
||||
<ion-tabs light class="advanced-weather-tabs" no-navbar tabbarPlacement="bottom">
|
||||
<ion-tab light tabTitle="Sun" tabIcon="thunderstorm"></ion-tab>
|
||||
<ion-tab tabTitle="Mon" tabIcon="rainy"></ion-tab>
|
||||
<ion-tab tabTitle="Tue" tabIcon="rainy"></ion-tab>
|
||||
</ion-tabs>
|
||||
</ion-card>
|
||||
|
||||
|
||||
</ion-content>
|
||||
@ -1,13 +0,0 @@
|
||||
import {Page} from 'ionic/ionic';
|
||||
import {forwardRef} from 'angular2/core';
|
||||
import {AndroidAttribute} from '../../helpers';
|
||||
|
||||
@Page({
|
||||
templateUrl: 'cards/background/template.html',
|
||||
directives: [forwardRef(() => AndroidAttribute)]
|
||||
})
|
||||
export class BackgroundPage {
|
||||
constructor() {
|
||||
|
||||
}
|
||||
}
|
||||
@ -1,54 +0,0 @@
|
||||
ion-content ion-card ion-item.advanced-trans p {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
ion-card p.advanced-background-subtitle {
|
||||
font-size: 1.0em;
|
||||
position: absolute;
|
||||
top: 48%;
|
||||
width: 100%;
|
||||
color: #fff !important;
|
||||
}
|
||||
|
||||
.advanced-background {
|
||||
position: relative;
|
||||
text-align: center !important;
|
||||
}
|
||||
|
||||
ion-card ion-item.advanced-trans.item {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
padding: 12px 20px !important;
|
||||
background: transparent;
|
||||
}
|
||||
ion-card ion-item.advanced-trans.item p {
|
||||
font-size: 12px;
|
||||
letter-spacing: 1.7px;
|
||||
font-weight: 500;
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
ion-card p.advanced-background-title {
|
||||
position: absolute;
|
||||
top: 25%;
|
||||
font-size: 2.0em;
|
||||
width: 100%;
|
||||
font-weight: bold;
|
||||
color: #fff !important;
|
||||
}
|
||||
|
||||
ion-card p.advanced-background-title-large {
|
||||
top: 29%;
|
||||
font-weight: normal;
|
||||
font-size: 4.4em;
|
||||
color: #fff !important;
|
||||
}
|
||||
ion-card p.advanced-background-title-large span {
|
||||
vertical-align: top;
|
||||
padding-top: 5px;
|
||||
font-size: 72px;
|
||||
height: 74px;
|
||||
line-height: 1;
|
||||
display: inline-block;
|
||||
}
|
||||
@ -1,36 +0,0 @@
|
||||
|
||||
<ion-navbar *navbar hideBackButton class="show-navbar android-attr">
|
||||
<ion-title>Background Images</ion-title>
|
||||
</ion-navbar>
|
||||
|
||||
<ion-content class="has-header components-demo cards-bg">
|
||||
|
||||
<ion-card class="advanced-background">
|
||||
<img src="img/card-saopaolo.png"/>
|
||||
<p class="advanced-background-title">São Paulo</p>
|
||||
<p class="advanced-background-subtitle">41 Listings</p>
|
||||
</ion-card>
|
||||
|
||||
<ion-card class="advanced-background">
|
||||
<img src="img/card-amsterdam.png"/>
|
||||
<p class="advanced-background-title">Amsterdam</p>
|
||||
<p class="advanced-background-subtitle">64 Listings</p>
|
||||
</ion-card>
|
||||
|
||||
<ion-card class="advanced-background">
|
||||
<img src="img/card-sf.png"/>
|
||||
<p class="advanced-background-title">San Francisco</p>
|
||||
<p class="advanced-background-subtitle">72 Listings</p>
|
||||
</ion-card>
|
||||
|
||||
<ion-card class="advanced-background">
|
||||
<img src="img/card-madison.png"/>
|
||||
<p class="advanced-background-title">Madison</p>
|
||||
<p class="advanced-background-subtitle">28 Listings</p>
|
||||
</ion-card>
|
||||
|
||||
</ion-content>
|
||||
|
||||
|
||||
|
||||
|
||||
@ -1,13 +0,0 @@
|
||||
import {Page} from 'ionic/ionic';
|
||||
import {forwardRef} from 'angular2/core';
|
||||
import {AndroidAttribute} from '../../helpers';
|
||||
|
||||
@Page({
|
||||
templateUrl: 'cards/basic/template.html',
|
||||
directives: [forwardRef(() => AndroidAttribute)]
|
||||
})
|
||||
export class BasicPage {
|
||||
constructor() {
|
||||
|
||||
}
|
||||
}
|
||||
@ -1,21 +0,0 @@
|
||||
|
||||
<ion-navbar *navbar hideBackButton class="show-navbar android-attr">
|
||||
<ion-title>Basic Cards</ion-title>
|
||||
</ion-navbar>
|
||||
|
||||
<ion-content class="has-header components-demo cards-bg">
|
||||
|
||||
<ion-card>
|
||||
|
||||
<ion-card-content>
|
||||
This is just your basic card with some text to boot. Like it? Keep scrolling...
|
||||
</ion-card-content>
|
||||
|
||||
</ion-card>
|
||||
|
||||
|
||||
</ion-content>
|
||||
|
||||
|
||||
|
||||
|
||||
@ -1,8 +0,0 @@
|
||||
export * from './advanced-map/pages';
|
||||
export * from './advanced-social/pages';
|
||||
export * from './advanced-weather/pages';
|
||||
export * from './background/pages';
|
||||
export * from './basic/pages';
|
||||
export * from './header/pages';
|
||||
export * from './image/pages';
|
||||
export * from './list/pages';
|
||||
@ -1,13 +0,0 @@
|
||||
import {Page} from 'ionic/ionic';
|
||||
import {forwardRef} from 'angular2/core';
|
||||
import {AndroidAttribute} from '../../helpers';
|
||||
|
||||
@Page({
|
||||
templateUrl: 'cards/header/template.html',
|
||||
directives: [forwardRef(() => AndroidAttribute)]
|
||||
})
|
||||
export class HeaderPage {
|
||||
constructor() {
|
||||
|
||||
}
|
||||
}
|
||||
@ -1,25 +0,0 @@
|
||||
|
||||
<ion-navbar *navbar hideBackButton class="show-navbar android-attr">
|
||||
<ion-title>Card Headers</ion-title>
|
||||
</ion-navbar>
|
||||
|
||||
<ion-content class="has-header components-demo cards-bg">
|
||||
|
||||
<ion-card>
|
||||
|
||||
<ion-card-header>
|
||||
Header
|
||||
</ion-card-header>
|
||||
|
||||
<ion-card-content>
|
||||
The British use the term "header", but the American term "head-shot" the English simply refuse to adopt.
|
||||
</ion-card-content>
|
||||
|
||||
</ion-card>
|
||||
|
||||
|
||||
</ion-content>
|
||||
|
||||
|
||||
|
||||
|
||||
@ -1,13 +0,0 @@
|
||||
import {Page} from 'ionic/ionic';
|
||||
import {forwardRef} from 'angular2/core';
|
||||
import {AndroidAttribute} from '../../helpers';
|
||||
|
||||
@Page({
|
||||
templateUrl: 'cards/image/template.html',
|
||||
directives: [forwardRef(() => AndroidAttribute)]
|
||||
})
|
||||
export class ImagePage {
|
||||
constructor() {
|
||||
|
||||
}
|
||||
}
|
||||
@ -1,136 +0,0 @@
|
||||
|
||||
<ion-navbar *navbar hideBackButton class="show-navbar android-attr">
|
||||
<ion-title>Card Images</ion-title>
|
||||
</ion-navbar>
|
||||
|
||||
<ion-content class="has-header components-demo cards-bg">
|
||||
|
||||
<ion-card>
|
||||
|
||||
<img src="img/nin-live.png"/>
|
||||
|
||||
<ion-card-content>
|
||||
<h2 class="card-title">
|
||||
Nine Inch Nails Live
|
||||
</h2>
|
||||
<p>
|
||||
The most popular industrial group ever, and largely responsible for bringing the music to a mass audience.
|
||||
</p>
|
||||
</ion-card-content>
|
||||
|
||||
<ion-item actions class="demo-card">
|
||||
<button clear item-left danger>
|
||||
<ion-icon name="star"></ion-icon>
|
||||
Favorite
|
||||
</button>
|
||||
<button clear item danger>
|
||||
<ion-icon name="musical-notes"></ion-icon>
|
||||
Listen
|
||||
</button>
|
||||
<button clear item-right danger>
|
||||
<ion-icon name="share-alt"></ion-icon>
|
||||
Share
|
||||
</button>
|
||||
</ion-item>
|
||||
|
||||
</ion-card>
|
||||
|
||||
<ion-card>
|
||||
|
||||
<div>
|
||||
<img src="img/badu-live.png"/>
|
||||
</div>
|
||||
|
||||
<ion-card-content>
|
||||
<h2 class="card-title">
|
||||
Erykah Badu
|
||||
</h2>
|
||||
<p>
|
||||
American singer-songwriter, record producer, activist, and actress, Badu"s style is a prime example of neo-soul.
|
||||
</p>
|
||||
</ion-card-content>
|
||||
|
||||
<ion-item actions class="demo-card">
|
||||
<button clear item-left danger>
|
||||
<ion-icon name="star"></ion-icon>
|
||||
Favorite
|
||||
</button>
|
||||
<button clear item danger>
|
||||
<ion-icon name="musical-notes"></ion-icon>
|
||||
Listen
|
||||
</button>
|
||||
<button clear item-right danger>
|
||||
<ion-icon name="share-alt"></ion-icon>
|
||||
Share
|
||||
</button>
|
||||
</ion-item>
|
||||
|
||||
</ion-card>
|
||||
|
||||
<ion-card>
|
||||
|
||||
<div>
|
||||
<img src="img/queen-live.png"/>
|
||||
</div>
|
||||
|
||||
<ion-card-content>
|
||||
<h2 class="card-title">
|
||||
Queen
|
||||
</h2>
|
||||
<p>
|
||||
The British rock band formed in London in 1970, and is considered one of the biggest stadium rock bands in the world.
|
||||
</p>
|
||||
</ion-card-content>
|
||||
|
||||
<ion-item actions class="demo-card">
|
||||
<button clear item-left danger>
|
||||
<ion-icon name="star"></ion-icon>
|
||||
Favorite
|
||||
</button>
|
||||
<button clear item danger>
|
||||
<ion-icon name="musical-notes"></ion-icon>
|
||||
Listen
|
||||
</button>
|
||||
<button clear item-right danger>
|
||||
<ion-icon name="share-alt"></ion-icon>
|
||||
Share
|
||||
</button>
|
||||
</ion-item>
|
||||
|
||||
</ion-card>
|
||||
|
||||
<ion-card>
|
||||
|
||||
<div>
|
||||
<img src="img/rundmc-live.png"/>
|
||||
</div>
|
||||
|
||||
<ion-card-content>
|
||||
<h2 class="card-title">
|
||||
Run-D.M.C.
|
||||
</h2>
|
||||
<p>
|
||||
The American hip hop group widely acknowledged as one of the most influential acts in the history of hip hop.
|
||||
</p>
|
||||
</ion-card-content>
|
||||
|
||||
<ion-item actions class="demo-card">
|
||||
<button clear item-left danger>
|
||||
<ion-icon name="star"></ion-icon>
|
||||
Favorite
|
||||
</button>
|
||||
<button clear item danger>
|
||||
<ion-icon name="musical-notes"></ion-icon>
|
||||
Listen
|
||||
</button>
|
||||
<button clear item-right danger>
|
||||
<ion-icon name="share-alt"></ion-icon>
|
||||
Share
|
||||
</button>
|
||||
</ion-item>
|
||||
|
||||
</ion-card>
|
||||
|
||||
|
||||
|
||||
</ion-content>
|
||||
@ -1,13 +0,0 @@
|
||||
import {Page} from 'ionic/ionic';
|
||||
import {forwardRef} from 'angular2/core';
|
||||
import {AndroidAttribute} from '../../helpers';
|
||||
|
||||
@Page({
|
||||
templateUrl: 'cards/list/template.html',
|
||||
directives: [forwardRef(() => AndroidAttribute)]
|
||||
})
|
||||
export class ListPage {
|
||||
constructor() {
|
||||
|
||||
}
|
||||
}
|
||||
@ -1,7 +0,0 @@
|
||||
ion-card.cards-list-demo ion-card-header {
|
||||
color: #387df5;
|
||||
}
|
||||
|
||||
ion-card.cards-list-demo a > icon {
|
||||
color: #444444;
|
||||
}
|
||||
@ -1,47 +0,0 @@
|
||||
|
||||
<ion-navbar *navbar hideBackButton class="show-navbar android-attr">
|
||||
<ion-title>Card Lists</ion-title>
|
||||
</ion-navbar>
|
||||
|
||||
<ion-content class="has-header components-demo cards-bg">
|
||||
|
||||
<ion-card class="cards-list-demo">
|
||||
<ion-card-header>
|
||||
Explore Nearby
|
||||
</ion-card-header>
|
||||
|
||||
<ion-list>
|
||||
<button ion-item>
|
||||
<ion-icon name="cart" item-left></ion-icon>
|
||||
Shopping
|
||||
</button>
|
||||
|
||||
<button ion-item>
|
||||
<ion-icon name="medical" item-left></ion-icon>
|
||||
Hospital
|
||||
</button>
|
||||
|
||||
<button ion-item>
|
||||
<ion-icon name="cafe" item-left></ion-icon>
|
||||
Cafe
|
||||
</button>
|
||||
|
||||
<button ion-item>
|
||||
<ion-icon name="paw" item-left></ion-icon>
|
||||
Dog Park
|
||||
</button>
|
||||
|
||||
<button ion-item>
|
||||
<ion-icon name="beer" item-left></ion-icon>
|
||||
Pub
|
||||
</button>
|
||||
|
||||
<button ion-item>
|
||||
<ion-icon name="planet" item-left></ion-icon>
|
||||
Space
|
||||
</button>
|
||||
|
||||
</ion-list>
|
||||
</ion-card>
|
||||
|
||||
</ion-content>
|
||||
@ -1,13 +0,0 @@
|
||||
import {Page} from 'ionic/ionic';
|
||||
import {forwardRef} from 'angular2/core';
|
||||
import {AndroidAttribute} from '../../helpers';
|
||||
|
||||
@Page({
|
||||
templateUrl: 'grid/basic/template.html',
|
||||
directives: [forwardRef(() => AndroidAttribute)]
|
||||
})
|
||||
export class BasicPage {
|
||||
constructor() {
|
||||
|
||||
}
|
||||
}
|
||||
@ -1,11 +0,0 @@
|
||||
.grid-page {
|
||||
|
||||
ion-col div {
|
||||
background-color: #F9FAFB;
|
||||
padding: 5px;
|
||||
border: 1px solid #ddd;
|
||||
border-radius: 2px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
}
|
||||
@ -1,66 +0,0 @@
|
||||
|
||||
<ion-navbar *navbar hideBackButton class="show-navbar android-attr">
|
||||
<ion-title>Grid</ion-title>
|
||||
</ion-navbar>
|
||||
|
||||
<ion-content class="has-header grid-page">
|
||||
<ion-row>
|
||||
<ion-col><div>col</div></ion-col>
|
||||
<ion-col><div>col</div></ion-col>
|
||||
<ion-col><div>col</div></ion-col>
|
||||
<ion-col>
|
||||
<div>
|
||||
col<br>
|
||||
3 lines<br>
|
||||
of text<br>
|
||||
</div>
|
||||
</ion-col>
|
||||
</ion-row>
|
||||
|
||||
<ion-row center>
|
||||
<ion-col><div>col</div></ion-col>
|
||||
<ion-col><div>col</div></ion-col>
|
||||
<ion-col><div>col</div></ion-col>
|
||||
<ion-col>
|
||||
<div>
|
||||
col<br>
|
||||
3 lines<br>
|
||||
center<br>
|
||||
</div>
|
||||
</ion-col>
|
||||
</ion-row>
|
||||
|
||||
<ion-row center>
|
||||
<ion-col class="col-offset-25"><div>col</div></ion-col>
|
||||
<ion-col><div>col</div></ion-col>
|
||||
<ion-col>
|
||||
<div>
|
||||
col<br>
|
||||
3 lines<br>
|
||||
center<br>
|
||||
</div>
|
||||
</ion-col>
|
||||
</ion-row>
|
||||
|
||||
<ion-row baseline>
|
||||
<ion-col class="col-offset-50"><div>col</div></ion-col>
|
||||
<ion-col>
|
||||
<div>
|
||||
col<br>
|
||||
3 lines<br>
|
||||
baseline<br>
|
||||
</div>
|
||||
</ion-col>
|
||||
</ion-row>
|
||||
|
||||
<ion-row baseline>
|
||||
<ion-col class="col-offset-75">
|
||||
<div>
|
||||
col<br>
|
||||
2 lines<br>
|
||||
</div>
|
||||
</ion-col>
|
||||
</ion-row>
|
||||
|
||||
|
||||
</ion-content>
|
||||
@ -1 +0,0 @@
|
||||
export * from './basic/pages';
|
||||
@ -1,154 +0,0 @@
|
||||
import {Directive, ElementRef, Renderer} from 'angular2/core';
|
||||
import {Platform, Navbar} from 'ionic/ionic';
|
||||
|
||||
import * as actionSheets from './action-sheets/action-sheets';
|
||||
import * as badges from './badge/badge';
|
||||
import * as buttons from './buttons/buttons';
|
||||
import * as cards from './cards/cards';
|
||||
import * as grid from './grid/grid';
|
||||
import * as labels from './labels/labels';
|
||||
import * as icons from './icons/icons';
|
||||
import * as inputs from './inputs/inputs';
|
||||
import * as lists from './lists/lists';
|
||||
import * as menus from './menus/menus';
|
||||
import * as modals from './modals/modals';
|
||||
import * as navigation from './navigation/navigation';
|
||||
import * as alerts from './alerts/alerts';
|
||||
import * as slides from './slides/slides';
|
||||
import * as tabs from './tabs/tabs';
|
||||
|
||||
|
||||
@Directive({
|
||||
selector: '.android-attr',
|
||||
})
|
||||
export class AndroidAttribute {
|
||||
|
||||
constructor (platform: Platform, elementRef: ElementRef, renderer: Renderer) {
|
||||
this.isAndroid = platform.is('android');
|
||||
renderer.setElementAttribute(elementRef, 'primary', this.isAndroid ? true : null);
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
export function toTitleCase(str) {
|
||||
return str.replace(/\w\S*/g, function(txt){return txt.charAt(0).toUpperCase() + txt.substr(1).toLowerCase();});
|
||||
}
|
||||
|
||||
export function hasScrollbar() {
|
||||
|
||||
if (typeof window.top.innerWidth === 'number') {
|
||||
return window.top.innerWidth > window.top.document.documentElement.clientWidth;
|
||||
}
|
||||
|
||||
// rootElem for quirksmode
|
||||
var rootElem = window.top.document.documentElement || window.top.document.body;
|
||||
|
||||
// Check overflow style property on body for fauxscrollbars
|
||||
var overflowStyle;
|
||||
|
||||
if (typeof rootElem.currentStyle !== 'undefined') {
|
||||
overflowStyle = rootElem.currentStyle.overflow;
|
||||
}
|
||||
|
||||
overflowStyle = overflowStyle || window.top.getComputedStyle(rootElem, '').overflow;
|
||||
|
||||
// Also need to check the Y axis overflow
|
||||
var overflowYStyle;
|
||||
|
||||
if (typeof rootElem.currentStyle !== 'undefined') {
|
||||
overflowYStyle = rootElem.currentStyle.overflowY;
|
||||
}
|
||||
|
||||
overflowYStyle = overflowYStyle || window.top.getComputedStyle(rootElem, '').overflowY;
|
||||
|
||||
var contentOverflows = rootElem.scrollHeight > rootElem.clientHeight;
|
||||
var overflowShown = /^(visible|auto)$/.test(overflowStyle) || /^(visible|auto)$/.test(overflowYStyle);
|
||||
var alwaysShowScroll = overflowStyle === 'scroll' || overflowYStyle === 'scroll';
|
||||
|
||||
return (contentOverflows && overflowShown) || (alwaysShowScroll)
|
||||
}
|
||||
|
||||
export function getPageFor(hash) {
|
||||
return {
|
||||
'overview': actionSheets.BasicPage,
|
||||
'action-sheets': actionSheets.BasicPage,
|
||||
'alert': alerts.BasicPage,
|
||||
|
||||
'badges': badges.BasicPage,
|
||||
|
||||
'buttons': buttons.BasicPage,
|
||||
'block-buttons': buttons.BlockPage,
|
||||
'clear-buttons': buttons.ClearPage,
|
||||
'full-buttons': buttons.FullPage,
|
||||
'outline-buttons': buttons.OutlinePage,
|
||||
'round-buttons': buttons.RoundPage,
|
||||
'floating-action-buttons': buttons.FabPage,
|
||||
'buttons-in-components': buttons.ComponentsPage,
|
||||
'button-sizes': buttons.SizesPage,
|
||||
'icon-buttons': buttons.IconsPage,
|
||||
|
||||
'cards': cards.BasicPage,
|
||||
'card-header': cards.HeaderPage,
|
||||
'card-list': cards.ListPage,
|
||||
'card-image': cards.ImagePage,
|
||||
'card-background': cards.BackgroundPage,
|
||||
'advanced-cards': cards.AdvancedSocialPage,
|
||||
'card-advanced-map': cards.AdvancedMapPage,
|
||||
'card-advanced-social': cards.AdvancedSocialPage,
|
||||
'card-advanced-weather': cards.AdvancedWeatherPage,
|
||||
|
||||
'checkbox': inputs.CheckboxPage,
|
||||
'radio': inputs.RadioPage,
|
||||
'range': inputs.RangePage,
|
||||
'segment': inputs.SegmentPage,
|
||||
'select': inputs.SelectPage,
|
||||
'searchbar': inputs.SearchPage,
|
||||
'toggle': inputs.TogglePage,
|
||||
|
||||
|
||||
'inputs': labels.BasicPage,
|
||||
'fixed-inline-labels': labels.FixedInlinePage,
|
||||
'floating-labels': labels.FloatingPage,
|
||||
'inline-labels': labels.InlinePage,
|
||||
'inset-labels': labels.InsetPage,
|
||||
'placeholder-labels': labels.PlaceholderPage,
|
||||
'stacked-labels': labels.StackedPage,
|
||||
|
||||
'icons': icons.BasicPage,
|
||||
'grid': grid.BasicPage,
|
||||
|
||||
'lists': lists.BasicPage,
|
||||
'list-lines': lists.BasicPage,
|
||||
'list-no-lines': lists.NoLinesPage,
|
||||
'avatar-list': lists.AvatarPage,
|
||||
'icon-list': lists.IconPage,
|
||||
'inset-list': lists.InsetPage,
|
||||
'list-headers': lists.HeadersPage,
|
||||
'multiline-list': lists.MultilinePage,
|
||||
'thumbnail-list': lists.ThumbnailPage,
|
||||
|
||||
'menus': menus.BasicPage,
|
||||
'modals': modals.BasicPage,
|
||||
'navigation': navigation.BasicPage,
|
||||
'slides': slides.BasicPage,
|
||||
|
||||
'tabs': tabs.BasicPage,
|
||||
'tabs-icon': tabs.IconPage,
|
||||
'tabs-icon-text': tabs.IconTextPage,
|
||||
}[hash]
|
||||
}
|
||||
|
||||
export function debounce(func, wait, immediate) {
|
||||
var timeout;
|
||||
return function() {
|
||||
var context = this, args = arguments;
|
||||
var later = function() {
|
||||
timeout = null;
|
||||
if (!immediate) func.apply(context, args);
|
||||
};
|
||||
var callNow = immediate && !timeout;
|
||||
clearTimeout(timeout);
|
||||
timeout = setTimeout(later, wait);
|
||||
if (callNow) func.apply(context, args);
|
||||
};
|
||||
};
|
||||
@ -1,13 +0,0 @@
|
||||
import {Page} from 'ionic/ionic';
|
||||
import {forwardRef} from 'angular2/core';
|
||||
import {AndroidAttribute} from '../../helpers';
|
||||
|
||||
@Page({
|
||||
templateUrl: 'icons/basic/template.html',
|
||||
directives: [forwardRef(() => AndroidAttribute)]
|
||||
})
|
||||
export class BasicPage {
|
||||
constructor() {
|
||||
|
||||
}
|
||||
}
|
||||
@ -1,7 +0,0 @@
|
||||
.preview-icons {
|
||||
text-align: center;
|
||||
|
||||
ion-icon {
|
||||
font-size: 2em;
|
||||
}
|
||||
}
|
||||
@ -1,74 +0,0 @@
|
||||
|
||||
<ion-navbar *navbar hideBackButton class="show-navbar android-attr">
|
||||
<ion-title>Icons</ion-title>
|
||||
</ion-navbar>
|
||||
|
||||
<ion-content class="has-header preview-icons">
|
||||
|
||||
<ion-row>
|
||||
<ion-col><ion-icon name="ionic"></ion-icon></ion-col>
|
||||
<ion-col><ion-icon name="angular-logo"></ion-icon></ion-col>
|
||||
<ion-col><ion-icon name="ionitron"></ion-icon></ion-col>
|
||||
</ion-row>
|
||||
|
||||
<ion-row>
|
||||
<ion-col><ion-icon name="heart"></ion-icon></ion-col>
|
||||
<ion-col><ion-icon name="apps"></ion-icon></ion-col>
|
||||
<ion-col><ion-icon name="happy"></ion-icon></ion-col>
|
||||
</ion-row>
|
||||
|
||||
<ion-row>
|
||||
<ion-col><ion-icon name="people"></ion-icon></ion-col>
|
||||
<ion-col><ion-icon name="person"></ion-icon></ion-col>
|
||||
<ion-col><ion-icon name="contact"></ion-icon></ion-col>
|
||||
</ion-row>
|
||||
|
||||
<ion-row>
|
||||
<ion-col><ion-icon name="lock"></ion-icon></ion-col>
|
||||
<ion-col><ion-icon name="key"></ion-icon></ion-col>
|
||||
<ion-col><ion-icon name="unlock"></ion-icon></ion-col>
|
||||
</ion-row>
|
||||
|
||||
<ion-row>
|
||||
<ion-col><ion-icon name="map"></ion-icon></ion-col>
|
||||
<ion-col><ion-icon name="navigate"></ion-icon></ion-col>
|
||||
<ion-col><ion-icon name="pin"></ion-icon></ion-col>
|
||||
</ion-row>
|
||||
|
||||
<ion-row>
|
||||
<ion-col><ion-icon name="mic"></ion-icon></ion-col>
|
||||
<ion-col><ion-icon name="musical-notes"></ion-icon></ion-col>
|
||||
<ion-col><ion-icon name="volume-up"></ion-icon></ion-col>
|
||||
</ion-row>
|
||||
|
||||
<ion-row>
|
||||
<ion-col><ion-icon name="cafe"></ion-icon></ion-col>
|
||||
<ion-col><ion-icon name="calculator"></ion-icon></ion-col>
|
||||
<ion-col><ion-icon name="bus"></ion-icon></ion-col>
|
||||
</ion-row>
|
||||
|
||||
<ion-row>
|
||||
<ion-col><ion-icon name="camera"></ion-icon></ion-col>
|
||||
<ion-col><ion-icon name="cube"></ion-icon></ion-col>
|
||||
<ion-col><ion-icon name="image"></ion-icon></ion-col>
|
||||
</ion-row>
|
||||
|
||||
<ion-row>
|
||||
<ion-col><ion-icon name="star"></ion-icon></ion-col>
|
||||
<ion-col><ion-icon name="wine"></ion-icon></ion-col>
|
||||
<ion-col><ion-icon name="pin"></ion-icon></ion-col>
|
||||
</ion-row>
|
||||
|
||||
<ion-row>
|
||||
<ion-col><ion-icon name="arrow-back"></ion-icon></ion-col>
|
||||
<ion-col><ion-icon name="arrow-dropdown"></ion-icon></ion-col>
|
||||
<ion-col><ion-icon name="arrow-forward"></ion-icon></ion-col>
|
||||
</ion-row>
|
||||
|
||||
<ion-row>
|
||||
<ion-col><ion-icon name="sunny"></ion-icon></ion-col>
|
||||
<ion-col><ion-icon name="umbrella"></ion-icon></ion-col>
|
||||
<ion-col><ion-icon name="rainy"></ion-icon></ion-col>
|
||||
</ion-row>
|
||||
|
||||
</ion-content>
|
||||
@ -1 +0,0 @@
|
||||
export * from './basic/pages';
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 124 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 140 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 157 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 110 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 204 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 147 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 151 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 174 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 125 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 3.6 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.2 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.2 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 16 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 7.3 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 15 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 15 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 10 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 18 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 18 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 13 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 14 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 12 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 14 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 12 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 12 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 19 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 16 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 12 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 188 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 443 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 438 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 465 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 415 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 403 KiB |
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user