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 brandyscarney over 7 years ago
With this release comes a major update to Angular (Angular 4.0!), the latest version of TypeScript, and some optional structural changes to your application.
node_modules
directory, and then run npm install
:"dependencies": {
"@angular/common": "4.0.0",
"@angular/compiler": "4.0.0",
"@angular/compiler-cli": "4.0.0",
"@angular/core": "4.0.0",
"@angular/forms": "4.0.0",
"@angular/http": "4.0.0",
"@angular/platform-browser": "4.0.0",
"@angular/platform-browser-dynamic": "4.0.0",
"@ionic-native/core": "3.4.2",
"@ionic-native/splash-screen": "3.4.2",
"@ionic-native/status-bar": "3.4.2",
"@ionic/storage": "2.0.1",
"ionic-angular": "3.0.0",
"ionicons": "3.0.0",
"rxjs": "5.1.1",
"sw-toolbox": "3.4.0",
"zone.js": "^0.8.4"
},
"devDependencies": {
"@ionic/app-scripts": "1.3.0",
"typescript": "~2.2.1"
}
BrowserModule
in your app/app.module.ts
file:import { BrowserModule } from '@angular/platform-browser';
and then add it to the imports in the same file:
imports: [
BrowserModule,
IonicModule.forRoot(MyApp)
],
HttpModule
in your app/app.module.ts
file:imports: [
BrowserModule,
HttpModule,
IonicModule.forRoot(MyApp)
],
And that’s it! Your app should still function the same without any issues.
complete
if the state isn't loading (58b57c0)Removed the deprecated (old) grid. See the blog post for more information including steps to migrate:
http://blog.ionic.io/build-awesome-desktop-apps-with-ionics-new-responsive-grid/
The following selectors to style the text color of the native text elements have been removed:
h1[color], h2[color], h3[color], h4[color], h5[color], h6[color], a[color]:not([ion-button]):not([ion-item]):not([ion-fab]), p[color], span[color], b[color], i[color], strong[color], em[color], small[color], sub[color], sup[color]
These have been throwing a deprecation warning since rc.3 but still working. They are officially gone and therefore these elements will not get the color unless the ion-text
attribute is added. Please see the documentation for more information: http://ionicframework.com/docs/api/components/typography/Typography/
The following properties and functions have been printing console warnings and are officially removed:
Slides input options
has been removed. Please use the input
properties instead.
Slide event ionWillChange
has been removed, please use
ionSlideWillChange
instead.
Slide event ionDidChange
has been removed, please use
ionSlideDidChange
instead.
Slide event ionDrag
has been removed, please use ionSlideDrag
instead.
Slides getSlider()
method has been removed, please use the instance
of ion-slides.
Published by brandyscarney over 7 years ago
waitFor
method to InfiniteScroll (84e25a1)Published by brandyscarney over 7 years ago
package.json
to match the following dependencies, remove the existing node_modules
directory, and then run npm install
: "dependencies": {
"@angular/common": "2.4.8",
"@angular/compiler": "2.4.8",
"@angular/compiler-cli": "2.4.8",
"@angular/core": "2.4.8",
"@angular/forms": "2.4.8",
"@angular/http": "2.4.8",
"@angular/platform-browser": "2.4.8",
"@angular/platform-browser-dynamic": "2.4.8",
"@angular/platform-server": "2.4.8",
"@ionic/storage": "2.0.0",
"ionic-angular": "2.2.0",
"ionic-native": "2.4.1",
"ionicons": "3.0.0",
"rxjs": "5.0.1",
"sw-toolbox": "3.4.0",
"zone.js": "0.7.2"
},
"devDependencies": {
"@ionic/app-scripts": "1.1.4",
"typescript": "2.0.9"
}
Note: If you are using ionic-storage
, you need to update it to 2.0.0
or you will run into an error similar to this: Error: Can't resolve all parameters for Storage: (?, ?).
. For more information, see the Storage Documentation.
As part of our initiative to improve desktop support we have introduced a new component called Split Pane. Split Pane makes it possible to easily create multi-view layouts. It allows elements, such as a menu or another navigation pane, to be displayed on large viewports. Split Pane can be used to achieve a layout similar to the Gmail (Android) or Mail (Apple) applications.
Ionic has been updated to depend on Angular 2.4.8, which is the latest version that we have tested and confirmed to be compatible with Ionic. This means that updating to the 2.2.0 release of Ionic will automatically work with all of the performance updates, bug fixes and features in Angular 2.4.8!
We recently released the 2.0.0 version of ionic-storage
. If you are using Ionic Storage in your application, you need to update to this version of ionic-storage
. Attempting to use an older version of ionic-storage
with Ionic 2.2.0 will cause errors. You can read about how to update to ionic-storage
2.0.0 here.
Published by brandyscarney over 7 years ago
Published by brandyscarney over 7 years ago
Update the framework:
npm install --save --save-exact [email protected]
Change the import for ionicons in your theme/variables.scss
file from this:
@import "ionicons";
to
@import "ionic.ionicons";
See the conference app for an example. This fixes a bug with ionicons getting styled incorrectly.
Published by brandyscarney almost 8 years ago
npm uninstall -g ionic
npm install -g ionic
package.json
to match the following dependencies, remove existing node_modules
directory, and then run npm install
:"dependencies": {
"@angular/common": "2.2.1",
"@angular/compiler": "2.2.1",
"@angular/compiler-cli": "2.2.1",
"@angular/core": "2.2.1",
"@angular/forms": "2.2.1",
"@angular/http": "2.2.1",
"@angular/platform-browser": "2.2.1",
"@angular/platform-browser-dynamic": "2.2.1",
"@angular/platform-server": "2.2.1",
"@ionic/storage": "1.1.7",
"ionic-angular": "2.0.0-rc.5",
"ionic-native": "2.2.11",
"ionicons": "3.0.0",
"rxjs": "5.0.0-beta.12",
"zone.js": "0.6.26",
"sw-toolbox": "3.4.0"
},
"devDependencies": {
"@ionic/app-scripts": "1.0.0",
"typescript": "2.0.9"
}
Note: please ensure you are using the exact TypeScript and Angular versions listed above. There have been issues with the latest versions.
Internal refactor completed in order to improve tree shaking and dead code removal. The public API, with the exception of the slides component, has stayed the same. However, internally many changes were required so bundlers could better exclude modules which should not be bundled. Ultimately most changes resorted to removing references to window
or document
, or a module that referenced one of those.
Service Worker Toolbox (sw-toolbox) is now built in to the starters and conference app. This allows you to customize your service worker using a high level API instead of using the raw service worker API. Our out of the box configuration will give your app a good, network independent experience but you can easily customize this to fit your app’s unique use cases.
As part of the refactor to improve tree shaking the TextArea
has been merged into the TextInput
class. This means that if you are importing the TextArea
class you will need to change this to be TextInput
.
ion-slides was refactored to remove the external dependencies, and rewritten in TypeScript/ES6 modules to again improve tree shaking abilities. In order to work with tree shaking, the options
attribute had to be removed. See the Slides API Documentation for usage information.
Published by brandyscarney almost 8 years ago
npm uninstall -g ionic
npm install -g ionic
package.json
file:"dependencies": {
"@angular/common": "2.2.1",
"@angular/compiler": "2.2.1",
"@angular/compiler-cli": "2.2.1",
"@angular/core": "2.2.1",
"@angular/forms": "2.2.1",
"@angular/http": "2.2.1",
"@angular/platform-browser": "2.2.1",
"@angular/platform-browser-dynamic": "2.2.1",
"@angular/platform-server": "2.2.1",
"@ionic/storage": "1.1.7",
"ionic-angular": "2.0.0-rc.4",
"ionic-native": "2.2.11",
"ionicons": "3.0.0",
"rxjs": "5.0.0-beta.12",
"zone.js": "0.6.26"
},
"devDependencies": {
"@ionic/app-scripts": "0.0.47",
"typescript": "2.0.9"
}
@ionic/app-scripts
was recentlyapplyTo
method to ionItemReorder
event (7e6d73b)Renamed the no-shadow
attribute for Material Design header, footer, and
tabs to no-border
. This is the same attribute used by iOS mode.
Moved the border on iOS from each toolbar to the last toolbar in a header, and the
first toolbar in a footer. Adding no-border
to the header or footer will hide the border.
For example, the following code:
<ion-header>
<ion-navbar no-border-bottom></ion-navbar>
<ion-toolbar no-border-top></ion-toolbar>
</ion-header>
will now become:
<ion-header>
<ion-navbar></ion-navbar>
<ion-toolbar></ion-toolbar>
</ion-header>
and if you decide you don't want the border just add no-border
to the header: <ion-header no-border>
.
This means that no-border-top
and no-border-bottom
will not work on iOS and should
be removed from any toolbars using it.
The argument passed to the events.subscribe(args)
function is no longer an array of parameters.
Instead, it will be called with the same parameters used in events.publish(arg1, arg2)
For example, the following code:
events.subscribe('user:created', args => {
console.log('Welcome ', args[0], ' at ', args[1]);
});
will now become:
events.subscribe('user:created', (user, time) => {
console.log('Welcome ', user, ' at ', time);
});
Published by brandyscarney almost 8 years ago
$fab-<mode>-in-list-background-color
->$fab-<mode>-list-button-background-color
$fab-<mode>-in-list-text-color
->$fab-<mode>-list-button-text-color
$fab-<mode>-in-list-background-color-activated
->$fab-<mode>-list-button-background-color-activated
Published by brandyscarney almost 8 years ago
Published by jgw96 almost 8 years ago
Published by brandyscarney about 8 years ago
Published by brandyscarney about 8 years ago
RC0 requires changes to the structure of your app. To get started updating your app see the upgrade steps section below.
2.0.0
releasegulp
to @ionic/app-scripts
browserify
or webpack
preloadTabs
ability. This is no longer needed with the Ahead of Time (AoT) compiler.alertOptions
input has been renamed to selectOptions
. See more details here.color
input on components, not added<button>
becomes <button ion-button>
. See more details here and here.<scroll-content>
element, which is internal to <ion-content>
, has been renamed to<div class=”scroll-content”>
since it was neither a directive nor a web component.<ion-fixed>
has been removed, use <div ion-fixed>
instead.typings
tool and have migrated to npm @types
. See more details here.Renamed ionViewLoaded
to ionViewDidLoad
Removed ionViewDidUnload
Removed fireOtherLifecycles
from ViewController
Nav transitions are now queued. Meaning if you run:
navCtrl.push(Page1);
navCtrl.push(Page2);
Page1 will transition in, then immediately Page2 will transition in. There can never be two transitions happening at the same time.
Page transition promises can now possibly reject the returned promises. Used mainly for ionViewCanEnter
and ionViewCanLeave
.
Colors are no longer added directly to a component, they should instead be passed in the color
attribute.
For example:
<ion-tabs primary>
Becomes
<ion-tabs color="primary">
Or to bind an expression to color:
<ion-navbar [color]="barColor">
...
</ion-navbar>
@Component({
templateUrl: 'build/pages/about/about.html'
})
export class AboutPage {
barColor: string;
constructor(private nav: NavController, platform: Platform) {
this.barColor = platform.is('android') ? 'primary' : 'light';
}
}
Components with this property:
Badge
Button
Checkbox
Chip
FAB
Icon
Item (Item, Item Divider, List Header)
Label
Navbar
Radio
Searchbar
Segment
Spinner
Tabs
Toggle
Toolbar
Typography (headers, paragraphs, spans, etc.)
Reason for this change:
It was difficult to dynamically add colors to components, especially if the name of the color attribute was unknown in the template.
This change keeps the css flat since we aren’t chaining color attributes on components and instead we assign a class to the component which includes the color’s name.
This allows you to easily toggle a component between multiple colors.
Speeds up performance because we are no longer reading through all of the attributes to grab the color ones.
Select’s alertOptions
input has been renamed to selectOptions
. It now allows you to pass options for either the alert or action-sheet
interface. Refer to their documentation for the options each of them
accept.
<button>
becomes <button ion-button>
<a button>
becomes <a ion-button>
<button ion-item>
does not get the ion-button
attribute
Buttons inside of <ion-item-options>
do get the ion-button
attribute
Reason for this change:
It was difficult to have custom buttons since buttons automatically received the Ionic styles - the user can now take advantage of adding their own styling to a button if they want it to behave differently than the Ionic button.
Keeping the <a>
and <button>
element and adding ion-button
as an attribute gives us the ability to take advantage of the native functionality and built-in accessibility of native elements. If Ionic provided an we’d have to copy over all the possible attributes and events to the real nested button/link (type=submit, formnovalidate, value, autofocus, href, target, focus/blur, download, nofollow, ping, tel:86705309, etc). Additionally, ng2 does not have the “replace” directive where could be turned into .
Since button
was already being used as an attribute to the <a>
element, this is more consistent between the two.
If a navPush or navPop directive is on an <a ion-button>
, Ionic can automatically add the href
attribute.
A few reasons why we didn’t create <ion-button>
references #7467
<button>
becomes <button ion-button>
<a button>
becomes <a ion-button>
<button ion-item>
does not get the ion-button
attribute<ion-item-options>
do get the ion-button
category
attribute, this should be passed inion-button
instead.icon-only
,icon-left
, and icon-right
Icon only buttons
<button>
<ion-icon name=”rainy”></ion-icon>
</button>
becomes
<button ion-button icon-only>
<ion-icon name=”rainy”></ion-icon>
</button>
Icon left of text in a button
<button>
<ion-icon name=”rainy”></ion-icon>
Rainy
</button>
becomes
<button ion-button icon-left>
<ion-icon name=”rainy”></ion-icon>
Rainy
</button>
Icon right of text in a button
<button>
Rainy
<ion-icon name=”rainy”></ion-icon>
</button>
becomes
<button ion-button icon-right>
Rainy
<ion-icon name=”rainy”></ion-icon>
</button>
Item option buttons - the icon-left
attribute should still be added to the <ion-item-options>
container and not the button itself.
menuToggle
buttons should not get the icon-only
attribute
Reason for this change:
There was a noticeable performance decrease from us reading in each button to determine where icons were placed and how to style them. This change improves performance.
This adds styling so that the buttons and icons will be padded a certain amount, but the user is free to leave these attributes off and style the components themselves.
Ionic stylesheets are no longer dynamically loaded per platform. Instead there will be one CSS file to import. Note that future build processes will slim down the CSS file even further to only include component CSS actually used.
In the head of your index.html
file, replace:
<!-- ionic dynamically decides which stylesheet to load -->
<link ios-href="build/css/app.ios.css" rel="stylesheet">
<link md-href="build/css/app.md.css" rel="stylesheet">
<link wp-href="build/css/app.wp.css" rel="stylesheet">
With:
<link href="build/main.css" rel="stylesheet">
The default configuration will be updated, but if your existing app is using Sass and importing Ionic Sass files directly you’ll need to update the includePaths
of Node Sass.
node_modules/ionic-angular/themes
Next, to include Ionic into your custom Sass file you’ll need to update the Ionic import to this:
@import "ionic.theme.default";
Any type definitions for third party libraries that are included via the typings
tool and are included in the the typings.json file should
be updated to use npm @types
. An example of how this looks is:
npm install @types/lodash --save-dev --save-exact
Delete the typings.json
file, and the typings
directory.
The storage utilities have been moved outside of the framework to a separate library called @ionic/storage
.
This library can be installed by executing the following command:
npm install @ionic/storage --save --save-exact
It must be included in the app's NgModule
list of providers
:
import { Storage } from '@ionic/storage';
...
@NgModule({
...
providers: [Storage]
})
It can then be injected into any class that needs access to it:
import { Storage } from '@ionic/storage';
...
export class MyAwesomePage {
constructor(public storage: Storage) {
}
ionViewDidEnter() {
this.storage.get('myKey').then( (value:any) => {
console.log('My value is:', value);
});
}
}
ionic-angular
package includes es5 code with es2015 module import/exports, umd
modules, and pure es2015
code. The package.json
is set up using the main
and module
options to make this work seamlessly.
We are providing 2 ways to update your app with this release. The first way will guide you through creating a new Ionic 2 project and copying your project files to it. This is the easiest way to update your app in our opinion. The second way will step through how to update your existing project. There are a lot of steps involved with this way, and we recommend viewing our conference app for any clarification if you choose this way. This is it! We don’t plan on making any more major API changes after this version.
Note: For details on NgModules you can read the Angular docs on them here
npm install -g ionic
Note: if you have installed the beta cli you should run npm uninstall -g ionic
first.
ionic start --v2 myApp
app/pages/
of your beta.11 app to src/pages/
, providers from app/providers
to src/providers
pipes from app/pipes
to src/pipes
and any custom components to src/components
in the new RC0 app.templateUrl
's to be relative to the .ts
file. For example in app.component.ts
the url should change from build/app.html
to app.html
and in a page referencing about.html
from build/pages/about/about.html
to about.html
.declarations
array and the entryComponents
array in `src/app/app.module.ts.declarations
array in src/app/app.module.ts
.providers
array in src/app/app.module.ts
.providers
entry in @Component
from your pages.private
TypeScript keyword to public
.<button />
to <button ion-button />
according to these instructions.color
attribute : <button primary />
changes to <button color="primary" />
.IonicModule.forRoot(MyApp, {configObject})
in app.module.ts
where its says configObject
.app.variables
file under the mode heading in the new RC0 app.npm install -g ionic
Note: if you have installed the beta cli you should run npm uninstall -g ionic
first.
npm install
in your project folder.gulpfile.js
.app
to src
.app
inside of src
.app.html
and app.ts
inside of src/app
.app.ts
to app.component.ts
.app.module.ts
file and copy content from ionic2-starter-blank.ionicBootstrap
in app.component.ts
to the providers in app.module.ts
. Make sure to copy imports too.declarations
array in src/app/app.module.ts
.IonicModule.forRoot(MyApp, {configObject})
in app.module.ts
where it says configObject
.ionicBootstrap
code from app.component.ts
.app.component.ts
and then rename all uses of MyApp
in app.module.ts
to your main app class (or rename the export to MyApp
in app.component.ts
).app.component.ts
to use the correct path. For example, ./pages
becomes ../pages
.app.module.ts
to import your page specific classes. See HomePage
for example. All pages should be included here.app.module.ts
. For example, ./providers
becomes ../providers
.main.dev.ts
and main.prod.ts
files from ionic2-app-base to app/
.www/index.html
to src/index.html
and modify it to look like ionic2-app-base, make sure to keep any external scripts you have added.www/assets
to src/assets
.www/img
to src/assets/img
.www/
to src/assets/
.templateUrl
's to be relative to the .ts
file. For example in app.component.ts
the url should change from build/app.html
to app.html
and in a page referencing about.html
from build/pages/about/about.html
to about.html
.typings/
folder and typings.json
file.tsconfig.json
to match ionic2-app-base.theme/
folder to delete the app.core.scss
file and copy app.variables.scss
from the ionic2-app-base, then rename it to variables.scss
.app.variables
file under the mode heading.<img src="img/myImg.png">
and now it should be <img src="assets/img/myImg.png">
.private
TypeScript keyword to public
.<button />
to <button ion-button />
, see docs above.color
attribute : <button primary />
changes to <button color="primary" />
.icon-left
, if the icon is on the right add icon-right
, and if the button only has an icon in it, add the icon-only
attribute to the button. See New Behavior of Icons in Buttons
Published by brandyscarney about 8 years ago
Fixed typos in the input highlight variables:
$text-input-md-hightlight-color-valid
->$text-input-md-highlight-color-valid
$text-input-wp-hightlight-color-valid
->$text-input-wp-highlight-color-valid
Modified variables to turn on/off the highlight:
ios (defaults to false for all):
$text-input-ios-show-focus-highlight: false !default;
$text-input-ios-show-valid-highlight:
$text-input-ios-show-focus-highlight !default;
$text-input-ios-show-invalid-highlight:
$text-input-ios-show-focus-highlight !default;
md (defaults to true for all):
$text-input-md-show-focus-highlight: true !default;
$text-input-md-show-valid-highlight:
$text-input-md-show-focus-highlight !default;
$text-input-md-show-invalid-highlight:
$text-input-md-show-focus-highlight !default;
wp (defaults to true for all):
$text-input-wp-show-focus-highlight: true !default;
$text-input-wp-show-valid-highlight:
$text-input-wp-show-focus-highlight !default;
$text-input-wp-show-invalid-highlight:
$text-input-wp-show-focus-highlight !default;
Published by brandyscarney over 8 years ago
Published by adamdbradley over 8 years ago
Published by brandyscarney over 8 years ago
Published by brandyscarney over 8 years ago
$toolbar-ios-button-color
now has acolor-contrast($colors-ios, $toolbar-ios-background, ios)
which will evaluate to the primary color for light background$bar-button-ios-color
has been renamed to $toolbar-ios-button-color
$bar-button-ios-border-radius
has been renamed to
$toolbar-ios-button-border-radius
added variables for the toolbar ios title for easier styling:
$toolbar-ios-title-font-weight
$toolbar-ios-title-text-align
$toolbar-ios-title-text-color
references #6364
$bar-button-wp-color
was renamed to $toolbar-wp-button-color
$bar-button-wp-border-radius
was renamed to
$toolbar-wp-button-border-radius
Added $toolbar-wp-title-text-color
for better control of the title
color
Removed $toolbar-wp-button-color
from the default themes
references #6364
$toolbar-md-button-color
no longer gets passed to the function that
sets the contrast color for toolbar buttons, but it can still be used
to set the default button color.
$bar-button-md-color
was renamed to $toolbar-md-button-color
$bar-button-md-border-radius
was renamed to
$toolbar-md-button-border-radius
references #6364
media
in component-mode-media-padding
(for example)item-left
.references #5925
Published by danbucholtz over 8 years ago
$button-default-border
instead of $button-primary-border
(for example). The border property was previously ignoring the parameter and was hard-coded to transparent (7da8739f)