A powerful cross-platform UI toolkit for building native-quality iOS, Android, and Progressive Web Apps with HTML, CSS, and JavaScript.
MIT License
Bot releases are hidden (Show)
Published by ajoslin about 10 years ago
locking
option (af229072, closes #2034)Published by ajoslin about 10 years ago
$parent.value
asChange your code from this:
<ion-radio ng-disabled="{{$parent.isDisabled}}"></ion-radio>
To this:
<ion-radio ng-disabled="{{isDisabled}}"></ion-radio>
(53c437e2)
Published by adamdbradley about 10 years ago
ngRepeat:dupes
error when reordering (ba1859b3, closes #1601)<div class="modal">
(ed4f2288, closes #1668)edge-drag-threshold
, delegate edgeDragThreshold()
(ba56bb98, closes #1570)ion-toggle no longer has an isolate scope.
This will break your toggle only if you were relying upon the toggle
having an isolate scope: if you were referencing $parent.value
as
the ng-disabled attribute, for example.
Change your code from this:
<ion-toggle ng-disabled="{{$parent.isDisabled}}"></ion-toggle>
To this:
<ion-toggle ng-disabled="{{isDisabled}}"></ion-toggle>
(537b29d0)
This change will only break your list if you were not using the
onReorder callback as described in the documentation.
Before, while reordering an element in a list Ionic would swap the
elements underneath as the reordering happened. This sometimes caused
errors with angular's ngRepeat directive.
Now, reordering an element in a list does not change the order of
elements in the DOM. It is expected that the end developer will use the
index changes given in the onReorder
callback to reorder the items
in the list. This is simple to do, see the examples in the
ionReorderButton
documentation.
(ba1859b3)
Published by perrygovier over 10 years ago
Improved animation performance, particularly on older devices.
.menu .scroll-content
(754ef461, closes #1408)Published by ajoslin over 10 years ago
Published by ajoslin over 10 years ago
hardwareBackButtonClose
as option, default true (9ffca1e4, closes #1397)start()
to resume after stop (e4ab045e, closes #1584)$ionicActionSheet's default behavior is now to cancel
when the app's state changes. To disable this behavior, pass
cancelOnStateChange: false
into $ionicActionSheet.show().
(087e55f3)
$ionicActionSheet now returns a method to hide the
action sheet.
Previously, it returned an object that had a show
and hide
method.
This was undocumented, but if you used it, here is how to migrate your
code:
Change your code from this:
var sheet = $ionicActionSheet.show({...});
sheet.hide();
To this:
var hideSheet = $ionicActionSheet.show({...});
hideSheet();
(b7646a56)
Published by ajoslin over 10 years ago
Download Instructions: https://github.com/driftyco/ionic#quick-start
Published by Ionitron over 10 years ago
Published by Ionitron over 10 years ago
.bar .title
(0c960b54)<a>
tag for ui-sref (c6c1300b)This will break your checkbox only if you were relying upon the
checkbox having an isolate scope: if you were referencing
$parent.value
as the ng-disabled attribute, for example.
Change your code from this:
<ion-checkbox ng-disabled="{{$parent.isDisabled}}"></ion-checkbox>
To this:
<ion-checkbox ng-disabled="{{isDisabled}}"></ion-checkbox>
(a006d896)
Published by somethingnew2-0 over 10 years ago
Published by ajoslin over 10 years ago
Published by somethingnew2-0 over 10 years ago
Take a look at the new Collection Repeat for rendering HUGE lists of items!
When using $ionicPopup.show()
, previously a button's onTap function
would only result in closing the popup and resolving the promise if the
onTap(event)
function returned a truthy value.
Now, a button's onTap event will always close the popup and resolve
the popup's promise, no matter the return value, by default. The only
way to prevent the popup from closing is to call
event.preventDefault()
.
Change your code from this:
$ionicPopup.show({
buttons: [{
onTap: function(event) {
if (!shouldClosePopup) {
return false;
}
}
}]
});
To this:
$ionicPopup.show({
buttons: [{
onTap: function(event) {
if (!shouldClosePopup) {
event.preventDefault();
}
}
}]
});
(cb1a5f62)
:after
item selector, which was alwaysitem-icon-right
, whichThis change removes the :after
nav icon styling, and creates a new
class, icon-accessory
, based off of similar CSS. The change makes a
nav arrow highly customizable, allows RTL developers to easily control
the arrow direction, and the accessory class is something that's
reusable.
An example of right side arrow using ion-chevron-right
as the icon:
<a class="item item-icon-right" href="#">
Check mail
<i class="icon ion-chevron-right icon-accessory"></i>
</a>
(c7e3defc)
Relevant documentation:
ionList,
ionItem,
ionOptionButton,
ionReorderButton,
ionDeleteButton,
$ionicListDelegate.
To migrate, change your code from this:
<ion-list option-buttons="[{text:'hello',type:'button-positive',onTap:tap()}]"
on-delete="onDelete(el)"
delete-icon="ion-minus-circled"
can-delete="true"
show-delete="shouldShowDelete"
on-reorder="onReorder(el, startIndex, toIndex)"
reorder-icon="ion-navicon"
can-reorder="true"
show-reorder="shouldShowReorder">
<ion-item ng-repeat="item in items">
{{item}}
</ion-item>
</ion-list>
To this:
<ion-list show-delete="shouldShowDelete"
show-reorder="shouldShowReorder">
<ion-item ng-repeat="item in items">
{{item}}
<ion-delete-button class="ion-minus-circled"
ng-click="onDelete(item)">
</ion-delete-button>
<ion-reorder-button class="ion-navicon"
ng-click="onReorder(item, $fromIndex, $toIndex)">
</ion-reorder-button>
<ion-option-button class="button-positive" ng-click="tap()">
Hello
</ion-option-button>
</ion-item>
</ion-list>
(986dbac8)
title
attribute set on yourNow, if your ion-view does not have a title
attribute set, the new
view will be transitioned in, but there will be no title change.
If you wish to have a blank title on your new view, you must now
explicitly set your ion-view
's title attribute to an empty string.
To migrate your code, change from this:
<ion-view></ion-view>
To this:
<ion-view title=""></ion-view>
(d53eab81)
Published by somethingnew2-0 over 10 years ago
This is the last release without large breaking changes as we solidify the long-term API for the very soon 1.0 beta release - although it still has a few small breaking changes (noted below, with migration instructions)!
Get ready for new detailed API documentation and the beta release soon. Use the nightly build with great caution until the beta release.
icon
and text
attributes (5f2c32ea)pulling-text
, pulling-icon
, refreshing-text
, refreshing-icon
attributes. (573df56d, closes #760)Change your code from this:
<ion-content on-refresh="onRefresh()"
on-refresh-opening="onRefreshOpening()">
<ion-refresher></ion-refresher>
</ion-content>
To this:
<ion-content>
<ion-refresher on-refresh="onRefresh()"
on-pulling="onRefreshOpening()">
</ion-refresher>
</ion-content>
(573df56d)
Chang your code from this:
<ion-content on-infinite-scroll="onInfiniteScroll()"
infinite-scroll-distance="1%">
</ion-content>
To this:
<ion-content>
<ion-infinite-scroll on-infinite="onInfiniteScroll()"
distance="1%"
</ion-infinite-scroll>
</ion-content>
Change this code: <ion-header-bar title="myTitleVar"></ion-header-bar>
<ion-header-bar title="{{myTitleVar}}"></ion-header-bar>
ionicSlideBox#getPos has been renamed to ionicSlideBox#currentIndex.
ionicSlideBox#numSlides has been renamed to ionicSlideBox#slidesCount.
(1dd55276)
Published by somethingnew2-0 over 10 years ago
title
attr (aa30faf8, closes #804)tabs-type
and tabs-style
removed. Use classNames instead.Relevant Documentation: ionTabs.
Old Code:
<ion-tabs tabs-type="tabs-top" tabs-style="tabs-positive" animation="slide-left-right">
New Code:
<ion-tabs class="tabs-top tabs-positive slide-left-right">
type
, title
, left-buttons
, right-buttons
.Relevant Documentation: ionHeaderBar,
ionFooterBar.
Old Code:
<ion-header-bar type="bar-positive"
title="{{someTitle}}"
left-buttons="left"
right-buttons="right">
</ion-header-bar>
New Code:
<ion-header-bar class="bar-positive">
<div class="buttons">
<button class="button" ng-click="leftButtonTap()">
Left Button
</button>
</div>
<h1 class="title">{{someTitle}}</h>
<div class="buttons">
<button class="button" ng-click="rightButtonTap()">
Right Button
</button>
</div>
</ion-header-bar>
left-buttons
, right-buttons
, type
, animation
,back-button-*
attributes from ionNavBar. Remove left-buttons
, right-buttons
from ionView.Additionally, all 'viewState.*' events have been removed. Use $ionicNavBarDelegate.
Relevant Documentation: ionNavBar,
ionView,
ionNavBackButton (new),
ionNavButtons (new).
Old Code:
<ion-nav-bar type="bar-positive"
animation="slide-left-right"
back-button-type="button-icon"
back-button-icon="ion-arrow-left-c"
back-button-label="Back">
</ion-nav-bar>
<ion-nav-view>
<ion-view left-buttons="leftButtons"
title="someTitle"
right-buttons="rightButtons">
</ion-view>
</ion-nav-view>
New Code:
<ion-nav-bar class="bar-positive slide-left-right">
<ion-nav-back-button class="button-icon ion-arrow-left-c">
Back
</ion-nav-back-button>
</ion-nav-bar>
<ion-nav-view>
<ion-view title="someTitle">
<ion-nav-buttons side="left">
<button class="button" ng-click="leftButtonTap()">
Left Button
</button>
</ion-nav-buttons>
<ion-nav-buttons side="right">
<button class="button" ng-click="rightButtonTap()">
Right Button
</button>
</ion-nav-buttons>
</ion-view>
</ion-nav-view>
Relevant documentation: ionSideMenus,
ionSideMenuContent,
ionSideMenu.
Old Code:
<ion-side-menus>
<ion-pane ion-side-menu-content>
</ion-pane>
</ion-side-menus>
New Code:
<ion-side-menus>
<ion-side-menu-content>
</ion-side-menu-content>
</ion-side-menus>
Published by adamdbradley over 10 years ago
This version also contains a few Android performance fixes, so please test it out and let us know how it goes. Our next focus is to improve and auto-generate documentation.
Big thanks to the forum users for helping us identify and debug issues. This growing community and wide range of testing is contributing to making your Ionic apps better, so thanks again for the assistance. Beta coming soon!
ion-
prefix for correct view history (2494b5f9)does-continue
attribute work continuously (f6ec6a3c, closes #575)style.transform
to work w/ non-webkit (52671c18)<a href="#/page" ion-nav-animation="slide-in-up">
(8354d42b)If you had this code before:
<ion-content on-infinite-scroll="doSomething"></ion-content>
function MyCtrl($scope) {
$scope.doSomething = function(scrollDoneCallback) {
doSomething();
scrollDoneCallback();
};
}
Now, your code should look like this:
<ion-content on-infinite-scroll="doSomething()"></ion-content>
function MyCtrl($scope) {
$scope.doSomething = function() {
doSomething();
$scope.$broadcast('scroll.infiniteScrollComplete');
};
}
Published by adamdbradley over 10 years ago
Please help us test out Quokka and let us know how it goes, thanks!
Note that in this release there is a breaking change in that all of our directives are now prefixed with ion-
.
Our next step is to add in more end-to-end and visual tests, and we'll keep you informed of our progress and we move along.
ion-
(2c39a214)type
. <nav-bar type="{{myType}}">
(5470d77a, closes #599)width
& is-enabled
(bfefc69f)ion-
.For any directive you use, add the ionic prefix.
For example, change this HTML:
<tabs>
<tab title="home" href="/tab/home">
<content>Hello!</content>
</tab>
</tabs>
To this HTML:
<ion-tabs>
<ion-tab title="home" href="/tab/home">
<ion-content>Hello!</ion-content>
</ion-tab>
</ion-tabs>
(2c39a214)
Published by ajoslin over 10 years ago
<scroll>
is now registered with $ionicScrollDelegate (2c7ce763)drag-content
attribute (7f9bfb5a)Published by adamdbradley over 10 years ago
Published by adamdbradley over 10 years ago
Published by adamdbradley over 10 years ago