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 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)Published by brandyscarney over 8 years ago
Published by danbucholtz over 8 years ago
<a name"1.3.0">
Published by brandyscarney over 8 years ago
@at-root
font import to the components file (8f08de1), closes #5931
tabbarIcons
is officially removed, please usetabbarLayout
instead. View the Tabs API docs for more information.Published by brandyscarney over 8 years ago
$colors-wp: (
primary: (
base: #327eff,
contrast: yellow
),
secondary: (
base: #32db64,
contrast: hotpink
),
danger: #d91e18,
light: #f4f4f4,
dark: #222
) !default;
references #5445
$colors-md: (
primary: (
base: #327eff,
contrast: yellow
),
secondary: (
base: #32db64,
contrast: hotpink
),
danger: #d91e18,
light: #f4f4f4,
dark: #222
) !default;
references #5445
$colors-ios: (
primary: (
base: #327eff,
contrast: yellow
),
secondary: (
base: #32db64,
contrast: hotpink
),
danger: #d91e18,
light: #f4f4f4,
dark: #222
) !default;
references #5445
Published by brandyscarney over 8 years ago
Published by brandyscarney over 8 years ago
Published by brandyscarney over 8 years ago
Published by perrygovier over 8 years ago
A small but critical change to the Copenhagen release
Published by tlancina over 8 years ago
Enjoy!
<3 The Ionic Team