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 visible (Hide)
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
Published by adamdbradley almost 11 years ago
Published by adamdbradley almost 11 years ago
Published by mlynch almost 11 years ago
Slide box bug fixes, fixed issues with minification, small tweaks
Published by mlynch almost 11 years ago
Nav bar button fixes, new slide box overhaul, new list overhaul, radio button and checkbox fixes, other goodies and christmas cheer.
Published by mlynch almost 11 years ago
Scrollbars, scroll bug fixes, other tweaks
Published by mlynch almost 11 years ago
Scroll view fixes, radio button and checkbox fixes, slide box fixes. Soo many fixes!
Published by mlynch almost 11 years ago
Massive scroll performance improvements. Android fixes and perf improvements. Header and nav bar button fixes. Animation performance improvements. Other fun goodies and yum yums.
Published by mlynch almost 11 years ago
Some fixes to nav router UX and issues on iPad, overflow scrolling fixes for all devices, other tweaks and fixes.
Published by mlynch almost 11 years ago
Fixed some overflow scrolling issues.
Published by mlynch almost 11 years ago
Bower release fix
Published by mlynch almost 11 years ago