mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2025-08-20 04:14:21 +08:00
Merge branch '2.0' of https://github.com/driftyco/ionic into ins_n_outs
This commit is contained in:
mhartington
33
CHANGELOG.md
33
CHANGELOG.md
@ -1,3 +1,36 @@
|
||||
<a name="2.0.0-beta.0"></a>
|
||||
# 2.0.0-beta.0
|
||||
|
||||
Enjoy!
|
||||
|
||||
<3 The Ionic Team
|
||||
|
||||
|
||||
|
||||
<a name="2.0.0-alpha.57"></a>
|
||||
# [2.0.0-alpha.57](https://github.com/driftyco/ionic/compare/v2.0.0-alpha.56...v2.0.0-alpha.57) (2016-02-10)
|
||||
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
* **button:** bar-button uses inner span as flexbox ([38a3be4](https://github.com/driftyco/ionic/commit/38a3be4))
|
||||
|
||||
### Features
|
||||
|
||||
* Improved transitions and animations
|
||||
* hairlines width can be configured with a sass variable ([06b3a5b](https://github.com/driftyco/ionic/commit/06b3a5b))
|
||||
* **ion-item-sliding:** style icons on top of text in an option button ([4e57fcf](https://github.com/driftyco/ionic/commit/4e57fcf)), closes [#5352](https://github.com/driftyco/ionic/issues/5352)
|
||||
|
||||
### Refactor
|
||||
|
||||
* **animations:** no longer using Web Animations polyfill ([da18868](https://github.com/driftyco/ionic/commit/da18868))
|
||||
|
||||
### Breaking Changes
|
||||
|
||||
The Web Animations polyfill is no longer shipped with the framework and may cause build errors.
|
||||
|
||||
Projects will need to be [updated accordingly](https://github.com/driftyco/ionic-conference-app/commit/2ed59e6fd275c4616792c7b2e5aa9da4a20fb188).
|
||||
|
||||
<a name="2.0.0-alpha.56"></a>
|
||||
# [2.0.0-alpha.56](https://github.com/driftyco/ionic/compare/v2.0.0-alpha.55...v2.0.0-alpha.56) (2016-02-05)
|
||||
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
[](http://commitizen.github.io/cz-cli/)
|
||||
|
||||
# Ionic 2: Alpha
|
||||
# Ionic 2: Beta
|
||||
|
||||
Ionic 2 is the next generation of [Ionic](http://ionicframework.com/), the open-source mobile app development SDK that makes it easy to build top quality mobile apps with web technologies.
|
||||
|
||||
|
||||
@ -97,7 +97,6 @@ $button-ios-small-icon-font-size: 1.3em !default;
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
|
||||
// iOS Full Button
|
||||
// --------------------------------------------------
|
||||
|
||||
@ -105,11 +104,10 @@ $button-ios-small-icon-font-size: 1.3em !default;
|
||||
margin-right: 0;
|
||||
margin-left: 0;
|
||||
border-radius: 0;
|
||||
border-left: none;
|
||||
border-right: none;
|
||||
border-right-width: 0;
|
||||
border-left-width: 0;
|
||||
}
|
||||
|
||||
|
||||
// iOS Outline Button
|
||||
// --------------------------------------------------
|
||||
|
||||
|
||||
@ -58,7 +58,7 @@ $button-md-small-icon-font-size: 1.4em !default;
|
||||
color $button-md-transition-duration $button-md-animation-curve;
|
||||
|
||||
&:hover:not(.disable-hover) {
|
||||
background-color: $button-md-clear-hover-background-color;
|
||||
background-color: $button-md-color;
|
||||
}
|
||||
|
||||
&.activated {
|
||||
@ -85,6 +85,10 @@ $button-md-small-icon-font-size: 1.4em !default;
|
||||
color: $fg-color;
|
||||
background-color: $bg-color;
|
||||
|
||||
&:hover:not(.disable-hover) {
|
||||
background-color: $bg-color;
|
||||
}
|
||||
|
||||
&.activated {
|
||||
opacity: 1;
|
||||
background-color: $bg-color-activated;
|
||||
@ -117,28 +121,25 @@ $button-md-small-icon-font-size: 1.4em !default;
|
||||
font-size: $button-md-small-icon-font-size;
|
||||
}
|
||||
|
||||
// Material Design Block Button
|
||||
// --------------------------------------------------
|
||||
|
||||
.button-block {
|
||||
margin-left: 0;
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
// Material Design Full Button
|
||||
// --------------------------------------------------
|
||||
|
||||
.button-full {
|
||||
border-radius: 0;
|
||||
margin-right: 0;
|
||||
margin-left: 0;
|
||||
border-radius: 0;
|
||||
border-right-width: 0;
|
||||
border-left-width: 0;
|
||||
}
|
||||
|
||||
|
||||
// Material Design Block Button
|
||||
// --------------------------------------------------
|
||||
|
||||
.button-block {
|
||||
margin-right: 0;
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
|
||||
// Material Design Outline Button
|
||||
// --------------------------------------------------
|
||||
|
||||
@ -150,6 +151,10 @@ $button-md-small-icon-font-size: 1.4em !default;
|
||||
color: $button-md-color;
|
||||
box-shadow: none;
|
||||
|
||||
&:hover:not(.disable-hover) {
|
||||
background-color: $button-md-clear-hover-background-color;
|
||||
}
|
||||
|
||||
&.activated {
|
||||
opacity: 1;
|
||||
box-shadow: none;
|
||||
@ -173,6 +178,10 @@ $button-md-small-icon-font-size: 1.4em !default;
|
||||
background-color: transparent;
|
||||
color: $fg-color;
|
||||
|
||||
&:hover:not(.disable-hover) {
|
||||
background-color: $button-md-clear-hover-background-color;
|
||||
}
|
||||
|
||||
&.activated {
|
||||
background-color: transparent;
|
||||
}
|
||||
@ -201,7 +210,7 @@ $button-md-small-icon-font-size: 1.4em !default;
|
||||
}
|
||||
|
||||
&:hover:not(.disable-hover) {
|
||||
color: $button-md-color;
|
||||
background-color: $button-md-clear-hover-background-color;
|
||||
}
|
||||
|
||||
ion-button-effect {
|
||||
|
||||
@ -30,16 +30,16 @@ $button-round-border-radius: 64px !default;
|
||||
}
|
||||
|
||||
.button-inner {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-shrink: 0;
|
||||
flex-flow: row nowrap;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
display: flex;
|
||||
flex-shrink: 0;
|
||||
flex-flow: row nowrap;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
a.button {
|
||||
a.button, a[button] {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
@ -54,7 +54,7 @@ a.button {
|
||||
// --------------------------------------------------
|
||||
|
||||
.button-block {
|
||||
display: flex;
|
||||
display: block;
|
||||
clear: both;
|
||||
width: 100%;
|
||||
|
||||
@ -68,6 +68,7 @@ a.button {
|
||||
// --------------------------------------------------
|
||||
|
||||
.button-full {
|
||||
display: block;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
|
||||
@ -9,17 +9,17 @@
|
||||
|
||||
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAAAAACH5BAAAAAAALAAAAAABAAEAAAICTAEAOw==">
|
||||
<button fab fab-right fab-top>
|
||||
<icon pin></icon>
|
||||
<ion-icon name="pin"></ion-icon>
|
||||
</button>
|
||||
|
||||
<ion-item>
|
||||
<icon item-left large football></icon>
|
||||
<ion-icon item-left large name="football"></ion-icon>
|
||||
<h2>Museum of Football</h2>
|
||||
<p>11 N. Way St, Madison, WI 53703</p>
|
||||
</ion-item>
|
||||
|
||||
<ion-item>
|
||||
<icon item-left large wine></icon>
|
||||
<ion-icon item-left large name="wine"></ion-icon>
|
||||
<h2>Institute of Fine Cocktails</h2>
|
||||
<p>14 S. Hop Avenue, Madison, WI 53703</p>
|
||||
</ion-item>
|
||||
@ -28,7 +28,7 @@
|
||||
<span item-left>18 min</span>
|
||||
<span item-left>(2.6 mi)</span>
|
||||
<button primary clear item-right>
|
||||
<icon navigate></icon>
|
||||
<ion-icon name="navigate"></ion-icon>
|
||||
Start
|
||||
</button>
|
||||
</ion-item>
|
||||
@ -39,17 +39,17 @@
|
||||
|
||||
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAAAAACH5BAAAAAAALAAAAAABAAEAAAICTAEAOw==">
|
||||
<button danger fab fab-right fab-top>
|
||||
<icon pin></icon>
|
||||
<ion-icon name="pin"></ion-icon>
|
||||
</button>
|
||||
|
||||
<ion-item>
|
||||
<icon item-left large cloud></icon>
|
||||
<ion-icon item-left large name="cloud"></ion-icon>
|
||||
<h2>Yoshi's Island</h2>
|
||||
<p>Iggy Koopa</p>
|
||||
</ion-item>
|
||||
|
||||
<ion-item>
|
||||
<icon item-left large leaf></icon>
|
||||
<ion-icon item-left large name="leaf"></ion-icon>
|
||||
<h2>Forest of Illusion</h2>
|
||||
<p>Roy Koopa</p>
|
||||
</ion-item>
|
||||
@ -58,7 +58,7 @@
|
||||
<span item-left>3 hr</span>
|
||||
<span item-left>(4.8 mi)</span>
|
||||
<button danger clear item-right>
|
||||
<icon navigate></icon>
|
||||
<ion-icon name="navigate"></ion-icon>
|
||||
Start
|
||||
</button>
|
||||
</ion-item>
|
||||
@ -69,17 +69,17 @@
|
||||
|
||||
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAAAAACH5BAAAAAAALAAAAAABAAEAAAICTAEAOw==">
|
||||
<button secondary fab fab-right fab-top>
|
||||
<icon pin></icon>
|
||||
<ion-icon name="pin"></ion-icon>
|
||||
</button>
|
||||
|
||||
<ion-item>
|
||||
<icon item-left large information-circle></icon>
|
||||
<ion-icon item-left large name="information-circle"></ion-icon>
|
||||
<h2>Museum of Information</h2>
|
||||
<p>44 Rue de Info, 75010 Paris, France</p>
|
||||
</ion-item>
|
||||
|
||||
<ion-item>
|
||||
<icon item-left large leaf></icon>
|
||||
<ion-icon item-left large name="leaf"></ion-icon>
|
||||
<h2>General Pharmacy</h2>
|
||||
<p>1 Avenue Faux, 75010 Paris, France</p>
|
||||
</ion-item>
|
||||
@ -88,7 +88,7 @@
|
||||
<span item-left secondary>26 min</span>
|
||||
<span item-left>(8.1 mi)</span>
|
||||
<button secondary clear item-right>
|
||||
<icon navigate></icon>
|
||||
<ion-icon name="navigate"></ion-icon>
|
||||
Start
|
||||
</button>
|
||||
</ion-item>
|
||||
|
||||
@ -23,11 +23,11 @@
|
||||
|
||||
<ion-item>
|
||||
<button primary clear item-left>
|
||||
<icon thumbs-up></icon>
|
||||
<ion-icon name="thumbs-up"></ion-icon>
|
||||
<div>12 Likes</div>
|
||||
</button>
|
||||
<button primary clear item-left>
|
||||
<icon text></icon>
|
||||
<ion-icon name="text"></ion-icon>
|
||||
<div>4 Comments</div>
|
||||
</button>
|
||||
<ion-note item-right>
|
||||
@ -56,11 +56,11 @@
|
||||
|
||||
<ion-item>
|
||||
<button primary clear item-left>
|
||||
<icon thumbs-up></icon>
|
||||
<ion-icon name="thumbs-up"></ion-icon>
|
||||
<div>30 Likes</div>
|
||||
</button>
|
||||
<button primary clear item-left>
|
||||
<icon text></icon>
|
||||
<ion-icon name="text"></ion-icon>
|
||||
<div>64 Comments</div>
|
||||
</button>
|
||||
<ion-note item-right>
|
||||
@ -88,11 +88,11 @@
|
||||
|
||||
<ion-item>
|
||||
<button primary clear item-left>
|
||||
<icon thumbs-up></icon>
|
||||
<ion-icon name="thumbs-up"></ion-icon>
|
||||
<div>46 Likes</div>
|
||||
</button>
|
||||
<button primary clear item-left>
|
||||
<icon text></icon>
|
||||
<ion-icon name="text"></ion-icon>
|
||||
<div>66 Comments</div>
|
||||
</button>
|
||||
<ion-note item-right>
|
||||
|
||||
@ -1,10 +0,0 @@
|
||||
import {App} from 'ionic/ionic';
|
||||
|
||||
|
||||
@App({
|
||||
templateUrl: 'main.html'
|
||||
})
|
||||
class E2EApp {
|
||||
constructor() {
|
||||
}
|
||||
}
|
||||
@ -1,13 +0,0 @@
|
||||
|
||||
<ion-toolbar>
|
||||
<ion-title>Icons</ion-title>
|
||||
</ion-toolbar>
|
||||
|
||||
<ion-content>
|
||||
|
||||
<ion-item>
|
||||
<ion-label>Username</ion-label>
|
||||
<ion-input></ion-input>
|
||||
</ion-item>
|
||||
|
||||
</ion-content>
|
||||
@ -1,42 +1,9 @@
|
||||
import {ProtoViewRef, ViewContainerRef} from 'angular2/core'
|
||||
import {Directive, Host, forwardRef} from 'angular2/core';
|
||||
|
||||
import {App, List} from 'ionic/ionic';
|
||||
|
||||
import {App} from 'ionic/ionic';
|
||||
|
||||
|
||||
@App({
|
||||
templateUrl: 'main.html',
|
||||
directives: [forwardRef(() => ItemCellTemplate)]
|
||||
templateUrl: 'main.html'
|
||||
})
|
||||
class E2EApp {
|
||||
constructor() {
|
||||
|
||||
this.items = []
|
||||
for(let i = 0; i < 1000; i++) {
|
||||
this.items.push({
|
||||
title: 'Item ' + i
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/*
|
||||
Used to find and register headers in a view, and this directive's
|
||||
content will be moved up to the common navbar location, and created
|
||||
using the same context as the view's content area.
|
||||
*/
|
||||
@Directive({
|
||||
selector: 'template[cell]'
|
||||
})
|
||||
export class ItemCellTemplate {
|
||||
constructor(@Host() list: List, viewContainer: ViewContainerRef, protoViewRef: ProtoViewRef) {
|
||||
console.log('Item cell template', list, viewContainer, protoViewRef);
|
||||
|
||||
this.protoViewRef = protoViewRef;
|
||||
this.viewContainer = viewContainer;
|
||||
|
||||
list.setItemTemplate(this);
|
||||
}
|
||||
// TODO
|
||||
}
|
||||
|
||||
@ -1,10 +1,7 @@
|
||||
<ion-content padding #content>
|
||||
<ion-toolbar><ion-title>Infinite List</ion-title></ion-toolbar>
|
||||
|
||||
<ion-list inset virtual [items]="items" [content]="content">
|
||||
<ion-item *cell #item>
|
||||
{{item.title}}
|
||||
</ion-item>
|
||||
</ion-list>
|
||||
<f style="height: 15000px; width: 100%; background-color: green"></f>
|
||||
<ion-content padding>
|
||||
|
||||
TODO
|
||||
|
||||
</ion-content>
|
||||
|
||||
@ -14,13 +14,13 @@ class Page1 {
|
||||
toggleLeftMenuSwipeable() {
|
||||
this.leftMenuSwipeEnabled = !this.leftMenuSwipeEnabled;
|
||||
|
||||
this.menu.swipeEnable(this.leftMenuSwipeEnabled, 'leftMenu');
|
||||
this.menu.swipeEnable(this.leftMenuSwipeEnabled, 'left');
|
||||
}
|
||||
|
||||
toggleRightMenuSwipeable() {
|
||||
this.rightMenuSwipeEnabled = !this.rightMenuSwipeEnabled;
|
||||
|
||||
this.menu.swipeEnable(this.leftMenuSwipeEnabled, 'rightMenu');
|
||||
this.menu.swipeEnable(this.rightMenuSwipeEnabled, 'right');
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -7,11 +7,9 @@
|
||||
<ion-content>
|
||||
|
||||
<ion-list>
|
||||
|
||||
<button ion-item>
|
||||
Left Item 1
|
||||
</button>
|
||||
|
||||
</ion-list>
|
||||
</ion-content>
|
||||
|
||||
@ -27,11 +25,9 @@
|
||||
<ion-content>
|
||||
|
||||
<ion-list>
|
||||
|
||||
<button ion-item>
|
||||
Right Item 1
|
||||
</button>
|
||||
|
||||
</ion-list>
|
||||
</ion-content>
|
||||
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
import {App, Page, Config, Platform} from 'ionic/ionic';
|
||||
import {Modal, ActionSheet, NavController, NavParams, Animation, ViewController} from 'ionic/ionic';
|
||||
import {Modal, ActionSheet, NavController, NavParams, Transition, TransitionOptions, ViewController} from 'ionic/ionic';
|
||||
|
||||
|
||||
@Page({
|
||||
@ -284,10 +284,11 @@ class E2EApp {
|
||||
}
|
||||
|
||||
|
||||
class FadeIn extends Animation {
|
||||
constructor(enteringView, leavingView) {
|
||||
super(enteringView.pageRef());
|
||||
class FadeIn extends Transition {
|
||||
constructor(enteringView: ViewController, leavingView: ViewController, opts: TransitionOptions) {
|
||||
super(opts);
|
||||
this
|
||||
.element(enteringView.pageRef())
|
||||
.easing('ease')
|
||||
.duration(1000)
|
||||
.fromTo('translateY', '0%', '0%')
|
||||
@ -295,16 +296,17 @@ class FadeIn extends Animation {
|
||||
.before.addClass('show-page');
|
||||
}
|
||||
}
|
||||
Animation.register('my-fade-in', FadeIn);
|
||||
Transition.register('my-fade-in', FadeIn);
|
||||
|
||||
class FadeOut extends Animation {
|
||||
constructor(enteringView, leavingView) {
|
||||
super(leavingView.pageRef());
|
||||
class FadeOut extends Transition {
|
||||
constructor(enteringView: ViewController, leavingView: ViewController, opts: TransitionOptions) {
|
||||
super(opts);
|
||||
this
|
||||
.element(leavingView.pageRef())
|
||||
.easing('ease')
|
||||
.duration(500)
|
||||
.fadeOut()
|
||||
.before.addClass('show-page');
|
||||
}
|
||||
}
|
||||
Animation.register('my-fade-out', FadeOut);
|
||||
Transition.register('my-fade-out', FadeOut);
|
||||
|
||||
@ -416,6 +416,8 @@ export class NavController extends Ion {
|
||||
return;
|
||||
}
|
||||
|
||||
enteringView.setNav(rootNav);
|
||||
|
||||
opts.keyboardClose = false;
|
||||
opts.direction = 'forward';
|
||||
|
||||
|
||||
@ -20,7 +20,7 @@ class MyCmpTest{}
|
||||
<button><ion-icon name="star"></ion-icon></button>
|
||||
</ion-buttons>
|
||||
<ion-buttons end>
|
||||
<button>S1</button>
|
||||
<button>S1g</button>
|
||||
</ion-buttons>
|
||||
</ion-navbar>
|
||||
<ion-content>
|
||||
@ -74,7 +74,7 @@ class FirstPage {
|
||||
|
||||
setPages() {
|
||||
let items = [
|
||||
{page: PrimaryHeaderPage}
|
||||
{ page: PrimaryHeaderPage }
|
||||
];
|
||||
|
||||
this.nav.setPages(items);
|
||||
@ -89,7 +89,7 @@ class FirstPage {
|
||||
}
|
||||
|
||||
pushFullPage() {
|
||||
this.nav.push(FullPage, { id: 8675309, myData: [1,2,3,4] } );
|
||||
this.nav.push(FullPage, { id: 8675309, myData: [1, 2, 3, 4] });
|
||||
}
|
||||
|
||||
pushAnother() {
|
||||
@ -139,8 +139,8 @@ class FullPage {
|
||||
|
||||
setPages() {
|
||||
let items = [
|
||||
{page: FirstPage},
|
||||
{page: PrimaryHeaderPage}
|
||||
{ page: FirstPage },
|
||||
{ page: PrimaryHeaderPage }
|
||||
];
|
||||
|
||||
this.nav.setPages(items);
|
||||
@ -190,6 +190,9 @@ class FullPage {
|
||||
template: `
|
||||
<ion-navbar *navbar primary>
|
||||
<ion-title>Primary Color Page Header</ion-title>
|
||||
<ion-buttons end>
|
||||
<button>S1g</button>
|
||||
</ion-buttons>
|
||||
</ion-navbar>
|
||||
<ion-content padding>
|
||||
<p><button class="e2eFrom3To2" (click)="nav.pop()">Pop</button></p>
|
||||
@ -218,7 +221,7 @@ class PrimaryHeaderPage {
|
||||
}
|
||||
|
||||
pushFullPage() {
|
||||
this.nav.push(FullPage, { id: 8675309, myData: [1,2,3,4] } );
|
||||
this.nav.push(FullPage, { id: 8675309, myData: [1, 2, 3, 4] });
|
||||
}
|
||||
|
||||
insert() {
|
||||
|
||||
@ -9,14 +9,14 @@ import {App, Page, NavController} from 'ionic/ionic';
|
||||
</ion-navbar>
|
||||
|
||||
<ion-content padding>
|
||||
<button block (click)="pushPage()">Push Page</block>
|
||||
<button block (click)="pushPage()">Push Page</button>
|
||||
</ion-content>`,
|
||||
})
|
||||
class FirstPage {
|
||||
constructor(nav: NavController) {
|
||||
this.nav = nav;
|
||||
}
|
||||
pushPage(){
|
||||
pushPage() {
|
||||
this.nav.push(SecondPage)
|
||||
}
|
||||
}
|
||||
@ -30,7 +30,7 @@ class FirstPage {
|
||||
|
||||
<ion-content padding>
|
||||
<h1>Second page</h1>
|
||||
<button block (click)="insertPage()">Insert Page</block>
|
||||
<button block (click)="insertPage()">Insert Page</button>
|
||||
</ion-content>
|
||||
`
|
||||
})
|
||||
@ -38,7 +38,7 @@ class SecondPage {
|
||||
constructor(nav: NavController) {
|
||||
this.nav = nav;
|
||||
}
|
||||
insertPage(){
|
||||
insertPage() {
|
||||
this.nav.insert(1, InsertPage)
|
||||
}
|
||||
}
|
||||
@ -55,7 +55,7 @@ class SecondPage {
|
||||
`
|
||||
})
|
||||
class InsertPage {
|
||||
constructor() {}
|
||||
constructor() { }
|
||||
}
|
||||
|
||||
|
||||
|
||||
@ -94,9 +94,11 @@ class ToolbarBackground {
|
||||
template:
|
||||
'<div class="toolbar-background"></div>' +
|
||||
'<button class="back-button bar-button bar-button-default" [hidden]="hideBackButton">' +
|
||||
'<ion-icon class="back-button-icon" [name]="_bbIcon"></ion-icon>' +
|
||||
'<span class="back-button-text">' +
|
||||
'<span class="back-default">{{_bbText}}</span>' +
|
||||
'<span class="button-inner">' +
|
||||
'<ion-icon class="back-button-icon" [name]="_bbIcon"></ion-icon>' +
|
||||
'<span class="back-button-text">' +
|
||||
'<span class="back-default">{{_bbText}}</span>' +
|
||||
'</span>' +
|
||||
'</span>' +
|
||||
'<ion-button-effect></ion-button-effect>' +
|
||||
'</button>' +
|
||||
|
||||
@ -22,14 +22,13 @@ class MyApp {
|
||||
|
||||
this.http.get(baseUrl + '?method=flickr.groups.pools.getPhotos&group_id=1463451@N25&safe_search=1&api_key='
|
||||
+ FLICKR_API_KEY + '&nojsoncallback=1&format=json&tags=' + tags)
|
||||
.map(res => res.json())
|
||||
.subscribe(data => {
|
||||
this.images = data.photos.photo.slice(0, 20);
|
||||
this.images = data.json().photos.photo.slice(0, 20);
|
||||
setTimeout(() => {
|
||||
this.slider.update();
|
||||
});
|
||||
}, (err) => {
|
||||
alert('Unable to load images');
|
||||
console.info('Unable to load images');
|
||||
console.error(err);
|
||||
})
|
||||
}
|
||||
|
||||
@ -23,9 +23,10 @@
|
||||
<ion-list>
|
||||
<ion-list-header>Tracks</ion-list-header>
|
||||
|
||||
<ion-toggle *ngFor="#i of items" secondary>
|
||||
Toggle {{i}}
|
||||
</ion-toggle>
|
||||
<ion-item *ngFor="#i of items">
|
||||
<ion-label>Toggle {{i}}</ion-label>
|
||||
<ion-toggle secondary></ion-toggle>
|
||||
</ion-item>
|
||||
</ion-list>
|
||||
|
||||
<ion-list>
|
||||
|
||||
@ -1,4 +1,3 @@
|
||||
|
||||
<ion-toolbar>
|
||||
<ion-title>This is the title that never ends. It just goes on and on my friend.</ion-title>
|
||||
</ion-toolbar>
|
||||
@ -62,9 +61,9 @@
|
||||
|
||||
<ion-toolbar>
|
||||
<ion-buttons start>
|
||||
<button solid class="activated">
|
||||
<a button solid class="activated">
|
||||
<ion-icon name="contact"></ion-icon>
|
||||
</button>
|
||||
</a>
|
||||
<button solid class="activated">
|
||||
<ion-icon name="contact"></ion-icon>
|
||||
Solid
|
||||
@ -126,14 +125,27 @@
|
||||
</button>
|
||||
</ion-buttons>
|
||||
<ion-buttons end>
|
||||
<button>
|
||||
Edit
|
||||
<a button href="#">Edit
|
||||
<ion-icon name="create"></ion-icon>
|
||||
</button>
|
||||
</a>
|
||||
</ion-buttons>
|
||||
<ion-title>Icon/Color Attr</ion-title>
|
||||
</ion-toolbar>
|
||||
|
||||
<ion-toolbar>
|
||||
<ion-buttons start>
|
||||
<button>
|
||||
Go Back
|
||||
</button>
|
||||
</ion-buttons>
|
||||
<ion-buttons end>
|
||||
<a button href="#">
|
||||
Edit
|
||||
</a>
|
||||
</ion-buttons>
|
||||
<ion-title>Text Only</ion-title>
|
||||
</ion-toolbar>
|
||||
|
||||
|
||||
<ion-toolbar>
|
||||
<button menuToggle>
|
||||
@ -149,11 +161,11 @@
|
||||
|
||||
|
||||
<ion-toolbar>
|
||||
<ion-buttons end>
|
||||
<button #button1 (click)="buttonClick(button1)">
|
||||
<ion-icon name="star"></ion-icon>
|
||||
</button>
|
||||
</ion-buttons>
|
||||
<ion-buttons end>
|
||||
<button #button1 (click)="buttonClick(button1)">
|
||||
<ion-icon name="star"></ion-icon>
|
||||
</button>
|
||||
</ion-buttons>
|
||||
<ion-title>Right side menu toggle</ion-title>
|
||||
<button menuToggle right>
|
||||
<ion-icon name="menu"></ion-icon>
|
||||
@ -167,10 +179,10 @@
|
||||
</button>
|
||||
</ion-buttons>
|
||||
<ion-segment secondary>
|
||||
<ion-segment-button>
|
||||
<ion-segment-button value="something">
|
||||
Something
|
||||
</ion-segment-button>
|
||||
<ion-segment-button>
|
||||
<ion-segment-button value="else">
|
||||
Else
|
||||
</ion-segment-button>
|
||||
</ion-segment>
|
||||
@ -178,13 +190,13 @@
|
||||
|
||||
<ion-toolbar>
|
||||
<ion-segment>
|
||||
<ion-segment-button>
|
||||
<ion-segment-button value="light">
|
||||
Light
|
||||
</ion-segment-button>
|
||||
<ion-segment-button>
|
||||
<ion-segment-button value="toolbar">
|
||||
Toolbar
|
||||
</ion-segment-button>
|
||||
<ion-segment-button>
|
||||
<ion-segment-button value="default">
|
||||
Default Segment
|
||||
</ion-segment-button>
|
||||
</ion-segment>
|
||||
@ -195,4 +207,4 @@
|
||||
.toolbar {
|
||||
border-bottom: 1px solid black;
|
||||
}
|
||||
</style>
|
||||
</style>
|
||||
@ -5,11 +5,7 @@
|
||||
|
||||
.bar-button {
|
||||
position: relative;
|
||||
display: inline-flex;
|
||||
flex-shrink: 0;
|
||||
flex-flow: row nowrap;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
display: inline-block;
|
||||
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
@ -19,6 +15,7 @@
|
||||
|
||||
text-align: center;
|
||||
text-transform: none;
|
||||
line-height: 1;
|
||||
|
||||
vertical-align: top; // the better option for most scenarios
|
||||
vertical-align: -webkit-baseline-middle; // the best for those that support it
|
||||
@ -54,7 +51,7 @@
|
||||
.back-button {
|
||||
display: none;
|
||||
&.show-back-button {
|
||||
display: flex;
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -17,7 +17,7 @@ $toolbar-order-ios: (
|
||||
);
|
||||
|
||||
$toolbar-ios-padding: 4px !default;
|
||||
$toolbar-ios-height: 4.4rem !default;
|
||||
$toolbar-ios-height: 44px !default;
|
||||
$toolbar-ios-button-font-size: 1.7rem !default;
|
||||
$toolbar-ios-title-font-size: 1.7rem !default;
|
||||
$navbar-ios-height: $toolbar-ios-height !default;
|
||||
@ -62,7 +62,6 @@ ion-navbar-section {
|
||||
.toolbar-title {
|
||||
font-size: $toolbar-ios-title-font-size;
|
||||
font-weight: 600;
|
||||
margin-top: 1px;
|
||||
text-align: center;
|
||||
pointer-events: auto;
|
||||
color: $toolbar-ios-text-color;
|
||||
@ -123,10 +122,8 @@ ion-buttons[right] {
|
||||
// --------------------------------------------------
|
||||
|
||||
.bar-button {
|
||||
margin-top: 0;
|
||||
margin-bottom: 0;
|
||||
padding: 0 5px;
|
||||
min-height: 32px;
|
||||
height: 32px;
|
||||
border: 0;
|
||||
font-size: $toolbar-ios-button-font-size;
|
||||
border-radius: $bar-button-ios-border-radius;
|
||||
@ -225,7 +222,6 @@ ion-buttons[right] {
|
||||
// --------------------------------------------------
|
||||
|
||||
.bar-button-icon-left ion-icon {
|
||||
margin-left: -0.1em;
|
||||
padding-right: 0.3em;
|
||||
font-size: 1.4em;
|
||||
line-height: 0.67;
|
||||
@ -257,7 +253,6 @@ ion-buttons[right] {
|
||||
|
||||
.back-button {
|
||||
margin: 0;
|
||||
margin-top: 2px;
|
||||
min-height: 3.2rem;
|
||||
line-height: 1;
|
||||
order: map-get($toolbar-order-ios, back-button);
|
||||
@ -268,8 +263,9 @@ ion-buttons[right] {
|
||||
.back-button-icon {
|
||||
display: inherit;
|
||||
margin: 0;
|
||||
margin-top: -1px;
|
||||
min-width: 18px;
|
||||
font-size: 3.3rem;
|
||||
font-size: 3.4rem;
|
||||
}
|
||||
|
||||
.back-button-text {
|
||||
|
||||
@ -133,7 +133,7 @@ ion-buttons[right] {
|
||||
margin-left: 0.2rem;
|
||||
margin-right: 0.2rem;
|
||||
padding: 0 5px;
|
||||
min-height: 32px;
|
||||
height: 32px;
|
||||
border: 0;
|
||||
font-size: $toolbar-md-button-font-size;
|
||||
border-radius: $bar-button-md-border-radius;
|
||||
@ -233,7 +233,6 @@ ion-buttons[right] {
|
||||
// --------------------------------------------------
|
||||
|
||||
.bar-button-icon-left ion-icon {
|
||||
margin-left: -0.1em;
|
||||
padding-right: 0.3em;
|
||||
font-size: 1.4em;
|
||||
line-height: 0.67;
|
||||
|
||||
@ -9,7 +9,7 @@ import {Button} from '../button/button';
|
||||
/**
|
||||
* @private
|
||||
*/
|
||||
export class ToolbarBase extends Ion {
|
||||
export class ToolbarBase extends Ion {
|
||||
itemRefs = [];
|
||||
titleRef = null;
|
||||
titleCmp: any;
|
||||
@ -155,9 +155,9 @@ export class ToolbarTitle extends Ion {
|
||||
toolbar && toolbar.setTitleCmp(this);
|
||||
navbar && navbar.setTitleCmp(this);
|
||||
}
|
||||
/**
|
||||
* @private
|
||||
*/
|
||||
/**
|
||||
* @private
|
||||
*/
|
||||
getTitleText() {
|
||||
return this.getNativeElement().textContent;
|
||||
}
|
||||
|
||||
@ -16,6 +16,7 @@ export * from './util/events'
|
||||
export * from './util/keyboard'
|
||||
|
||||
export * from './animations/animation'
|
||||
export * from './transitions/transition'
|
||||
|
||||
export * from './translation/translate'
|
||||
export * from './translation/translate_pipe'
|
||||
|
||||
@ -3,7 +3,7 @@
|
||||
// iOS Cordova
|
||||
// --------------------------------------------------
|
||||
|
||||
$cordova-ios-toolbar-padding: 2rem !default;
|
||||
$cordova-ios-toolbar-padding: 20px !default;
|
||||
|
||||
|
||||
&.platform-cordova.platform-ios {
|
||||
@ -30,7 +30,7 @@ $cordova-ios-toolbar-padding: 2rem !default;
|
||||
ion-page.modal > ion-toolbar:first-child ion-segment, {
|
||||
min-height: $toolbar-ios-height + $cordova-ios-toolbar-padding;
|
||||
height: $toolbar-ios-height + $cordova-ios-toolbar-padding;
|
||||
padding-top: $cordova-ios-toolbar-padding;
|
||||
padding-top: $toolbar-ios-padding + $cordova-ios-toolbar-padding;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@ -186,7 +186,6 @@ export class SqlStorage extends StorageEngine {
|
||||
/**
|
||||
* Remove the value in the database for the given key.
|
||||
* @param {string} key the key
|
||||
* @param {string} value The value (as a string)
|
||||
* @return {Promise} that resolves or rejects with an object of the form { tx: Transaction, res: Result (or err)}
|
||||
*/
|
||||
remove(key: string): Promise<any> {
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
{
|
||||
"private": "true",
|
||||
"name": "ionic2",
|
||||
"version": "2.0.0-alpha.56",
|
||||
"version": "2.0.0-beta.0",
|
||||
"license": "Apache-2.0",
|
||||
"repository": {
|
||||
"type": "git",
|
||||
@ -88,4 +88,4 @@
|
||||
"path": "node_modules/ionic-cz-conventional-changelog"
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -11,7 +11,7 @@ header_sub_title: Extend Ionic even further with the power of AngularJS
|
||||
searchable: false
|
||||
---
|
||||
|
||||
# Ionic 2 Components
|
||||
# Ionic 2 API Docs
|
||||
|
||||
<img class="section-header" src="/img/docs/api-intro-header.png" />
|
||||
|
||||
|
||||
Reference in New Issue
Block a user