Bug Fixes
backdrop: nvda no longer incorrectly announces backdrop (#22481) (2d878fc), closes #22102
checkbox: use a native input to fix a11y issues with axe and screen readers (#22402) (7214a84), closes #21644 #20517 #17796
input: title attribute is now automatically inherited (#22493) (abad12f), closes #22055
refresher: ios native refresher now works in side menu (#22449) (a4a6453)
refresher: md native refresher now works in side menu (#22446) (6b817f2), closes #20832
toggle: use a native input to fix a11y issues with axe and screen readers (#22477) (813611a), closes #22011 #21552
vue: correctly pass route props to components (#22476) (0956f8b), closes #22472
vue: tab bar now works with slot="top" (#22461) (e17c822), closes #22456
Features
chip: add disabled property (#20658) (0a0cbd8), closes #19510
segment: add swipeGesture property to allow for disabling of the swipe gesture (#22087) (65bc995), closes #22048
vue: composition api lifecycle methods (#22241) (f5b0299)
vue: vetur support (#22403) (e76f79d)
vue: web-types support (#22428) (639314a), closes #19522
Performance Improvements
ios: move content to stacking context while preserving position: fixed behavior (#22489) (d77a9d5), closes #22473
5.4.4 (2020-11-12)
Bug Fixes
build: add missing es5 output (228d349)
5.4.3 (2020-11-06)
Bug Fixes
all add missing vendor prefixes to css (0989ea5)
5.4.2 (2020-11-05)
Bug Fixes
alert: correctly position alert when keyboard is open (#22425) (9752cd6)
ios: contenteditable elements are now selectable on iOS (#22404) (023fb18), closes #18368
item: only add click event listener to items with inputs (#22352) (9659ad6), closes #22011
range: gesture is now properly re-created on connectedCallback (#22407) (2fea36f), closes #22335
refresher: work properly in modal by waiting for content to be ready (#22390) (91d0414), closes #22256
segment-button: color property is now reactive if previously undefined (#22405) (04161c9), closes #20831
vue: correctly switch tabs after going back (#22309) (daf6a92), closes #22307
vue: ensure view is updated correctly when replacing a route outside of a nav guard (#22429) (5a4d0c0), closes #22412
Performance Improvements
ios: move content to stacking context to improve scrolling performance on iOS devices (#22180) (9f44966)
5.4.1 (2020-10-22)
Bug Fixes
select: properly align label with select in item in MD mode (#22330) (1a2e532), closes #19887
vue: going back with query params now goes to correct view (#22350) (561a4ac), closes #22324
vue: improve compatibility with route guards (#22371) (31f9bc8), closes #22344
vue: improve handling of parameterized urls (#22360) (6fad0fe), closes #22359
vue: lifecycle events are now fired in component context (#22348) (bcef804), closes #22338
5.4.0 Sulfur (2020-10-15)
This is the first stable release of Ionic Vue.
Enjoy the Vue! 🎉
New to Ionic Vue?
Check out our Quickstart Guide to get up and running. Then be sure to check out our Building Your First App Guide to learn how build a cross platform Ionic Vue application from start to finish!
5.4.0-rc.3 (2020-10-14)
This version is dedicated to our upcoming Ionic Vue release.
Bug Fixes
vue: ion-page component is now properly shown with HMR (#22319) (c5ab562)
Upgrade Steps
npm install @ionic/vue@5.4.0-rc.3 @ionic/vue-router@5.4.0-rc.3 --save-exact
New to Ionic Vue?
Check out our Quickstart Guide to get up and running. Then be sure to check out our Building Your First App Guide to learn how build a cross platform Ionic Vue application from start to finish!
5.4.0-rc.2 (2020-10-13)
This version is dedicated to our upcoming Ionic Vue release.
Bug Fixes
vue: do not hide page content when using ion-page in non-routing contexts (#22302) (fff82d0), closes #22300
vue: going back from tabs page to a non-tabs page now selects correct page (#22275) (b06ae16), closes #22258
vue: improve swipe to go back reliability (#22288) (c74fd41), closes #22237
vue: modal, popover, and nav are now created within application context (#22282) (6026c65), closes #22079
vue: pages now render in correct outlet when using multiple nested outlets (#22301) (52f655c), closes #22286
Upgrade Steps
npm install @ionic/vue@5.4.0-rc.2 @ionic/vue-router@5.4.0-rc.2 --save-exact
New to Ionic Vue?
Check out our Quickstart Guide to get up and running. Then be sure to check out our Building Your First App Guide to learn how build a cross platform Ionic Vue application from start to finish!
5.4.0-rc.1 (2020-10-08)
This version is dedicated to our upcoming Ionic Vue release.
Bug Fixes
vue: correctly handle query params (#22253) (6849dd3), closes #22229
vue: correctly show ion-back-button when going back (#22260) (39d2530), closes #22217
vue: hide layout shift on ion-page components (#22254) (2bad1bb), closes #22052
vue: ion-tab-bar no longer throws undefined error when re-creating tabs (#22261) (d746561), closes #22255
Upgrade Steps
npm install @ionic/vue@5.4.0-rc.1 @ionic/vue-router@5.4.0-rc.1 --save-exact
New to Ionic Vue?
Check out our Quickstart Guide to get up and running. Then be sure to check out our Building Your First App Guide to learn how build a cross platform Ionic Vue application from start to finish!
5.3.5 (2020-10-07)
Bug Fixes
button: allow any element type to use the "icon-only" slot (#22168) (c454c84)
datetime: do not set ampm when the column doesn't exist (#22220) (18fb885), closes #22149
datetime: remove the automatic switching from am to pm (#22207) (f81d18c), closes #18924 #22171 #22199
item: properly align datetime and select with fixed or no labels (#22221) (f42c688), closes #18773 #18761 #18779
label: keep color when focused on a floating or stacked label (#18576) (992580a), closes #18531
select: do not close popover or set value when switching with arrow keys (#22210) (1878c8e), closes #22179
5.3.4 (2020-09-25)
Bug Fixes
alert: follow accessibility guidelines outlined by wai-aria (#22159) (e9b2cc8), closes #21744
overlays: return focus to presenting element after dismissal (#22167) (cc45ad8), closes #21768
picker-column: add cancelable check to avoid intervention error in chrome (#22140) (a24a041), closes #22137
radio: follow accessibility guidelines outlined by wai-aria (#22113) (ea0e049), closes #21743
reorder: allow click event propagation when reorder group is disabled (#21947) (baafe08), closes #21017
segment: do not allow text selection on desktop (#22158) (1526bdf)
Performance Improvements
segment: improve scrolling performance on ios when using segment (#22110) (68afc49), closes #22095
5.3.3 (2020-09-17)
Bug Fixes
datetime: do not reset to am when changing hour and pm is set (#21997) (8b85fe0), closes #19175 #19260 #20026 #16630
input: only focus the first input / textarea when clicking on the parent item (#22049) (99f2532), closes #22037 #22032
react: Keep a hold of previous routes when doing a redirect, closes #22053 (74af3cb)
react: redirect routes should unmount leaving component, fixes #22022 (#22029) (b11e06c)
textarea: do not generate duplicate IDs between ion-input and ion-textarea (#22074) (c72c7ff), closes #21542
5.3.2 (2020-08-27)
Bug Fixes
input: improve reliability of scroll assist when accessory bar is enabled (#21936) (22477fb), closes #21912
input: properly focus the input when clicking the item padding in WebKit (#21930) (e4964ff), closes #21509
input: remain focused in the input after pressing the clear button (#21985) (6878fb9), closes #21549
label: use translateY so input caret shows up due to webkit issue (#21949) (00eac33), closes #21943
overlays: prevent focus from being stolen when presenting another overlay from within a modal (#21856) (5c177d7), closes #21840
range: properly display stacked labels in an item with a range (#21944) (9f4b01e), closes #21625
react: export correct animation types (#21950) (36e4bf7)
react: removed exporting of ionRenderToString to decrease bundle size, closes #21917 (#21928) (434befe)
react: setting active tab properly on mount, closes #21830 (#21833) (f58424f)
react: fix tab currentHref when changing tabs, closes #21834 (#21835) (74468ab)
5.3.1 (2020-07-27)
Bug Fixes
react: properly extend HTMLElement for tabs (bfddb17), closes #21803
Bug Fixes
angular: per-page animations now work with swipe to go back (#21706) (2664587), closes #21692
datetime: remove unneeded combobox role (#21708) (f00ad8a)
input: clear button can now be tabbed to (#21633) (1dcd9de)
ios: improve scroll assist reliability on password inputs (#21703) (3cbf9e7), closes #21688
keyboard: keyboard events now consistently fire on android (#21741) (020f3cc), closes #21734
nav: insertPages method correctly inserts multiple pages with props (#21725) (eb592b8), closes #21724
overlays: trap focus inside overlay components except toast (#21716) (fff4aec), closes #21647
segment-button: allow min-width to be overridden (#21722) (88f1828), closes #21105
title: allow overriding of large title transform-origin (#21770) (dbe6853), closes #21761
virtual-scroll: properly calculate top offset when nested (#21581) (d297ecb)
Features
card: expose global card css variables (#21756) (096eef4), closes #21694
input: accept datetime-local, month, and week type values (#21758) (fa93dff), closes #21757
input, textarea: expose native events for ionBlur and ionFocus (#21777) (a625c83), closes #17363
react: add custom history to IonReactRouter (#21775) (d4a5fbd), closes #20297
react: add new react router (#21693) (c171ccb)
router: add navigation hooks (#21709) (77464ef)
segment-button, toast: expose additional shadow parts (#21532) (a5e4669)
select: add optional generic typings (#21514) (7c2d0c9)
5.2.3 (2020-07-01)
Bug Fixes
angular: expose createAnimation in addition to AnimationController (#21616) (a5b3750), closes #21615
select: change role to listbox (#21609) (8c79e2c)
slides: enable keyboard integration (#21608) (26674f1), closes #21554
textarea: add aria-labelledby to native textarea (#21606) (88f23b1), closes #21600
5.2.2 (2020-06-17)
Bug Fixes
action-sheet, alert: resolve double click issue when running in iOS mode on chrome (#21506) (bcccc21), closes #21503
angular: fix issue where navAnimation was being incorrectly overridden (#21508) (e968bd0), closes #21495
input: add aria-label to clear button (#21538) (d8b377f), closes #21537
ios: respect toolbar opacity when doing nav transition (#21512) (24cfdc3)
segment: ensure checked classes get set after not having a value (#21547) (17308f2), closes #21546
5.2.1 (2020-06-11)
Bug Fixes
angular: resolve error when not using ngModel on components (4083e32)
Bug Fixes
action-sheet, toast: allow button handler to return Promise (#21259) (7703da2)
angular: patch FormControl methods to properly sync Ionic form classes (#21429) (e95b481)
datetime: ensure year-only values are not affected by timezone when parsing (#21309) (3937101)
header: large title transition now works on older versions of iOS (#21339) (2dac12c)
img: use setTimeout fallback on older versions of chrome (#21358) (0bf9449)
ios: add haptic drag gesture for action sheet and alert components (#21060) (33be1f0)
item: inherit align-items from parent item (#19278) (882f8fe), closes #18703
item: input-wrapper now inherits overflow (#21282) (29d208d)
menu-button: screen readers now properly announce menu button (#21324) (eaf4fb6)
modal: card style modal no longer gets stuck when swiping quickly (#21224) (448dfa0)
modal: set card-style modal height using the --height css variable (#21453) (a4f0bdb)
reorder-group: revert item to original position when passing false to complete (#21396) (5f2001c), closes #19128
router: use correct nav transition when going back (#21301) (c8db0d5)
scroll-assist: improve scroll detection accuracy (#21416) (137c49d)
slides: update Swiper dependency to resolve error when doing SSR (#21350) (3290604)
textarea: native textarea inherits max/min width and height (#21333) (2377480)
Features
alert: add destructive role to alert buttons (#21269) (e53f024)
alert: add support for custom input attributes (#21365) (1ed8169)
all: add all autocomplete values to input and searchbar (#21297) (4fd7c0c)
all: add optional generic typings for overlay component methods (#21393) (5bf83b8)
all: add shadow parts to missing components (#21436) (17375d2)
all: add support for configuring animations on a per-page basis (#21433) (f34d375)
angular: expose activatedView (#21302) (829a0d9)
angular: expose getPlatforms and isPlatform (#21308) (4af54a2)
angular: add strongly typed Ionic lifecycle hooks (#18044) (53fc8e3), closes #18043
fab-button: add close icon font size css variable (#19628) (df408f9)
fab-button: add closeIcon property (#19626) (698e526)
select-option: pass class from the option to the interface for individual styling (#21304) (5285824)
5.1.1 (2020-05-13)
Bug Fixes
all: improve scroll assist reliability for below the fold inputs (#21206) (7166a29)
all: overlay components no longer display outline when focused (#21226) (bb62023)
display: remove 1px gap between mutually exclusive breakpoints (#21276) (703ef5c), closes #20993 #20743
header: do not error on collapsible header on devices that do not support IntersectionObserve (#21222) (0c13f25)
input: check for tabindex and pass it properly to native input (#21170) (dd4cb70), closes #17515
ios: position page transition shadow properly under footer (#21095) (50678c0)
md: do not hide page when swipe gesture is cancelled (#21247) (f334e83)
overlays: respect keyboardClose property when opening overlays (#21240) (9d0dcbb)
picker: haptics now work properly (#21268) (8e11ecc)
refresher: correctly select shadow root on older browsers (#21237) (f23f1cb)
refresher: refresher completes even after switching to a new tab (#21236) (1e6f923)
segment-button: screen readers now announce selected state properly (#21273) (85cc35e)
toggle: screen readers now announce toggle properly (#21168) (1fbdb22)
Bug Fixes
action-sheet: show correct cancel button background on dark mode (#21084) (e442324), closes #21082
all: correctly default gestures to use a passive listener (#21038) (dea9248)
angular: do not navigate to the same tab if already active (#21085) (15203de), closes #21074 #19943
back-button: announce back button text correctly by screen readers (#21053) (14c226c), closes #21043
datetime: locale inputs are now reactive (#20826) (a75e8f3), closes #20367
ios: account for nested tabs with page transition (#20955) (e23dec5), closes #20948
ios: properly animate content when navigating from a tabbed page (#20918) (8a02b28), closes #20912
loading: correctly announce spinner by screen readers (#21116) (63d8f62), closes #21107
md: do not display blank screen when using MD page transition and swipe gesture (#21058) (4973807), closes #21056
modal: properly inherit border radius for modals on Safari (#20887) (bd64509), closes #20878
modal: swipeToClose property is now reactive (#21073) (4bd9134), closes #21072
overlays: focus overlay when presented (#20997) (fc2be8d), closes #19882 #17126
overlays: prevent accidental clicks when dismissing overlays (#21093) (671802f), closes #21092
react: IonTabBar properly extends IonicReactProps (#21009) (102a842), closes #21006
refresher: properly check for Haptics plugin on web (#21156) (c53b136), closes #21148
refresher: properly calculate content dimensions in native ion-refresher (#21157) (83dcc71)
router: account for query string when pushing page (#21071) (eab3373)
searchbar: correctly announce the cancel button text by screen readers (#21049) (15a603b), closes #21013
select: account for MutationObserver when performing SSR (#21068) (66e8e64), closes #21063
slides: slides no longer break with Angular Ivy enabled (#20899) (3123a31), closes #20356
split-pane: properly show border in rtl mode (#20995) (7a21708), closes #20994
textarea: height is set correctly when using autoGrow in modals (#20971) (32ee040), closes #18993
Features
all: add ability to continue processing hardware back button events (#20613) (3821c04), closes #17824
all: add ability to eject from Ionic sanitizer (#20457) (fa9ddc9), closes #18277
angular: support multi-app for ng-add schematic (#20768) (39e6c8f)
animation: add option to clean up old animation stylesheets (#20940) (5b98405), closes #20610
app: add keyboard open and close events (ionKeyboardDidShow and ionKeyboardDidHide) (#18478) (ae5f1dd)
back-button: add backButtonDefaultHref property to Ionic Config (#20491) (1b11ff7), closes #19305
checkbox: add parts support for container, mark (#20950) (d4b9151)
content: add parts support for background, scroll (#20929) (578ab93)
datetime: add parts support for placeholder, text (#20930) (76ca475)
gesture: add option to run inside NgZone for Angular apps (#20685) (429edb0), closes #20529
gesture: add support for blurring active inputs on gesture start (#20638) (32ecdd6), closes #20588
img: add parts support for image (#20943) (63c75ed)
input: add support for enterkeyhint (#21035) (3efaf43), closes #21034
item: add parts support for detail-icon (#20979) (6414496)
menu: add parts support for backdrop, container (#20978) (50bc212)
radio: add parts support for container, mark (#20952) (228ca2b)
range: add parts support for bar, bar-active, knob, pin, tick, tick-active (#20961) (619f67a)
react: expose selectTab method and activeTab, closes #19935 (#21171) (43f9d24)
reorder: add parts support for icon (#20960) (ba20209)
searchbar: add border-radius css variable (#20662) (acaa1d9), closes #17426 #18247
searchbar: add support for enterkeyhint (#21036) (e90683a), closes #21034
select: add parts support for placeholder, icon, text (#21108) (30a1c89)
slides: update to swiper 5 (#20917) (4e28445), closes #20033
textarea: add support for inputmode and enterkeyhint (#21106) (1622d9b)
toast: add white-space variable for toast message (#20729) (e5e02d4), closes #20727
toggle: add parts support for handle, track (#20962) (d2b772f)
toggle: improve customization with css vars and auto-adjust handle width and height (#21050) (04ace4c), closes #19868 #20474
Performance Improvements
all: improve scroll assist responsiveness (#20987) (6f13b8c), closes #20922
5.0.7 (2020-03-26)
Bug Fixes
modal: properly target card modal for iPadOS styles (#20884) (5816cf5)
5.0.6 (2020-03-25)
Bug Fixes
all only warn invalid mode if used on an ionic component (#20828) (6ed1c51), closes #20055
all properly scroll to input with scroll assist (#20742) (e24060e), closes #19589
angular: export Animation and Gesture related types (#20766) (2ece194)
angular: respect animation property for ion-router-outlet (#20767) (f2dbe1f), closes #20764
content: apply --offset-top and --offset-bottom values correctly (#20790) (2707289), closes #20735
content: set overscroll-behavior based on the scroll direction (#20011) (a3fc77b), closes #20010
item-divider: update design to match native iOS (#20854) (d91e22d)
item-sliding: account for swipe to go back gesture when opening item-options (#20777) (f23ac44), closes #20773
list: show bottom border on last item in a list followed by a list (#20798) (7bc5191)
modal: backdrop and box shadows no longer stack when opening multiple modals (#20801) (253cd96), closes #20800
modal: backdrop is no longer tappable on card-style modal on smaller screens (#20802) (12932dd), closes #20783
modal: properly apply border radius on card-style modal (#20852) (dff3816), closes #20851
modal: properly remove safe area padding on card-modal (#20853) (71f1182), closes #20799
modal: respect card-style modal spec for iPadOS (#20750) (75bae40), closes #20700
react: expose correct type for CreateAnimation (#20775) (0897c3f), closes #20771
refresher: properly dismiss refresher when completed synchronously (#20815) (b1a87c8), closes #20803
segment: automatically expand width for scrollable segment buttons (#20763) (cdfd50b), closes #20566
segment: scrollable segments only show scrollbar if they overflow (#20760) (ab146c9), closes #20758
slides: check that mutation observer is defined for ssr (#20791) (2d5d251)
textarea: properly adjust auto-grow textarea in scrolled content (#19776) (8bd5bac), closes #19193
title: improve reliability of large title ios nav transition (#20861) (3bd6b5d)
title: large title now inherits global color styling during nav transition (#20862) (321140f)
5.0.5 (2020-03-11)
Bug Fixes
button: allow overflow to be overridden by the CSS variable (#20738) (7ecde36), closes #20726
datetime: account for max property when hour, minute, or second is set to 0 (#20665) (2177461), closes #20652
header: collapsable header should default to using content background (#20736) (f6c3ba7), closes #20691
header: resolve undefined error on collapsible header when navigating quickly (#20728) (87a2721), closes #20725
ios: large title animation now works properly in a modal (#20703) (ec4878a), closes #20696
item: apply proper margin left for slotted icon in RTL (#20684) (d53595e), closes #20653
label: text overflow for slotted headings (#20690) (4d34ce6), closes #17087
modal: leave animation transitions modal completely out of viewport on ipad (#20702) (22d5256), closes #20697
angular exclude components from ssr (#20674) (f64b142)
modal: swipeable modal now works in firefox (#20714) (7d260b9), closes #20706
overlays: prevent accidental dismiss of overlays when tapping screen twice (#20683) (b6c2a77), closes #20608
segment: allow routerLink to work on segment buttons (#20682) (314dbb1), closes #20678
segment: iOS mode segment now works on older Android devices (#20673) (44993b7), closes #20648
5.0.4 (2020-02-27)
Bug Fixes
animation: reset all temporary flags when interrupting an animation (#20627) (0e0e401), closes #20602
buttons: use proper button colors based on CSS variables when inside of a toolbar (#20633) (c1d7bf2)
5.0.3 (2020-02-26)
Bug Fixes
menu: allow ssr to work properly with hardware back button updates (#20629) (fe8d74d)
5.0.2 (2020-02-26)
Bug Fixes
ios: large title transition works properly in tabbed applications (#20555) (7187541), closes #20482
menu: hardware back button now dismisses side menu if open in Cordova/Capacitor app (#20558) (6b2a929), closes #20559
modal: allow swipe to close animation to be overridden (#20585) (8d3ce8d), closes #20577
modal: card style modal now adds appropriate contrast (#20604) (b5310ef)
modal: allow swipeable modal background to be overridden (#20584) (ad6fac8), closes #20572
modal: swipeable modal styles only apply to ios (#20571) (3a2d828), closes #20569
refresher: ensure that translate is cleaned up to avoid stacking context (#20621) (e3e5c69), closes #17949
segment: segment functions properly on older versions of Android (#20554) (0224bed), closes #20466
select: properly align text, add icon-inner and placeholder part (#20605) (926ac3f)
slides: set height to 100% for vertical slides (#20603) (20af652), closes #17341
5.0.1 (2020-02-19)
Bug Fixes
button: reduce font size of icon only button in toolbar on iOS (#20547) (59fa340)
card: inherit background in inner button (#20461) (c16de96), closes #20458
fab: add close icon to internal icons for react (#20490) (c4fb314), closes #20489
fab: show close icon on hover, focused, activated (#20497) (e42c85d)
input: do not clear input if "Enter" key pressed (#20462) (89bf08b), closes #20442
ios: clamp out of bounds values for swipe to go back (#20540) (dd32a5e), closes #20505
menu: swipe gesture should not open menu when a modal is displayed (#20546) (3252c2f), closes #20467
modal: presenting multiple card-style modals now adds border radius properly (#20476) (abf594a), closes #20475
modal: prevent card style modal styles from being overridden (#20470) (86ab77a), closes #20469
react: do a better job matching up route to sync (#20446) (c0aadd6), closes #20363
react: do not remove pages when navigating between tabs (#20431) (b6fbe98), closes #20398
react: icons with MD set should work in browser (#20463) (82670fe)
react: update paths of tab buttons when href changes in ion buttons (#20480) (45d03ba), closes #20321
searchbar: properly align placeholder (#20460) (4d6e15a), closes #20456
segment: border radius applies to indicator on ios (#20541) (9b5854d), closes #20539
segment: do not show ripple effect if disabled via config (#20542) (7a461c5), closes #20533
segment: inner div no longer interferes with click events (#20522) (06b828b), closes #20381
segment: only emit ionChange when user releases pointer from screen (#20495) (4d50064), closes #20500 #20257
tab-bar: update ios icon and label design to match native (#20548) (34f8576)
Enjoy! 🔥
We recommend updating to version 4.11.10 before updating to this version in order to see deprecation warnings related to your app in the developer console.
Run the following commands based on your project type:
# for an angular app
npm i @ionic/angular@latest --save
# for a react app
npm i @ionic/react@latest --save
npm i @ionic/react-router@latest --save
npm i ionicons@latest --save
# for a stencil / vanilla JS app
npm i @ionic/core@latest --save
Then take a look at the Breaking Changes file for API changes.
5.0.0-rc.5 (2020-02-11)
Bug Fixes
angular: correct path for angular projects (#20436) (fd9c7a9), closes #20435
5.0.0-rc.4 (2020-02-10)
Bug Fixes
content: only emit scroll events if enabled (#20401) (fd1b44a)
header: backdrop filter no longer distorts content with collapsible header (#20388) (11d3945), closes #20385
item: remove unneeded box-shadow CSS variable (#20412) (a6764c4), closes #20392
label: remove subpixel font-size to prevent visual glitches (#20415) (3d6f287), closes #20407
segment: add activated class directly to segment button (#20400) (e8886e9)
5.0.0-rc.3 (2020-02-05)
Bug Fixes
refresher: ensure gesture does not interfere with item-sliding (#20380) (8983c70), closes #20379
refresher: translate background content when refreshing (#20378) (cf70916), closes #20377
segment: allow background to be set on iOS segment in a toolbar (#20350) (0f31624)
toolbar: properly apply safe area and border (#20375) (4971499), closes #20354
5.0.0-rc.2 (2020-01-30)
Bug Fixes
header: fix race condition in collapsible header (#20334) (215d55f)
ios: translucent toolbar blur no longer obscures entering page toolbar content (#20314) (e580b88), closes #19158
radio: do not clear radio group value from radio (#20343) (ff78e6e), closes #20323
radio: set default radio value if undefined (#20329) (eb57723)
refresher: add correct fallbacks for native refreshers (#20333) (fd55427)
refresher: resolve undefined issues when updating component (#20322) (59d8687), closes #20320
5.0.0-rc.1 (2020-01-27)
Bug Fixes
components: use proper colors for button states and add back input highlight (#20278) (628db18), closes #20276
components: inherit text indent in all components with text inherit (#20300) (767b005), closes #17786
content: resolve height inheritance issues (#20309) (09bef71), closes #20305
picker: include showBackdrop in interface (#20301) (33186ba), closes #18893
react: export proper types of animations and gestures (#20311) (0034088)
refresher: update animation for dashed property values (#20310) (44211c1)
toast: inherit color in cancel button for a toast with color (#20299) (7b44ae2), closes #20139
4.11.10 (2020-01-24)
Bug Fixes
input: revert previous type change (db1fd1d)
5.0.0-rc.0 (2020-01-23)
Release Candidate is here! 🎉
5.0.0-beta.6 (2020-01-23)
Bug Fixes
animation: add property conversions for CSS Animations (#20252), fixes #20251 (32a7401)
content: set min-height to allow for sticky headers (#20265), fixes #20258 (e613f63)
modal: card-style modal now opens at full width on larger devices (#20256), fixes #20255 (443cbd9)
segment: clicking disabled button no longer adds ripple to active button (#20254), fixes #20253 (f896821)
Features
components: improve button states and add new css properties (#19440) (9415929), closes #20213 #19965
react: add Ionic Animations wrapper (experimental) (#20273) (b59d764)
segment-button: add --indicator-height property to segment button (#19653) (d76a503)
BREAKING CHANGES
We recommend updating to the latest version of 4.x before trying out version 5 in order to see deprecation warnings related to your app in the developer console.
Activated Class
The activated class that is automatically added to buttons on press has been renamed to ion-activated. This will be more consistent with our ion-focused class we add and also will reduce conflicts with users' CSS.
CSS Variables
The --background-hover, --background-focused and --background-activated CSS variables on components that render native buttons will now have an opacity automatically set. If you are setting any of these like the following:
--background-hover: rgba(44, 44, 44, 0.08);
You will likely not see a hover state anymore. It should be updated to only set the desired color:
--background-hover: rgba(44, 44, 44);
If the opacity desired is something other than what the spec asks for, use:
--background-hover: rgba(44, 44, 44);
--background-hover-opacity: 1;
4.11.9 (2020-01-23)
Bug Fixes
core: updating type of input value to accept numbers, fixes #20173 (#20267) (7080205)
react: adding missing overlay component events, fixes #19923 (#20266) (ec6a8dd)
react: Don't render overlay children if isOpen is false, fixes #20225 (#20226) (aff9612)
react: re attach props on update, fixes 20192 (#20228) (9e35ebe)
react: remove leaving view when routerdirection is back, fixes #20124 (#20268) (63d4e87)
react: support routes without a path for notfound routes, fixes #20259 (#20261) (2f8c13b)
react: update icon types to be a string as well, fixes #20229 (#20230) (1411d8a)
5.0.0-beta.5 (2020-01-17)
Bug Fixes
action-sheet: allow scrollable action sheet with many options (#20145) (53fad97), closes #17311
card: remove top padding of content in iOS if under header (#20223) (9232f16)
content: scroll-content div now takes up full height of container (#20194) (9d63b41), closes #20185
header: header opacity properly resets on collapsible titles (#20202) (8e11f79)
modal: prevent double dismiss via gesture and backdrop tap on card-style modal (#20203) (5b0400d)
picker: pick correct option at low velocities (#19660) (39d1262), closes #19659
react: updating icon type and add caret to internal icons (#20216) (dc78f98)
ssr: add reflect content-id attribute to applicable properties (#20169) (3aa47e6)
Code Refactoring
removed checked/selected properties in favor of setting value on parent (#19449) (a5229d9)
Features
datetime: add custom timezone display property (#19519) (7b032c5), closes #19401
segment: update design for iOS and MD spec (#19036) (dc66ce4), closes #18663
toast: expose shadow parts (#20146) (3b4988a)
BREAKING CHANGES
We recommend updating to the latest version of 4.x before trying out version 5 in order to see deprecation warnings related to your app in the developer console.
The following components have been updated to remove the checked or selected properties:
Radio
Segment Button
Select
Developers should set the value property on the respective parent components in order to managed checked/selected status. See the Breaking Changes document for updated usage examples.
Controller components have been removed. Developers should user their respective imports instead. This only affects vanilla JS applications.
Before:
After:
import { modalController } from '@ionic/core';
4.11.8 (2020-01-13)
react: add missing react memory router (8a5aba2)
react: fixing type of icon in ToastOptions, ActionSheetOptions, fixes #20100 (857bab6)
react: supporting ios and md props on icons (#20170) (676cc19)
5.0.0-beta.4 (2020-01-06)
Features
refresher: add MD native refresher (#20096) (5b81bdf), closes #17316
5.0.0-beta.3 (2020-01-03)
Bug Fixes
animation: support css animation on older devices (#20020) (49c394c), closes #20017
icons: fix the ellipsis fill in ionicons (#20137) (9318d24)
modal: account for safe area on devices with a notch (#20072) (1cabb53)
react: fire lifecycle events on initial render, fixes #20071 (2dcf3ee)
Code Refactoring
searchbar: set inputmode default to undefined (#20080) (6612604), closes #20074
Features
angular: angular 9 support (#19515) (2344d0b)
checkbox: add --checkmark-width variable (#19933) (c32a7bc), closes #16803
radio: add --border-radius and --inner-border-radius variables (#20140) (a01c102)
refresher: add iOS native refresher (#20037) (04e7c03), closes #18664
toggle: add --border-radius and --handle-border-radius variables (#20141) (02a46a1)
BREAKING CHANGES
We recommend updating to the latest version of 4.x before trying out version 5 in order to see deprecation warnings related to your app in the developer console.
searchbar: The inputmode property for ion-searchbar now defaults to undefined. To get the old behavior, set the inputmode property to "search".
4.11.7 (2019-12-12)
Bug Fixes
react: fire lifecycle events on initial render, fixes #20071 (9ea75eb)
5.0.0-beta.2 (2019-12-11)
Bug Fixes
animation: convert hyphenated properties to camel case when using Web Animations (#20059) (56f67bd), closes #20058
animation: properly update Web Animation object (#19964) (e766194)
picker: pass selected value to handler on dismiss (#20042) (6e0b9c4), closes #20036
tabs: preserve route navigation extras when changing tabs (#18493) (4c8f32f), closes #18717
title: add correct safe area to large title nav transition (#20029) (300d543), closes #20028
Features
modal: add card-style presentation with swipe to close gesture (#19428) (b3b3312), closes #18660
4.11.6 (2019-12-11)
Bug Fixes
react: don't show back button when not appropriate (684293d)
react: first render performance improvements (1c7d1e5)
react: fix refs for controllers, overlays, ionpage, and ionrouteroutlet, fixes #19924 (#20012) (eef55bb)
react: support for 'root' router direction, fixes #19982 (#20052) (e116712)
react: support navigating to same page and route updates in IonRouterOutlet, fixes #19891, #19892, #19986 (f9bf8db)
Upgrade Note
If you run into a "Property 'translate' is missing in type" error building after updating to 4.11.6, update your React Typings library to the latest:
npm i @types/react@latest @types/react-dom@latest
5.0.0-beta.1 (2019-11-20)
Bug Fixes
animation: track correctly when updating CSS Animation (#19813) (7bd4412)
card: update background to use the same as item (#19602) (1a8b7a4)
content: set fixed content to position absolute (#19867) (fce3e24), closes #17754
gesture: release gesture when disabling (#19855) (21484f1), closes #19848
header: avoid flicker on collapsible header load (#19682) (0a7aae2)
header: avoid flicker when collapsing (#19850) (a3666dd), closes #19839
header: support collapsible header with multiple toolbars (#19909) (fc4bb2d)
header: translucent toolbars now work with collapsible header (#19774) (b642b53), closes #19773
title: only animate large title if back button is in start slot (#19846) (cace1b3), closes #19840
nav-params: set generic type on navigation parameters get() (#19195) (504051d)
picker: pass data and role to dismiss (#19787) (7988720), closes #18454
searchbar: use back button config value for cancel icon (#19353) (3d6f3b9)
textarea: remove padding from textarea placeholder (#19694) (f63d37a), closes #19616
toast: call button handler on cancel (#19793) (420aa66), closes #19791
Features
animation: animation identifiers (#19771) (7d41715), closes #19550
animation: cubic-bezier easing conversion utility (experimental) (#19788) (96a5e60), closes #19789
alert: add support for textarea inputs (#16851) (b28cf02), closes #14153
angular: expose Ionic Animations via AnimationController (#19745) (67a7e23)
angular: expose Ionic Gestures via GestureController (#19864) (48a7662)
searchbar: add --box-shadow variable to style searchbar input (#19838) (1ab7066)
select: add --placeholder-opacity and --placeholder-color, expose shadow parts (#19893) (bef0f53), closes #17446
split-pane: convert to shadow component, add width, max-width, and min-width vars (#19754) (d80f455), closes #17088
Breaking Changes
We recommend updating to the latest version of 4.x before trying out version 5 in order to see deprecation warnings related to your app in the developer console.
back-button: convert back button to shadow (#19411) (0d40d3f)
ionicons: update to Ionicons v5. See https://ionicons.com for more information. (#19670) (69e10de)
list-header: redesign list header to match latest iOS spec (#19915) (5bbb95f)
split-pane: convert split-pane to shadow (#19754) (d80f455)
4.11.5 (2019-11-14)
Bug Fixes
react: improved lifecycle hooks to deal with stale closures, fixes #19873 (#19874) (5ff786a)
4.11.4 (2019-11-07)
Bug Fixes
react: check for component unmount, fixes #19859 (7356c40)
react: adding multiple subscriptions to lifecycle events, fixes #19792 (#19858) (0a3014d)
react: add check to warn if no ionpage is found, fixes #19832 (#19857) (628e766)
react: expand the location stack to better support back button, fixes #19748 (#19856) (d89508b)
react: adding hardware back button support, fixes(19819) (#19851) (fd9745d)
react: adding swipe back functionality and routerOutlet ready improvements, fixes #19818 (#19849) (bcc40c8)
react: create a new overlay each time component is presented, fixes #19841, #19823 (#19842) (9fad416)
4.11.3 (2019-10-30)
Bug Fixes
react: adding change events to iontabs, fixes #19665 (#19711) (b7baf24)
react: adding HashRouter to available ion routers, fixes #19621 (#19683) (fcdbb3c)
react: checking if node is actually an element before treating it like one, fixes #19769 (#19783) (9d0caf6)
react: checking isOpen again after async call before opening overlay, fixes #19755 (f70e71a)
react: don't remove current view, provide a better method to determine showGoBack fixes #19731 and #19732 (31c754d)
react: removing pages from DOM on nav, fixes #19701 (#19712) (ee21d3a)
react: unmount leaving view when using browser back button, fixes #19749 (#19781) (2dc5540)
4.11.2 (2019-10-21)
Bug Fixes
animations: ensure all elements are cleaned up when calling .destroy() (#19654) (d97e167)
header: collapsible header works in tabs (#19658) (4853909), closes #19640
ios: hide leaving view after nav transition to avoid flicker (#19691) (70e0562), closes #19674
menu: clamp out of bounds swipe value (#19684) (1535e95), closes #18927
react: add IonPicker as controller component, fixes #19620 (#19643) (ed98d9e)
react: adding change events to IonTabs, fixes #19665 (#19711) (b7baf24)
react: adding HashRouter to available ion routers, fixes #19621 (#19683) (fcdbb3c)
react: pages no longer hidden when navigating between tabs, fixes #19646 (#19647) (8776556)
react: ensure views are removed from DOM after navigating back, fixes #19701 (#19712) (ee21d3a)
5.0.0-beta.0 (2019-10-15)
Bug Fixes
animations: ensure all elements are cleaned up when calling .destroy() (#19654) (2f88237)
content: set overscroll only on iOS (#19470) (63c2008), closes #19465
css: update responsive display media queries (#18601) (5d6e077), closes #18600
grid: remove padding on children columns when grid has ion-no-padding (#19592) (17119f5), closes #17459
searchbar: update alignment of chips and other elements in toolbar (#19596) (637f26b), closes #19495 #19502
toast: inherit height in container to center align content (#19409) (250718a)
Features
components: cascade mode from parent to child components (#19369) (3dd5f05), closes #18285
menu: default to overlay for ios menu (#19063) (dbf6a44), closes #18662
overlays: add global backdrop opacity variable for animations (#19533) (bd22926), closes #16446
Performance Improvements
animations: do not create setTimeout if infinite iterations (#19632) (0d699fb), closes #19627
animations: wrap loops in requestAnimationFrame call (#19630) (589e67e), closes #19629
Breaking Changes
We recommend updating to the latest version of 4.x before trying out version 5 in order to see deprecation warnings related to your app in the developer console.
all: mode is now cascaded from parent to child component. If this is not desired set a different mode on the child component. (#19369) (55462d7)
anchor: remove ion-anchor, use ion-router-link instead. (#18935) (e7cd197)
card: convert card to shadow. (#19395) (08bb60d)
css: responsive display media queries in the display CSS file have been updated. Instead of using the maximum value of that breakpoint (for .ion-hide-{breakpoint}-down classes) the maximum of the media query will be the minimum of that breakpoint. (#18601) (40a8bff)
css: remove all CSS utility attributes. Use CSS classes instead. See the documentation for the correct class names: https://ionicframework.com/docs/layout/css-utilities (#18956) (04862df)
BEFORE:
AFTER:
events: remove the Events service. (#19600) (8d4a721)
Use "Observables" for a similar pub/sub architecture: https://angular.io/guide/observables
Use "Redux" for advanced state management: https://ngrx.io
header/footer: remove no-border attribute from header/footer, use ion-no-border class instead. (#18954) (d9f6119)
menu: iOS menu now defaults to overlay, set type to "reveal" to get the old behavior. (#19063) (ccb54a1)
menu-controller: remove swipeEnable(), use swipeGesture() instead. (#19526) (30bd8fd)
nav: remove ion-nav-pop, ion-nav-push and ion-nav-set-root. Use ion-nav-link with routerDirection instead. (#19240) (e334d73)
searchbar: remove boolean values from showCancelButton, use string values: "always", "focus", "never". (#18953) (508e186)
BEFORE:
AFTER:
scss: remove scss files from dist/, use CSS variables to theme instead. (#19292) (6450aff)
skeleton-text: remove width property. Use CSS instead. (#18936) (7c3db79)
split-pane: remove main attribute. Use contentId instead. (#19511) (02d7841)
BEFORE:
...
AFTER:
...
theming: ionic default colors have been updated. (#19279) (7f4cf08)
toast: remove showCloseButton and closeButtonText, add a button using the buttons property with role: 'cancel' instead. (#18957) (ad7f112)
4.11.1 (2019-10-14)
Bug Fixes
build: properly update peer dependencies (#19639) (b552daa)
react: add IonPicker as controller component, fixes #19620 (#19643) (ed98d9e)
react: handle tab back nav better, fixes #19646 (#19647) (8776556)
react: moving tslint and friends to devDependencies (#19624) (7f4b77d)
Ionic React! Enjoy! 🧂 🌊 🐼
4.10.3 (2019-10-09)
Bug Fixes
content: set overscroll only on iOS (#19470) (63c2008), closes #19465
searchbar: update alignment of chips and other elements in toolbar (#19596) (637f26b), closes #19495 #19502
4.10.2 (2019-10-08)
Bug Fixes
overlay: ensure lifecycle events fire properly (#19579) (a7b9642), closes #19576
4.10.1 (2019-10-07)
Bug Fixes
animation: animation timer fallback now accounts for iterations (#19527) (9f5ed23)
css: update deprecations to remove wrap (#19535) (bfb704e), closes #19499
header: fix collapsing iOS header when using with split pane (#19480) (dea1c26), closes #19541
list: add bottom border for first item in inset list (#19525) (71b8853), closes #19507
md: fix flicker when navigating back in MD mode on certain Android devices (#19553) (19ee21a), closes #19491
searchbar: update padding and button alignment (#19532) (77658e6), closes #19502
4.10.0 Neon (2019-09-27)
Bug Fixes
angular: add warning if initialized more than once (#19393) (e98769e)
animation: set property defaults to avoid inconsistencies (#19321) (1cbb52c)
animation: fallback to CSS Animations on older versions of Chrome (#19288) (2d39c07), closes #19272
animation: animations of duration 0 now run in Safari (#19287) (4e544f1), closes #19285
components: fix crash in IE11 when using classList add() or remove() (#19460) (b4d92c6)
components: improve CSS Variable support in IE11 (#19473) (44ad074)
content: remove pointer-events from iOS transition shadow (#19471) (8a52c7d), closes #19466
menu: menus show proper drop shadows (#19454) (eab0865), closes #19387
radio-group: get radios before caching value to avoid infinite loop (#19448) (cf223e4), closes #19277
react: update events to use proper types (c79e74b)
router-outlet: hide leaving view after transition finishes (#19335) (bfa17d1)
Features
config: expose getMode() and deprecate Config.set() (#19104) (0f05ea4)
docs: add VSCode docs support (#19309) (a3f345c)
title: add support for small title (#19215) (e27962d), closes #18898
title: add support for large title (experimental) (#19268) (923312e), closes #16885
Performance Improvements
animation: avoid ngzone with requestAnimationFrame (#19457) (8ca97ce)
4.9.1 (2019-09-16)
Bug Fixes
platform: properly detect iPads running iPadOS (#19258) (4a90096)
Bug Fixes
all: allow elements to be reused once removed from the DOM (#18963) (48a2763), closes #18843 #17344 #16453 #15879 #15788 #15484 #17890 #16364
animation: add correct onFinish interface parameters (#19199) (a81653b)
animation: improve Web Animation feature detection accuracy (#19212) (6eca5b0), closes #19205
animation: properly clean up elements when using destroy (#19210) (93f2064)
segment: do not emit ionChange until didLoad (#19218) (9751f14), closes #19204
Features
nav-link: add nav-link and deprecate nav-push, nav-pop, and nav-set-root (#18909) (c3044f5)
slides: expose full Swiper API (#19137) (e1fa461)
4.8.1 (2019-08-27)
Bug Fixes
animation: enable backwards compatibility for overlay animations (#19160) (fb70980)
gesture: account for negative step values with Web Animations (#19196) (b3c7436)
ios: clear opacity on toolbar background after iOS transition (#19169) (fa958a5)
md: set fill mode on MD transition to both (#19161) (0e8ab49)
4.8.0 Oxygen (2019-08-21)
Bug Fixes
alert: apply styling to disabled items (#18545) (67ed89d)
platform: properly detect Electron platform (#19044) (e8cdda0), closes #19043
toggle: change background to use CSS variable (#19012) (94e525c), closes #18940
transition: enable iOS transition shadow by default (#19051) (a5d3c6b)
Features
animation: add animation utility (experimental) (#18918) (30ca46a)
gesture: add gesture utility (experimental) (#18918) (30ca46a)
searchbar: add inputmode property (#18980) (1187dc2)
spinner: add circular spinner for MD default (#19052) (e33cf85)
4.7.4 (2019-08-07)
Bug Fixes
core: remove extra semicolons being rendered (#19033) (39f0768)
4.7.3 (2019-08-07)
core: fix an issue with production builds of @ionic/core
4.7.2 (2019-08-07)
Bug Fixes
angular: hardware back button subscribeWithPriority triggers change detection (#18962) (3a22105), closes #18959
angular: nested inputs no longer conflict with each other (#18976) (6bbdb80), closes #18248
range: ion-range value now submitted with form (#19008) (8f7853c)
reorder: only move item if reorder happens (#19007) (d237e80)
router: partial swipe to go back gesture no longer breaks view(#18977) (713ea8a), closes #18462
toast: allow loading ion-icon from asset path (#18969) (23f327e)
vue: rename swipeEnable to swipeGesture (#17346) (c2348f7), closes #16002
4.7.1 (2019-07-26)
Bug Fixes
angular: ensure change detection fires properly (#18896) (962783b), closes #18894
Angular 8 Support
With this version comes support for Angular 8! Follow the below steps to update.
Update @ionic/angular and @ionic/angular-toolkit to the latest releases:
$ npm install @ionic/angular@4.7.0
$ npm install @ionic/angular-toolkit@2.0.0 -D
Update @angular/core and @angular/cli:
$ npx ng update @angular/core @angular/cli
Update @angular-devkit dependencies:
$ npm i @angular-devkit/architect@latest @angular-devkit/build-angular@latest @angular-devkit/core@latest @angular-devkit/schematics@latest
View our Angular 8 Update Guide for tips on potential issues!
Bug Fixes
angular: copy input form classes to parent ion-item (#18820) (53179c4), closes #18800
angular: add the swipeGesture method for enabling or disabling the ability to swipe open a menu (#18806) (fbfc076), closes #16002
angular: webview "pause", "resume", and "resize" events now trigger change detection (#18853) (544e550), closes #18831
core: apply translucent if backdrop-filter is supported (#18832) (6b5a59d), closes ionic-team/ionic-docs#666
datetime: allow AM/PM to be changed (#18684) (b7761fe), closes #18585
datetime: properly apply disabled classes when updating columns (#18875) (7ba718c), closes #18793
hardware-back-button: hardware back button no longer erroneously restarts app (#18794) (978cc39), closes #18792
ripple-effect: ensure ripple is removed from components after pointer release (#18854) (71137a2), closes #18836
searchbar: add aria and role for improved accessibility (#18797) (798103b), closes #18796
ssr: avoid window reference (#18865) (23ce6fa)
ssr: check for client runtime method (#18866) (c52b3b4)
textarea: autogrow now resets textarea back to original number of rows when text is cleared (#18822) (26e6d6f), closes #18744
theming: update components to use the proper colors for dark themes (#18735) (045bc59), closes #18713
virtual-scroll: card rendering is no longer distorted (#18877) (3ef6ecf), closes #18870
virtual-scroll: element dimensions are recalculated on resize (#18878) (c91819c)
Features
core: add support for Stackblitz (#18846) (fb18f3b)
ssr: add @ionic/core/hydrate app (#18867) (815fa2e)
navigation: add experimental shadow to iOS page transitions (#18695) (9b075ef), closes #18661
virtual-scroll: adds headerHeight and footerHeight to help prevent flickering (#18851) (0089111), closes #17540
Performance
angular: attach entering view before first change detection and detach leaving page (#18821) (97fec92)
4.6.2 (2019-07-10)
Bug Fixes
menu-button: hide menu button when auto hide or split pane (#18702) (24840d4), closes #18666
menu-button: move font-size to host for easier customization (#18699) (876ab41), closes #18667
overlays: fallback to step color if overlay background variable is unset (#18709) (f16b118), closes #18658
virtual-scroll: remove runOutsideAngular error (#18752) (8beeff2), closes #18746
vue: update imports for types and ionicons (f56fea6), closes #18701
Performance Improvements
all: minify better by using arrow functions (#18730) (03c1d19)
4.6.1 (2019-07-09)
Bug Fixes
app: add hydrated to hide white screen with multiple ionic dependencies (#18649)
datetime: datetime no longer reports having a value if none is set (#18541) (92e0f98), closes #17979 #18540
fab-button: set opacity on disabled fab button (#18685) (6042b39), closes #18682
icon: load icons properly with baseHref (#18650), (#18637)
icon: bind icon name properly (#18707)
infinite-scroll: fix scroll listener (0d58101)
item: do not disable entire item if there are multiple inputs (#18696) (dfa2b13), closes #18655 #18670
router-link: add missing target prop (#18659) (1f51ab2), closes #18655
router-outlet: fix swipe to go back (b69fb69)
scss: copy all scss files (36a58df)
searchbar: proper styling after navigating (#18642)
slides: use correct order for pushing slides dynamically (#18633)
tabs: select proper tab by default and do not emit tab change if selectedTab is undefined (03c834c)
overlay: make create opts optional (44c88ad)
Performance Improvements
angular: skip zone (e059fc8)
4.6.0 Carbon (2019-06-26)
Bug Fixes
button: default opacity for disabled clear buttons (#18560) (f48dc3d), closes #18555
button: update solid buttons to use tint and shade colors (#18537) (26ecf2b)
menu: change ARIA role from complementary to navigation (#18330) (9e4346b), closes #18318
segment: apply hover properly for segment with color (#18549) (78e477b)
segment: default ripple to currentColor (#18547) (832306c)
Features
components: add missing button/a props to components that render them (#17883) (eca4121), closes #16848 #16889
fab-button: add hover state using tint colors (#18536) (ad00679), closes #17624
item: add hover and focused states (#18606) (8a88dd2), closes #18279 #17624
router-link: add router-link and deprecate anchor (#18620) (d4c7b03)
Enhancements
stencil: update to Stencil One to improve app performance 🎉🎊 (b40f7d3)
4.5.0 Boron (2019-06-12)
Bug Fixes
angular: ensure all NavigationExtras values are preserved when navigating (#18468) (7610787), closes #18469
button: set opacity on the host element for disabled button (#18509) (320719b), closes #16965
button: use correct border-radius on menu and back button (#18501) (055e125), closes #17624
button: use correct size on a dynamic button in an item (#18395) (a3e23fc), closes #18085
card: remove white space from bottom of card (#18328) (d53e7aa)
content: prevent ion-searchbar from receiving padding adjustment when keyboard is open (#18008) (b2290a6), closes #18007
datetime: recalculate time columns on change (#18380) (292b24a)
item: start align the content under stacked and floating labels (#18379) (f0af707), closes #16375
item: inherit overflow to allow better customization (#18502) (8d2a47e), closes #17670
item: use a step color if the activated background is not set (#18450) (1899c13), closes #18449
item-sliding: use the correct gesture direction and side for rtl (#18366) (4545100), closes #17012
label: include the ion-text-wrap class styles for larger font (#18374) (4bba540)
platform: prevent error with Platform.is on Android 4.4 (#18387) (54bdb36)
react: ensure element exists in controller before dismissing it (0fd3e5d)
slides: resolve issue where double tap to zoom was enabled by default (10de1da), closes #18035
tabs: allow selection on enter and spacebar press (#18381) (11cde99), closes #18363
textarea: inherit white-space for better customization (#18508) (a583902), closes #18495
virtual-scroll: do not crash with an empty cell list (#17799) (20c146e)
Features
back-button: add variables and support for focused and hover states (#18451) (58672fb), closes #18465
button: add variables for customizing hover state (#18499) (5c5934b), closes #17974
item-divider: add inner padding CSS variables (#18490) (35c143a), closes #18484
menu-button: add variables for hover and focused states (#18434) (5ba0aa9), closes #18279
searchbar: add cancel button options (b959e0b)
toast: allow html content (#18423) (c8104a2)
4.4.2 (2019-05-22)
Bug Fixes
angular: account for query params and fragments within a string when navigating (#18356) (b79f68a)
4.4.1 (2019-05-22)
Bug Fixes
angular: ensure active page is not removed from change detection (#18299) (b8d4961), closes #18293
angular: preserve queryParams and fragment when going back (#18298) (bdd5109), closes #16744
buttons: use theme/color toolbar colors for buttons (#18191) (0511989), closes #18184 #17840
datetime: update label direction in RTL (#18340) (17345ef)
fab: position fab buttons properly in RTL (#18325) (845def8), references #17012
icon: remove stroke and move fill to host element (#18241) (394cf8d), closes #16483
input: keep entire input in view when scrolling with keyboard open (#18253) (3cad778), closes #17457
label: position floating/stacked labels properly in RTL (#18315) (00a27dc), references #17012
loading: allow html content (#18242) (a6cb5f2), closes #18135
overlay: hide scrollbars on non-scrollable content (#16767) (875d563), closes #14178
picker: update the column positions in RTL (#18339) (788a56c), closes #17012
range: update border-radius on range pin for RTL (#18321) (4855351), closes #17012
searchbar: position buttons properly in RTL (#18325) (845def8), references #17012
segment: update segment border for RTL (#18326) (805b225), closes #17012
slides: allow clicks to propagate to buttons (#16728) (a8f9dfe)
tab-button: apply background-focused when tabbing into tab button (#17502) (d788a8e), closes #17042
tabs: position badge properly in RTL (only in Chrome) (#18325) (845def8), references #17012
tabs: select the tab called by the select method after initialization (#18300) (da38647), closes #17957
toggle: position toggle icon properly in RTL (#18325) (845def8), references #17012
toolbar: update md toolbar button spacing and padding to match spec (#17537) (fa87e35), closes #16950 #14444
Bug Fixes
button: apply round property to button sizes in iOS (#18125) (ae0eccc), closes #18108
datetime: default to current date when value is null (#18105) (ca233b5), closes #18099
input: clear on edit from inside native input (#17115) (85093d6), closes #17055
item: use the global activated background for md ripple color (#16752) (95945c0), closes #16585
label: use primary color on focus for md input labels (#18183) (ddb8ef8), closes #15602
menu add prefixed transform for side menu animation (#18128) (2457a23), closes #17729
reorder-group: remove required parameter for the complete method (#18084) (bd96491), closes #16302
segment: decrease icon size on ios and stretch segment buttons to fill height (#17751) (0fa645b), closes #17069
textarea: reposition textarea when keyboard appears (#18098) (3cdab10), closes #17847
toast: allow button-color CSS variable to be overridden (#18133) (0c83fd3), closes #18127
Features
card: add button functionality (#17997) (669ec0d), closes #17773
img: add ionImgWillLoad event and emit ionImgDidLoad when image is loaded (#18159) (38ffb98), closes #17652 #18161
item-sliding: add open method (#17964) (f912206), closes #17899
menu-button: add css variables for padding (#18188) (ef98977), closes #18187
refresher: add pullFactor property to control speed (#16697) (9030dcc), closes #15425
searchbar: add disabled property (#17935) (a5b9066), closes #17921
textarea: add option to expand textarea as value changes (#16916) (cc8678a)
4.3.1 (2019-04-26)
Bug Fixes
angular: support replaceUrl with angular <7.2 (#18106) (eb3cbe4)
security: sanitize components using innerHTML (#18146) (b839e6f)
Bug Fixes
action-sheet: default buttons to empty array (9e63947)
angular: back button correctly goes back to proper tab (#18005) (52e5a8d), closes #17278 #15216
components: add mode classes to components for use in shadow elements (#17838) (e5c8c10), closes #17608
datetime: date strings no longer revert to previous day (#18018) (cc60b60), closes #17977
input: prevent input from losing focus when tapping clear button (#18004) (29bb4fc), closes #18002
item: use the correct input highlight for an inset line item (#18052) (72be80c), closes #18051
item-sliding: hide closed side options while dragging side options open (#17986) (f13722c), closes #17822
slides: allow zoom to work (18b347b), closes #17981
slides: expose interface to provide custom animations (#17959) (4474974), closes #16616
textarea: float label when a value is changed async (#18024) (494991e), closes #17555 #17559
textarea: update label alignment for inputs and textareas (#18042) (38ae362), closes #16187
vue: use direction type from core (#17901) (fa13173)
Features
toast: add header and additional custom toast buttons (#17147) (6e1a8f1), closes #16791 #16237 #17611
toast: add variables to change position start/end of toast (#17961) (07e739a), closes #17854
4.2.0 Helium (2019-04-03)
Bug Fixes
angular: properly check for replaceUrl in routing (#17879) (f2c8db9), closes #15181
angular: return proper types in the overlay.getTop method (#17802) (439b10e)
angular: support relative router links (d9a7c63), closes #17888 #16534 #16736 #16954
angular: update ng-add schematic (9443bfe)
css: resolve spinner and checkbox issues on older chrome versions (#17896) (dbb39cd), closes #17524 #17501
datetime: default to local date when no date given (#17706) (bab56e8)
datetime: recalculate day column when month or year is changed (#17815) (9273f97), closes #14233 #14732 #15452 #15794 #17633 #17060 #17510 #17521
item-option: add styling and behaviour for disabled item-option (#17909) (346ecb2), closes #17905
progress-bar: flip rtl using the existing reversed property (#17464) (fccaaf8), closes #17012
react: ensure tabs are resilient to optional tabs (#17862) (c29f5a6)
reorder-group: add ability to reorder items inside shadow (#17747) (352797e), closes #17746
select: update overlay options when added asynchronously (#17860) (1ecfcd1), closes #15716 #17851
virtual-scroll: use correct item top calculation with header or footer function (#15948) (#17345) (a8a48a4), closes #17298
vue: back button event handling (#17877) (dceec07)
vue: update popover to use correct controller (#17865) (0cb7db0)
Features
img: add ionError event (#17134) (04f931f), closes #16947
range: add ticks attribute (#17718) (016fa16), closes #17717
vue: support for ion-tabs (#17678) (ee71675)
vue: support ion-vue-router (#17821) (71e5994)
4.1.2 (2019-03-20)
Bug Fixes
chip: use transparent outline on color chips (#17719) (f6783db)
datetime: default to local date (#17706) (bab56e8)
input: use max-height for input for consistency across browsers (#17394) (67a9137)
item: add missing ripple color CSS property (#17814) (807820f), closes #17523
item-option: add styling for slots other than icon-only (#17711) (14f758c), closes #17737 #17402
platform: account for larger tablets (#17630) (29dbd07)
popover: update animation origin in RTL/MD (#17645) (617453b), closes #17012
spinner: fix default spinner logic for relevant components (#17660) (9c48fa7), closes #17659
toggle: do not use the contrast color for toggle inner color (#17798) (2225941), closes #17536
transition: animate all toolbars in iOS page transitions (#17224) (7d01207)
4.1.1 (2019-03-07)
Bug Fixes
display: update to correct css classes (cabbeb2)
Bug Fixes
angular: fix adding @ionic/angular when using ng add (#17597) (484d92c), closes #17596
animation: fix header flicker on ios (#17422) (ad20bd6)
css: add the missing css classes to flex and float utils (#17570) (c49276c), closes #17569
fab: disabled fab button no longer opens fab list (#17620) (c475dab)
img: remove space under img (#17582) (621c79b)
item: slotted ion-icon receives custom color (#17585) (14dd871)
item-sliding: no longer close all open items when deleting an item (#17579) (3de7795)
loading: add backdropDismiss to the interface (#17668) (28fd75e), closes #17369
popover: update placement per md spec (#17429) (a99d179)
range: clamp values that are out of bounds (#17623) (5a197ca)
refresher: check for cancelable before preventing default (#17351) (f205b10), closes #15256
reorder: allow sliding items to be reordered (#17568) (3b331b5)
ssr: fix angular global window and document references (f44c17e)
ssr: fix global window and document references (#17590) (4646f53)
vue: correct passing of props and data to components (#17188) (2ce4940)
Features
checkbox: implement indeterminate state (#16951) (c641ae1), closes #16943
css: add CSS display utilities (#17359) (6bea9d3), closes #10904
select: add compareWith property (#17358) (69ecebb)
skeleton-text: adds animated prop and support for CSS styling (#17612) (d66b12b), closes ionic-team/ionic-docs#407
4.0.2 (2019-02-20)
Bug Fixes
button: show proper shade for activated button on ios (#17508) (3a9b679), closes #17436
config: update types for scrollPadding, inputBlurring and hideCaretOnScroll to boolean (#17302) (39fbc32)
datetime: default to current date when no value given (#17443) (644f9f4)
item-sliding: Sliding no longer breaks after removing an item (#17492) (e27bb2e)
range: implement RTL (from PR 17157) (#17384) (4f203bc), closes #17012
searchbar: allow setting of toolbar color and searchbar color (#17474) (ba4e117)
select: Account for when options are not loaded immediately (#17405) (f9f1775)
tab-bar: add translucent tab-bar styles back (#17376) (374bd77)
4.0.1 (2019-02-06)
Bug Fixes
build: modify rollup.config.js to work with Windows (#17231) (d26d43d)
grid: add flex to ion-grid to allow it to properly render in an ion-item (#17258) (40c6955), closes #17075
menu: fix content shadow when revealed in iOS (#17383) (fc43faa)
platform: add additional check for safari PWA (a584f6e)
platform: add mobileweb platform back (cf2b2b3)
popover: apply fixed position to keep backdrop in viewport (#17352) (ee3b04a), closes #17337
popover: originate animation from right in RTL/MD (#17381) (bc3aa21)
range: chrome bug with will-change (74ce34f)
react: duplicate events being fired in ionic/react (#17321) (a415001)
reorder: capture click event (#17244) (986e67b), closes #17241
searchbar: hide search icon when focused with cancel button (#17260) (c87867c), closes #17252
Enjoy! 🎈
4.0.0-rc.3 (2019-01-22)
Bug Fixes
alert: update styles for rtl (#17129) (ceae5d2), closes #16295 #17012
angular: apply validation classes properly (2b4d7b7), closes #17171 #16052 #15572 #16452 #17063
angular: navigateRoot + animated (#17164) (a6559a4), closes #17144
angular: race condition when fast navigation (#17197) (a945b03), closes #17194 #16449 #15413
button: avoid using attribute selectors for disabled (#17198) (3defbf3)
content: tap-click deadlock (#17170) (5cb7f68), closes #17138 #16863 #16191 #16911
fab: remove layout contain from content (#17048) (0cf1894), closes #16780
gesture: destroy gesture handler when it's done (#17184) (59bd823), closes #16433 #16974
icon: update ionicons to flip for rtl (#17196) (d3b6e60), closes #17012
item: fix margins on slotted content (avatar, thumbnail) (#17065) (3612651), closes #16997
searchbar: keep search icon shown when searchbar has focus (#17154) (c917bb4)
select: pass click event to popover interface (#17146) (3ff9faf), closes #17142
textarea: new-line in firefox (#17176) (e7538f3), closes #17155
Features
angular: add global pop() (#17182) (766c79d), closes #16340
datetime: add readonly prop (#17139) (d513e8a)
input: add getInputElement() (#17183) (a90084c), closes #17174
react: complete controller integrations and navigation (#16849) (f46cd50)
slides: expose updateAutoHeight (#17208) (835aea9), closes #15079
BREAKING CHANGES
NavController.goBack() renamed to NavController.back()
4.0.0-rc.2 (2019-01-16)
Bug Fixes
action-sheet: remove the height shift on press and update iOS design (#16862) (82457d8), closes #16715 #16790
angular: fix slides (#17085) (8357e5c)
angular: hide some internal methods (#17121) (4d5dcd4)
angular: NavController methods return a promise (#17106) (3aaf87a), closes #17103
angular: ViewChild() fix (#17037) (27a4709), closes #17034
datetime: do no change order of formatted dates w/ rtl (#17024) (169da37)
fab-button: add default padding for fab-button (#17050) (418052f)
icon: fix rtl detail icon for ios (#17016) (b4f3405), closes #14958
input: disable shadow-dom for text inputs (#17043) (63e0501), closes #17020
input: fix display of ion-input in narrow ion-item in Firefox (#16978) (1099dc3)
inputs: fix styles in firefox (#17066) (0120eee)
inputs: keyboard focus improvements (#16838) (6364e4e), closes #16815 #16872 #13978 #16610
item: no lines on item should take precedence over list lines (#17049) (d2fa946), closes #16900
picker: do not change datetime/picker column order in RTL (#17018) (1338d71), closes #16294
rtl: fix rtl back button default (#17109) (a9a23af), closes #15357
utils: remove console log (#17116) (b0f51d4)
Features
angular: add tabs events (#17125) (6929bb8)
angular: expose getSelected() (#17079) (3c801db), closes #17068
Reverts
test: update avatar index.html (9e80b73)
BREAKING CHANGES
ionChange removed from ion-tabs
(ionChange) becomes (ionTabsDidChange)
ion-tabs getSelected() returns a string
Previously the getSelected() method of ion-tabs returned a reference to the selected
ion-tab, now it returns the name of tab as string.
4.0.0-rc.1 (2019-01-09)
Bug Fixes
angular: update @angular/router dependency (#16998) (76e9e02)
col: handle RTL offset-, pull-, and push-* (#16702) (6d6472b)
fab: fab size when href provided (b3316d4), closes #16833
menu: swipe-back has higher priority (f05c599), closes #16864
overlays: make them hidden until presented (#16903) (302be53), closes #16685
popover: position properly in RTL / MD modes (#16745) (7846019)
ripple-effect: never capture click (#16955) (7ee8aa6), closes #16939
segment: update indicator and border based on theme (#16821) (74587db), closes #16820
select: interfaceOptions can customize mode (#16826) (1227d57), closes #16825
tab-button: allow standalone tab-button (#16905) (6ca7645), closes #16845
tabs: fix goto root (#16926) (8ee9205), closes #16917
Features
radio-group: add missing implementation for property allowEmptySelection (#16880) (09726b0), closes #16841
react: add missing simple components to react. (#16836) (696f62c)
react: create initial portal implementation for overlay ctrls (#16830) (99bdd1f)
react: Initial implementations of controller required elements. (#16817) (e30c5f1)
Performance Improvements
angular: bundle size improvements for angular (#16966) (44fb45e)
angular: flat ng modules (#17007) (0b84e27), closes #17001
angular: proxy fast properties (#16888) (ca9ec3e)
BREAKING CHANGES
In order to speed up the build and reduce the main bundle size,
we have moved the ionicons outside the webpack build pipeline.
Instead, a new copy task needs to be added to the angular.json, specifically to the
the "assets" option of the "build".
angular.json
{
"projects": {
"app": {
"architect": {
"build": {
"options": {
"assets": [
{
"glob": "**/*",
"input": "src/assets",
"output": "assets"
},
+ {
+ "glob": "**/*.svg",
+ "input": "node_modules/ionicons/dist/ionicons/svg",
+ "output": "./svg"
+ }
4.0.0-rc.0 (2018-12-19)
Bug Fixes
action-sheet: set 100% height to fix scrollable options (#16789) (e3d7282)
all: ts 3.2 issues (f393a82)
angular: Fix cordova browser error when resumed (#16810) (e735d2c)
angular: fix sibling router-outlets (#16774) (35e3848), closes #16411
angular: router-outlet memory leak (2c41823), closes #16285
body: body background matches ion-content (0699884)
core: export ionic lifecycle names (77640c9), closes #16760
core: ts lint issue (#16814) (fb38002)
list: adjust label margin to align with spec for md (#16751) (60ef98d), closes #16643
modal: --box-shadow (e2ee0b6), closes #16798
progress-bar: looking nice inside toolbar (b5efede)
pwa: use 100% of the viewport (4c4bdf2)
tab-bar: adds selected color if tab bar is using a color (#16766) (54e5a24), closes #16761
virtual-scroll: fixes dynamic changes (d1cecf1)
Features
angular: expose animationDirection (#16802) (320eb03)
angular: tabs.select() (56dd8ae), closes #16753
Performance Improvements
angular: detach from change detection (f613b3b)
Bug Fixes
angular: tab-bar slot=top (#16727) (d4e4b52), closes #16722
datetime: picker inherits mode (#16731) (f93e4fd), closes #16717
fab-button: adding size prop instead of [mini] (#16692) (e8cec60), closes #16680
fab-button: get translucent working including with color (#16750) (c2ada84), closes #16450
Features
react: add initial react code. (#16748) (33e0ae4)
BREAKING CHANGES
Core Components
Removes the --width and --height variables from the following components, in favor of CSS:
Button
FAB Button
Checkbox
Removes the --width/--height and adds a --size variable that is set on the width and height, allowing width and height to still be set and border-radius to still use it as a variable
Radio
Removes the --width/--height and --inner-width/--inner-height variables. Calculates inner values based on parent element size.
Overlay Components
The following components have all been converted to shadow (or scoped) and have CSS variables for width/height:
Action Sheet (scoped)
Alert (scoped)
Loading (scoped)
Menu (shadow)
Modal (scoped)
Picker (scoped)
Popover (scoped)
Toast (shadow)
The above components will now have the following CSS variables for consistency among overlays:
Name
--height
--max-height
--max-width
--min-height
--min-width
--width
If the component does not set the value, it will default to auto.
Removed CSS Variables
The following CSS properties have been removed:
Component
Property
Reason
Button
--height
Use CSS instead
Button
--margin-bottom
Use CSS instead
Button
--margin-end
Use CSS instead
Button
--margin-start
Use CSS instead
Button
--margin-top
Use CSS instead
Button
--width
Use CSS instead
Checkbox
--height
Use CSS or --size
Checkbox
--width
Use CSS or --size
FAB Button
--width
Use CSS instead
FAB Button
--height
Use CSS instead
FAB Button
--margin-bottom
Use CSS instead
FAB Button
--margin-end
Use CSS instead
FAB Button
--margin-start
Use CSS instead
FAB Button
--margin-top
Use CSS instead
Menu
--width-small
Use a media query and --width
Radio
--width
Use CSS instead
Radio
--height
Use CSS instead
Radio
--inner-height
Calculated based on parent
Radio
--inner-width
Calculated based on parent
FAB Button mini
Renamed [mini] attribute to [size=small] in ion-fab-button.
-
+
Bug Fixes
all: type issues with TS 3.2 (aa9d0d4)
angular: disable change detection detach (68e2619)
angular: lint issue (a961dca)
angular: only routerLink works with angular router (63cbc92)
angular: remove rogue console debug message (#16530) (9a47fc4), closes #16529
angular: routerLink updates href (c8d9685)
angular: swipe to go backs in tabs (#16710) (2553820)
angular: swipeBackEnabled global config (#16668) (d69427e), closes #16624
angular: wait for core defined in angular initializer (#16693) (060794e)
button: reduce iOS border radius (#16575) (b1e56bb)
button: relax css containment to "content" (#16553) (802a3d1)
button/chip: move hover styles into media query (#16664) (a2c7b95), closes #16108
content: do not scroll on pan-x (#16721) (b6aea08)
img: fire didLoad in safari (#16571) (2ce986f), closes #16557
item-divider: use prop for sticky (#16691) (a6a1723)
loading: add backdropDismiss closes #16527 (#16570) (a251b50)
react: add class based APIs (#16665) (2933f61), closes #16583
refresher: close animation and hidden on pull down (#16700) (6b0fc49), closes #16254
segment: set colors in the parent segment and remove the unused color property (#16590) (8029df3), closes #14853
segment-button: make layout default to icon-top (#16573) (841375e)
select: selection-option is hidden in edge (#16607) (6776e65), closes #16580
select-option: using external style (8050247)
tab-bar: hide on keyboard events (#16688) (1473805), closes #16419
tab-bar: update tab-bar to set the color/background of tab-button (#16641) (2f63049), closes #14853
theming: update ios design for button and card (#16586) (9c8c650)
toolbar: style all slotted content in order not only buttons (#16617) (86fc9a5)
Features
all: vscode HTML autocompletion support (#16687) (9b83bef)
fab-button: add css border properties (#16656) (64557a7), closes #16652
modal: add css vars (#16605) (235c685)
progress-bar: add progress bar component (#16559) (9167fb4), closes #16558
range: add support for range bar border radius (#16519) (c036cb0)
theme: default colors based in step colors (95c0b1b)
toast: add CSS variables for box-shadow and border (#16679) (1a299b0)
BREAKING CHANGES
[ANGULAR] Tabs
Tabs got the last bit of changes needed in order to support lazy loading of components. To support this, some changes are required for the router config. Using the tabs starter as an example, here's a diff of the changes:
import { RouterModule, Routes } from '@angular/router';
import { TabsPage } from './tabs.page';
-import { Tab1Page } from '../tab1/tab1.page';
-import { Tab2Page } from '../tab2/tab2.page';
-import { Tab3Page } from '../tab3/tab3.page';
const routes: Routes = [
{
path: 'tabs',
component: TabsPage,
children: [
- {
- path: '',
- redirectTo: '/tabs/(tab1:tab1)',
- pathMatch: 'full',
- },
{
path: 'tab1',
- outlet: 'tab1',
- component: Tab1Page
+ children: [
+ {
+ path: '',
+ loadChildren: '../tab1/tab1.module#Tab1PageModule'
+ }
+ ]
},
{
path: 'tab2',
- outlet: 'tab2',
- component: Tab2Page
+ children: [
+ {
+ path: '',
+ loadChildren: '../tab2/tab2.module#Tab2PageModule'
+ }
+ ]
},
{
path: 'tab3',
- outlet: 'tab3',
- component: Tab3Page
+ children: [
+ {
+ path: '',
+ loadChildren: '../tab3/tab3.module#Tab3PageModule'
+ }
+ ]
+ },
+ {
+ path: '',
+ redirectTo: '/tabs/tab1',
+ pathMatch: 'full'
}
]
},
{
path: '',
- redirectTo: '/tabs/(tab1:tab1)',
+ redirectTo: '/tabs/tab1',
pathMatch: 'full'
}
];
And for the tabs markup, we have something close to pre-beta 16 tabs, but still provides a custom tab-bar.
-
-
-
-
-
-
-
-
-
-
-
-
+
Tab One
-
+
Tab Two
-
+
Tab Three
-
[ANGULAR] href does not cause Angular Router to navigate
For consistency sake, the href attribute of ion-button, ion-item and ion-anchor no longer
trigger navigation using the Angular’s Router,instead use angular’s [routerLink]:
-
+
This change will not affect SEO since ionic will still use href under the hood.
[ANGULAR] Prefixed Ion- components
For consistency with other frameworks and the rest of APIs and tooling, the exported
ionic components are prefixed with Ion.
- import { Input } from '@ionic/angular';
+ import { IonInput } from '@ionic/angular';
This change might also help to improve autocompletion, and prevent collisions with other libraries.
Bug Fixes
alert: accepts any value (#16476) (50b0c6f), closes #16170
angular: accept other url schemas (e8e7183)
angular: avoid forEach in classList (359bdcf)
angular: cleanup ion-invalid class (34cd1d1), closes #16353
angular: default value of BooleanValueAccessor should be false (#16420) (429e083)
angular: es6 classes break in ie11 (#16417) (ce1fcea), closes #15979
angular: fix controlValueAccessor for boolean (b645bfd), closes #16371
angular: fix tabs with useHash (#16392) (f831186), closes #16390
angular: no animate in browser nav (276c883)
angular: tune routerLink default behaviour (#16405) (72bc025)
item-sliding: use a white item background instead of transparent (#16507) (2d33c63), closes #16474
label: move default flex and margin to item (#16461) (723d17b), closes #15393
list: do not style last child items by default (#16456) (09d69b9), closes #15185
menu-controller: _getInstance() is internal (723296e)
mode: lazy load same component, two different modes (#16401) (4dd4ccc)
radio: removd hard coded inner-width and inner-height for iOS (5096503)
range: add slot margins (#16464) (69f63b3)
segment: height fits content (#16511) (aa61e81)
themes: update default toolbar and tab background to #fff (#16454) (12bcb41), closes #16384
toast: make longer toasts available with pre-wrap (#16361) (52cea5a), closes #16360
toolbar: match MD button spec (#16378) (7d7b995)
Features
support ng add (#15323) (75dd853)
ripple-effect: adds unbounded ripple-effect (#16399) (2884076)
ripple-effect: add option to disable ripple-effect (#16393) (838f40d), closes #16379
BREAKING CHANGES
Segment Button now requires the text to be wrapped in an ion-label element for improved styling.
Old usage:
Item One
New usage:
Item One
Simplifying Chip
Because of updates to the Material Design spec, ion-chip no longer requires a chip-specific version of ion-icon or ion-button. Chips themselves should be interactive and don't require a nested button.
Old usage:
New usage:
Bug Fixes
alert: use tint for md button active background (#16278) (0fec722)
all: update types to be required (#16218) (091625d)
angular: add swipe-to-go-back gesture (108691d)
angular: adds tabs stack (adae8d4)
angular: disable transition heuristics by default (d9172b7)
angular: es6 build (#16207) (a981116), closes #15979
angular: fix handler outside zone (b8dae5e), closes #16338
backdrop: update opacity to match MD spec (#16188) (3c9ed31)
checkbox: align vertically (#16331) (bd3ca42)
checkbox: match MD spec (#16186) (240171a)
gesture: release gesture when it's disabled (c9b4e66), closes #16335
input: remove clear icon in edge (59bee23)
input: remove red shadow for firefox (767d299), closes #16318
input: scroll assist works in with shadow-dom (#16206) (d817cc3), closes #15888 #15294 #15895
inputs: fix aria with shadow-dom (#16329) (fd79b57)
inputs: inherit in edge causes problems (0abf992)
item: update to match Material Design spec (#16182) (e416c23), closes #14799
label: placeholder + floating label (#16111) (a8be529)
list-header: match MD bottom margin, match MD text color (#16274) (6794447)
menu: update box-shadow for MD to match spec (#16183) (335acf9)
range: increase MD horizontal padding (#16312) (5d00501)
range: use fully opaque base in color active bar (#16224) (0757126)
ripple-effect: follow MD spec (#16330) (6d59446)
searchbar: align cancel button to center with search icon position (#16259) (5957867)
segment-button: make layout optional (e9e33ad)
tab-button: layout is mutable (#16332) (02a266c)
tabs: works with no href (8e0f1ba)
toast: update toast design to match MD spec (#16323) (188a635), closes #16271
toggle: match MD toggle track background for off state (#16277) (8e2a6dd)
Features
segment: adds global variable for targeting segment in toolbar (#16344) (10971cc)
segment: adds scrollable and layout props and updates to follow the spec (#16273) (256745c), closes #16232 #16081 #14853
Performance Improvements
angular: remove duplicated code in value-accessor (bfbbeca)
Dependencies
If you are using @ionic/angular, please update the version number of any @angular packages in your package.json file to 7.0.3.
"dependencies": {
"@angular/common": "~7.0.3",
"@angular/core": "~7.0.3",
"@angular/forms": "~7.0.3",
"@angular/http": "~7.0.3",
"@angular/platform-browser": "~7.0.3",
"@angular/platform-browser-dynamic": "~7.0.3",
"@angular/router": "~7.0.3",
"rxjs": "6.3.3",
"devDependencies": {
"@angular-devkit/architect": "~0.10.5",
"@angular-devkit/build-angular": "~0.10.5",
"@angular-devkit/core": "~7.0.5",
"@angular-devkit/schematics": "~7.0.5",
"@angular/cli": "~7.0.3",
"@angular/compiler": "~7.0.3",
"@angular/compiler-cli": "~7.0.3",
"@angular/language-service": "~7.0.3",
Breaking Changes
Removed Global CSS Variables
The following global CSS variables have been removed for the reasons listed.
Variable Name
Reason
--ion-toolbar-color-inactive
Unused
--ion-ripple-background-color
Unused / Ripple color is based on component
--ion-header-size
Removed in favor of using CSS for h1-h6
--ion-header-step
Removed in favor of using CSS for h1-h6
Renamed Global CSS Variables
The following global CSS variables have been renamed for the reasons listed.
Old Variable Name
New Variable Name
Reason
--ion-toolbar-text-color
--ion-toolbar-color
Variable is not limited to text color
--ion-toolbar-color-active
--ion-toolbar-color-activated
Consistency with our component variables
--ion-tabbar-text-color
--ion-tab-bar-color
Variable is not limited to text color
--ion-tabbar-text-color-active
--ion-tab-bar-color-activated
Consistency with our component variables
--ion-tabbar-background-color
--ion-tab-bar-background
Applies to the background property
--ion-tabbar-background-color-focused
--ion-tab-bar-background-focused
Applies to the background property
--ion-item-background-color
--ion-item-background
Applies to the background property
--ion-item-background-color-active
--ion-item-background-activated
Applies to the background property / Consistency with our component variables
--ion-item-text-color
--ion-item-color
Variable is not limited to text color
--ion-placeholder-text-color
--ion-placeholder-color
Consistency with other variables
Rethinking Tabs
One of the most valuable and complex components in Ionic's toolkit is Tabs. Tabs started off as a simple component that would create a tabbed interface to allow users to switch between different views in a way that was consistent with native UX paradigms.
Over time, we started hearing people ask for more features to be added: "Can we have one tab button that is just a button?" "Can I customize how the tab buttons are displayed?" "Can I use a custom icon in the tab?"
Traditionally, these features, and many others, were difficult to accomplish because Tabs was doing a lot of magic behind the scenes to generate the Tab bar and buttons. With this in mind, we thought it was time for a refresh to offer as much flexibility as possible within Tabs.
In order to do this, we had to change how Tabs were written in an app. Prior to Beta 14, Tabs would look like this:
Here, we have an ion-tab element that accepts an icon, a label, and a link to navigate to as properties. This is pretty much how Tabs have worked all the way back to Ionic 1. In Beta 14, we've removed some of the magic from Tabs which allows for more customization:
Schedule
Photo
Home
There's a lot going on here, so let's break it down:
A single parent ion-tabs wraps the entire layout. Same as before.
A new element, ion-tab-bar, creates the Tab Bar which will contain buttons.
A new element, ion-tab-button, is used to create each button in the Tab Bar. These could be static links to different routes, buttons with click handlers on them, or link to whole tab views.
The ion-tab component becomes a separate container that has inline content (ion-content), a navigation component (ion-nav) or a router outlet (ion-router-outlet).
To connect the ion-tab-button to the ion-tab, the tab property must be added to both of these components. For example:
Since the tab property is the same on the ion-tab-button and ion-tab, when the Tab Button is tapped, the home-view Tab will become active. This takes the magic out of Tabs while making the behavior between the tab buttons and the views much more explicit.
Some other benefits of this refactor include:
Can now be written as a standalone Tab Bar (with no attached Tab)
Works with a navigation component or a plain content element
Works with shadow DOM and allows easy customization of the Tab Bar
Gives full control over the elements inside of the Tab Bar
Integrates nicely with other frameworks that have different ways of rendering element nodes
Lastly, this change also fixes some outstanding issues with Tabs, so we're excited to get this out to you all!
Bug Fixes
action-sheet: update Action Sheet design to match MD spec (#16135) (068303d)
alert: match MD spec (#16145) (287aec8)
alert: update alert min/max interface (#15987) (a0c60ff), closes #15986
angular: generate proxies for ion-tabbar (#15954) (45b46b4)
angular: make sure angular form control onChange is fired when needed (#16126) (d5f2e6f)
badge: match MD padding (#16134) (615c518)
button: match MD spec timing, outline, hover (#16160) (0faa355)
button: match updated MD specs (#16144) (e9579d5)
card: adjust styles to match MD (#16093) (44b0eab)
checkbox: end position by default (9da51b3)
cordova: fix resume event in cordova browser (#15945) (4318520), closes #15944
datetime: can participate in native (#16106) (aad7711), closes #16075
datetime: pickerOptions are all optional (#16101) (f014181), closes #16095
fab-button: use correct background in list and update the md icon color (#16092) (9dfc863), closes #16091
header: update box shadow to match MD spec (#16149) (00544e9)
infinite-scroll: disabled resets loading/busy state (#16107) (33448c6), closes #15994
inputs: add z-index for all inputs (92ee4ef), closes #16157
inputs: disabled handling (#16071) (ef6895a)
label: do not animate float labels on initial load (#16036) (e644fc9)
note: update note font size for MD (#16088) (6f2b9b0)
picker: delay option animate until after options initialized (#16037) (a74e565)
picker: fix iOS picker options that shouldn't be showing (#16055) (02ef52b)
popover: update border radius to match MD (#16086) (9c733e9)
popover: update the box shadow to match MD spec (#16089) (fdb7da9)
radio: match MD sizing (#16087) (6723248)
range: match MD spec (#16150) (b2f493f)
reorder-group: event bubbles up (#16030) (ce80b24), closes #16010
screenshot: update screenshot ci (#15969) (80b5c8c)
searchbar: do not animate during initial load (#16147) (e94b522)
tab-bar: align tab text to the center (#16130) (67eb7cf), closes #15273
tabs: name prop is not longer used (6d11cc1)
theming: update global css variable naming and default values (#16003) (b2021fd), closes #15989 #15559
toggle: fix box-shadow overflow in toggle (#15955) (8a4dc74), closes #14626
angular: fix ngModel accessor (fab8b60)
color: edge currentColor bug (#16177) (fce30eb), closes #16168
searchbar: fix crash on cancel event (#16181) (9c79d98), closes #16143
tab-bar: safe-bottom area is applied correctly (#16179) (1532bd2), closes #16175
tabs: use slot instead of placement (72f0a76)
Features
toast: add "color" prop (#16100) (c982856), closes #16099
Performance Improvements
angular: disable async queue (#16118) (c2f5803)
Bug Fixes
all: avoid using focus() since it conflicts with HTMLElement (5560dcd), closes #15810
all: disable animations in e2e tests (9d109d6)
all: docs for all missing props (a72fced)
angular: add "main" to package.json as workaround for webstorm (c57a7cc)
angular: backButton event uses ionBackButton (0337c7f)
angular: only bypass zone in high-rate events (f63c0f5), closes #15765
button: use class instead of reflect (e189cc6), closes #15623
card: include card-header in current color (b5e39c8)
card: update currentColor to use contrast color (a9a29f7)
card-header: get color property working (92514b3), closes #14723 #14853
col: fix CSS is undefined error on IE11 (#15882) (06a3028)
content: iOS should not have scroll in desktop (8cb1886), closes #15858
css: avoid cleancss bug (f87d4bf), closes #15807
css: remove selection color (6b0d812)
docs: Fix commit link on CONTRIBUTING.md (#15834) (fe0c3b4)
fab-button: add and document css properties (098bd82), closes #14808
fab-button: ripple-effect in safari (844c33a), closes #15768
hide/show: fix show-when/hide-when (fd01308), closes #15813
infinite-scroll: implements position="top" (b4a73ad), closes #15481
input: add and document custom properties (23df042), closes #14850
input: tabindex or tab in ion-input do not work with clearInput fix (e916500)
ion-datetime: keep the model value consistently an ISO string (#15907) (b46052b)
item: add input highlight using an absolute div (#15856) (f885f7d), closes #14036 #9639 #14952 #15690
item: detail context based in text color (e51f1f3)
label: add color variable, examples to test and document (b485eba), closes #14853 #14850
list: don't show inset lines for full line list (6eae95a)
menu: menu registers itself before it's ready (08beee3)
menu: overlays can block menu closing (11aa241), closes #15880
menu: wait until all menus are ready (a5c2cc1), closes #15727
menu-button: color (386cf82), closes #15546 #15545
menu-button: Not visible if toolbar has primary color (#15847) (e2ea08b)
modal/popover: lifecycle events (19c449e), closes #15806
picker: stop animation when it's closed (e81af2d), closes #15854
popover: showBackdrop hides backdrop (f00be0d), closes #15878
reorder-group: delegate dom reordering (5f65942), closes #15836
slides: disable autoplay by default (db6ddb0), closes #15766
tabbar: css variables assigned to the host (545db2e)
tabs: badgeColor works again (3d98587), closes #15559 #14840
tabs: fix async deadlock (905c7db)
title: allow color to be set for title without attribute (a9b3064), closes #14853 #14850
toggle: improve animation motion (5330574)
Features
angular: observer based api to override hardware back button (6a5aec8), closes #15820
menu: add new lifeycle events (64b52b5)
nav: animation is customizable (24f3373), closes #15851
overlays: expose animation customization (dc976cc)
initial vue support (73cff0c)
Performance Improvements
prevent unnecesary event listener changes (a999c1f)
Bug Fixes
action-sheet: allow async button handler returned value (3d3e6a4)
alert: check if value is null instead of truthy (799f0d7), closes #15420
all: gesture controller can block scrolling (633360f), closes #15725
all: lint errors (f8eafa7)
all: safe margins for fab, item-header, tabbar (62eff0a)
angular: add event listener on window (#15628) (7bd33a7)
angular: import icons using webpack apis (b71b36c)
angular: ionic/core is only a dep (236d8a4)
angular: value is updates based in ionChange (e18f8bf), closes #15722
app: statusTap and hardwareGB can be activated with config (c048f9f), closes #15617
back-button: add and document custom properties (b3aebb8), closes #14808 #14850 #14853
back-button: default md color is inhered (d0867b5)
button: default button width to auto to avoid inheriting (bac49ca), closes #15522
button: disable :hover on non supported devices (#15705) (67eb661)
button: disable pointer events in toolbar buttons (d145cae), closes #15623
buttons: fix activated, position, animation (9d6169a)
color: do not accept empty color (ede5525), closes #15732
content: apply background to the inner scroll element (f68c457), closes #15635
content: nested content (5f5ba66), closes #15680
datetime: check for null instead of undefined (407b147), closes #15605
datetime: convert to shadow and fix broken styles (fa77017), closes #15547 #14850
fab: do not reset fab activated if it's false (d619d8d)
gestures: change itemSliding gesture priority (48927e6), closes #15608
input: fix text type for select change event (694b6a8)
item: add the multiple inputs class to fix select/datetime in item (1cd792e), closes #15401
item-divider: add and document custom properties (06cb138), closes #14850 #14808
item-option: add and document custom properties (2a040e0), closes #14850 #14808 #14943
menu: crash when menu if forcedClosed (22e15b4)
menu: opening a menu autocloses any opened ones (8796f9f)
menu-controller: expose registerAnimation (29d00da), closes #15701
overlay: register backbutton handler only when needed (#15615) (b2b5d93), closes #15601
platform: using desktop instead of window (c8de84d)
add safe area cutouts (#15750) (a3c85ae)
radio: add css variables to make it customizable (9ec8e74), closes #15729
select: add position styles to work as standalone (224b4f8)
select: placeholder can be reset if value = null (602f668)
select: show placeholder when multiple is empty (29862e8)
select-popover: add scoped to apply proper styles to list (fd1b636)
slides: add back zoom plugin for swiper (6890ecc), closes #15676
slides: fix mutable options (681981f)
tap-click: prevent activated while scrolling (7f38d37), closes #15752
toast: button color is contrast (f65ec10), closes #15737
Features
animation: ability to disable animations w/ querystring (734b222)
app: adds _forceStatusbarPadding for ionic lab (0379977)
ripple: ability to disable ripple effect w/ querystring (efca0ae)
screenshot: update to use stencil e2e screenshot testing (43b9045)
Reverts
content: block scrolling in ion-content (9badb08)
Bug Fixes
slides: swiper must be a vendor (3435473)
Bug Fixes
animation: always call onFinish() (c23c5a4)
button: vanilla color is usable (b8b9b83)
segment: unselected color (b9e42eb)
slides: swiper is not required as dependency (29f324b)
4.0.0-beta.9 (2018-09-14)
Bug Fixes
anchor: make it activatable (6c62e6c)
angular: only append the component when the parent element is not the container element (6d6f70c), closes #14737
back-button: subscribe to body (37c9be7)
button: add custom properties and remove --ion-color overrides (#15463) (3af4361), closes #14808 #14853 #14850
core: matchBreakpoint will return true if breakPoint is empty string (#15498) (b362b0a), closes #15495
esm: reorganiza exports (bb19243)
fab-button: add routerDirection (2398634), closes #15551
input: value might be null/undefined (83543b7)
item: update hostContext to use ion-item element (21d1f2e)
item-option: add activated and ripple to button (78e2a0a), closes #14943
item-option: enable ripple-effect (428a5da)
item-sliding: make sure options are ready (7f59f91)
list-header: add and document custom properties (5ccc1fd), closes #14850 #14853 #14808
menu: ios styles (281f9a3)
nav: matches() function (9420b88)
overlay: animation can be interrupted (ca58664), closes #15506
overlay: only register backButton listener once (75c2d74)
popover: content sizing, scoped css (51d4e08), closes #15237 #15589 #15331
popover: remove unneeded code (b26c017)
radio: add and document custom properties (0f9a7b4), closes #14850
range: update range ratio when new min/max are passed (#15512) (f62601f), closes #15511
searchbar: add and document custom properties (7f57e02), closes #14850
searchbar: inherit color from color toolbar (3042f57)
searchbar: ionCancel event (20a7599), closes #15476
segment: fix css var + host-context() (49ab065)
slides: correct order of parameters (6442dfc), closes #15407
slides: Methods wait for execution until swiper is initialized (#15576) (ea01900)
slides: Update swiperOptions default to match version 4 of Swiper (#15578) (db35af2)
slides: Updated lockSwipes methods to match the new swiper.js API (#15469) (efb99cb)
sliding-item: swipe event (127da1a)
test: treeshake check runs last (b56f136)
test: workaround for nav tests (a4b1179)
toast: adds role timeout and cancel (2f2a255), closes #15477
toast: render on top (ac42180)
toggle: empty hidden input value when not checked (1f19862)
handle failure in hardware back button (6da765b)
remove argument-less catch() (ff919de)
Features
angular: integrate back-button with ng router (1bcca01)
app: hardware back button support (dfac9dc)
overlays: close overlay with back-button (4ccbefa)
router: add support for relative paths (b28aeab), closes #15499
virtual-scroller: add support (d40d0a7)
Performance Improvements
router: prevent initializaing page twice (3dd9604)
slides: tree-shake dependency (9d3a259)
4.0.0-beta.8 (2018-09-06)
Bug Fixes
button: add custom properties and remove --ion-color overrides (#15463) (3af4361), closes #14808 #14853 #14850
menu: ios styles (281f9a3)
radio: add and document custom properties (0f9a7b4), closes #14850
searchbar: inherit color from color toolbar (3042f57)
slides: correct order of parameters (6442dfc), closes #15407
test: treeshake check runs last (b56f136)
test: workaround for nav tests (a4b1179)
toggle: empty hidden input value when not checked (1f19862)
Features
angular: integrate back-button with ng router (1bcca01)
app: hardware back button support (dfac9dc)
overlays: close overlay with back-button (4ccbefa)
virtual-scroller: add support (d40d0a7)
4.0.0-beta.7 (2018-08-30)
Bug Fixes
list: add closeSlidingItems() (81fbbb8), closes #15378
menu: await animation check (f00db59), closes #15377
range: add and document custom properties (cf35445), closes #14850 #14808
slides: isEnd() returns a boolean (771c517), closes #15376
4.0.0-beta.6 (2018-08-29)
Breaking Changes
All methods of all ionic components return a promise.
colors.css has been renamed to core.css, the global stylesheet needs to be updated:
Stencil
+ @import "~@ionic/core/css/core.css";
@import "~@ionic/core/css/normalize.css";
@import "~@ionic/core/css/structure.css";
@import "~@ionic/core/css/typography.css";
- @import "~@ionic/core/css/colors.css";
@import "~@ionic/core/css/padding.css";
@import "~@ionic/core/css/float-elements.css";
@import "~@ionic/core/css/text-alignment.css";
@import "~@ionic/core/css/text-transformation.css";
@import "~@ionic/core/css/flex-utils.css";
Angular
+ @import "~@ionic/angular/css/core.css";
@import "~@ionic/angular/css/normalize.css";
@import "~@ionic/angular/css/structure.css";
@import "~@ionic/angular/css/typography.css";
- @import "~@ionic/angular/css/colors.css";
@import "~@ionic/angular/css/padding.css";
@import "~@ionic/angular/css/float-elements.css";
@import "~@ionic/angular/css/text-alignment.css";
@import "~@ionic/angular/css/text-transformation.css";
@import "~@ionic/angular/css/flex-utils.css";
Bug Fixes
alert: header is not mandatory (1f71f76)
alert: name is non-null (2268346)
alert: type and name props are optional (#14815) (99a2925)
angular: NavController signatures (6fdeb31), closes #15353
angular: overlay not found (8dfc52f), closes #15349
angular: platform does not crash (82f9fd4), closes #15348
angular: virtual-scroll (f9bf5c0), closes #15355
css: add core.css (#15220) (096d9a7), closes #15170
datetime: fix year to allow current and max year (f30ae88), closes #14895
grid: working check for CSS custom variables in Safari (#15228) (baefda3)
ion-reorder-group: adds ionItemReorder event (7fc170c), closes #14640
overlay: overlay is not hidden (89ba55d)
overlay: overlays are hidden until presented (ba428cd), closes #15345
overlays: expose mode, id, keyboardClose (cc960c3), closes #15366
radio-group: accept any value (16452b2), closes #15334
segment: set --color-checked in md color toolbar (5d32115), closes #14850
toast: add position middle (25479e4)
4.0.0-beta.5 (2018-08-27)
Bug Fixes
Ionic/angular compiler error
Breaking Changes
NavController
Changes are required to accommodate some new useful routing APIs and match the ng router ones closely:
goForward() -> navigateForward()
goBack() -> navigateBack()
goRoot() -> navigateRoot()
Dependencies
The following dependencies need to be updated to resolve build errors
Update Angular to 6.1 or higher
Update Typescript to 2.9.2
"typescript": "~2.9.2"
4.0.0-beta.4 (2018-08-27)
Bug Fixes
alert: remove unneeded warning (8447f28)
all: add customization of font-style (c957ea6)
angular: back navigation and back-button play better (#15293) (9ddfb1b), closes #15290
angular: expose router.navigate() (7aa4f13), closes #15332
app: --ion-safe-area-right typo (77ca2bd)
app: listen statusTap event (dc82675)
app: statusbarPadding config is a boolean (b387de4)
build: do not export in component modules (da2dc7b)
buttons: margin between buttons (359c47f)
card: remove calculated width to work with dynamic margin (059d365), closes #15223
chip: add and document custom properties (07e99a1), closes #14850 #14853 #14808
config: scrollAssist boolean definition (#15203) (2af72fa)
config: using sessionStorage is not safe (091b433)
content: document and add custom properties (0372aec), closes #14850 #14808 #14853
content: fix scroll events (962578e), closes #15244
content: scrollToPoint reliability (e0f1259), closes #15257
datetime: allow values to be zero (#14480) (e0b8e24)
docs: add missed menu title in the list (#15300) (5f3c7cd)
docs: use shape property to get round buttons (#15321) (d4c812f)
docs: use shape property to get round buttons (#15322) (5c6fe45)
hide-when: mode is a reserved property (c446d1b)
img: add object-fit to the host to avoid skewing the inner img (2e94227)
infinite-scroll: remove unused method (926758e)
input: clearInput works in device (ac96705), closes #15319
menu: do not override --ion-color-base (a890828)
modal: make sure content is ready (2c8bc04), closes #14969
nav: remove nav-decor once transition finished (b8a87fb), closes #15121
note: do not overide --ion-color-base (5f90dbf)
overlay: expose "animated" API (8b768fb), closes #14775
overlays: dismiss last overlay (c1c5102)
overlays: esc button works closed top overlays (c567a82), closes #14662
picker: tune scrolling speed (bd75bf4)
platform: better detect platforms + css API (3ffa3cd), closes #15165 #15116
popover: make sure content is ready (8bf60e7)
popover: they should not below other overlays (d83e7f8), closes #14662
refresher: tune threshold (d129f62), closes #15233
ripple-effect: add and document custom properties (37a149c), closes #14850
segment: add and document custom properties (08c6c97), closes #14850 #14808 #14854
select: add and document custom properties (88613ff), closes #14850
select: random type in generated.d.ts (11edc49)
select: support any kind of value (151c58e), closes #15200
skeleton-text: add and document custom properties (b213500), closes #14850
slides: document custom properties (ecf1eb8), closes #14850
split-pane: add and document custom properties (9104850), closes #14850
textarea: remove autocomplete prop (5989f15)
title: mode is inherited (94ea0a6), closes #15187
toggle: cursor: pointer in desktop (86acb8c)
toolbar: add position relative to host for toolbar background (ac2db9f), closes #15193
transition: cleanup transition (70a38ac), closes #15317
virtual-scroll: update VS when items change (3adfb98)
Features
all: strong typed ComponentProps (57d2375)
inputs: add focus() method (c66a34a), closes #15266 #15268
platform: add capacitor (7356ba5)
Performance Improvements
overlay: prevent layout thrashing (ed5c8eb)
ripple-effect: using requestIdleCallback (ea1c3d4)
4.0.0-beta.3 (2018-08-16)
Bug Fixes
all: improve text customization (6e3e07b)
all: safe-area using css variables (aa23d08)
all: user-select for desktop (2d70ee4)
anchor: add custom properties and make sure color works properly (8fef263), closes #14850
angular: add ion-backdrop (89e8256), closes #14971
angular: save internal data (f84bb76), closes #14888 #14885 #15054 #15050
avatar: document and add custom properties (6738ab7), closes #14850
badge: add custom properties and make sure color works properly (9beca98), closes #14850
card: add custom CSS properties and remove css overrides on item (5ed2201), closes #14850 #14808 #9198 #12646
card-subtitle: add and document custom CSS properties (7050039), closes #14850 #14808
card-title: add and document custom CSS properties (1ad9818), closes #14850 #14808
checkbox: document and add custom CSS properties (3e3cc6c), closes #14850 #14808
config: add persistance mode (db0049f), closes #15102
config: persistConfig (1e1964d)
content: overflow-behavior: contain (6173479)
content: scrolling Y (01323ac)
content: scrollToTop (695abcf)
css: --ion-item-background > --ion-item-background-color (#15101) (e3010e1)
datetime: add open() method (f032769), closes #14923
docs: replace ion-navbar with ion-toolbar (#15126) (0219309)
fab-button: sets pointer-events none when disabled (04d33e5), closes #15129 #15120
input: event interfaces (2e7d355)
menu: dismiss when clicking outside (288eeb5), closes #15096
picker: allow 0 as the selectedIndex (d19061c), closes #14563
range: adds css var (3ab835c), closes #15064
router: transition race condition (50ad1e7), closes #14873 #15090
segment: center align text (154b70e)
segment-button: add and document custom properties (85ffe01), closes #14850
select: apply proper styles for stacked/floating selects (42ca99d), closes #15140 #14850
spinner: add and document custom properties (da6df2a), closes #14850
split-pane: disabled prop is dynamic (149039b), closes #14959
tabbar: fix highlight bar (39104cb)
tabs: get the tabbar layout working with shadow DOM (#15113) (575c5eb), closes #14611
tap-click: nested buttons get activated first (03da98e)
tap-click: works inside shadow-dom (0dc70f7), closes #15128
textarea: add and document custom properties (5dfcd47)
textarea: add ion color classes (5627811)
thumbnail: add and document custom properties (c88e1ad), closes #14850
toast: add and document custom properties (5f6f6a1), closes #14850
toast: statusbarPadding (3da1bf4)
toggle: add and document custom properties (773c2c2), closes #14850
toolbar: add and document custom properties (dd114ff)
virtual-scroll: fix viewportOffset calculation (b7e741a), closes #14963
virtual-scroll: use FunctionalComponent for JSX integration (b53ce4b)
Features
config: strongly typed config (0169045), closes #15097
select: add open method (4047812), closes #14881
4.0.0-beta.2 (2018-08-08)
Bug Fixes
all: buttons are type="button" (2b7007f)
app: fix statusbarPadding (2c925b7), closes #15073
chip: conforms to ion-icon (f49fa4a), closes #15053
content: remove scroll-inner (efd77c9), closes #14985
datetime: fix gesture (e9fd184)
datetime: ionChange event (8b35e37)
header: safe margin when statubarPadding=0 (b69d01d)
input: hide clear button (141b86c), closes #15002
menu: add width and small-width css variables (#14997) (69f5cc8)
menu: content's box-shadow (48e2a4e)
nav: animation backdrop (948d083)
popover: ion-scroll sizing (b85d4a0), closes #14911
range: value changes when using keyboard (27fdc9a), closes #15065
searchbar: color (14d6270), closes #14998
sliding: fix core gesture logic + priority configuration (a77ee2a), closes #14763
split-pane: side=end works properly (dc50003), closes #15013
tab: edge prop (2a4327f), closes #15003
tap-click: desktop also needs tap-click (9f4d873)
Features
core: add check for standalone mode (#15001) (0b4b9fe)
item-sliding: adds disabled prop (9773e2a), closes #14831
Performance Improvements
app: move app css to global css (a71f382)
menu: flickering (8253b04)
scroll: filter velocity using exponential moving window (419ef7b)
4.0.0-beta.1 (2018-08-01)
Bug Fixes
accesibility: boolean aria-* properties (4f9cbfe)
all: strong type text fields (1d001a3)
all: updated tslint rules to latest (92e21a8)
angular: events (7a0545d), closes #14866
angular: ion-router-outlet exposes animated (266336e), closes #14913
angular: pass proper animated value (7813acc)
app: statusbarPadding (fd8f875)
app: user-select on desktop (8a1ad1d)
button: do not change border radius if round button in toolbar (#14941) (ad006dd), closes #7661
button: improve text style inherency (25423a0), closes #14927
button: submit forms using fake button (c05d672), closes #14890 #14786
color: make desktop selection beautiful (0cdb500)
config: avoid using startWith for IE support (73a9f14), closes #14922
content: bottom padding (be4eda5)
fab: add styles for disabled (520da8d), closes #14867
flex-utils: add missing flex attributes (7c12e1b)
input: add color support for ion-input (f676f98), closes #14864
inputs: better customization for placeholder color (517104f)
item: only use pointer cursor for and (f19553f)
pointer-events: listening to document (afb0906)
refresher: default to disabled false, add to breaking changes (f1826a6), closes #14879
router-outlet: fix stack attribute detection (#14921) (16e992a)
searchbar: fix input bluring (d65174b), closes #14916
slides: update events to match swipers (fc0d4c0), closes #14865
title: can be used nested (d1969bd), closes #14905
title: support color (7da0ac4)
Features
menu: configurable using menuType (a62759c), closes #14901
Performance Improvements
app: tap-click is a ES (b0ac5ba)
css: always emit compressed css (143f0f0)
gesture: lazy loaded dynamic ES module (49cac8b)
icon: disable icon lazy loading when it's not needed (7292fc7)
4.0.0-beta.0 (2018-07-25)
Enjoy! 🎉
Bug Fixes
angular: always dispatch lifecycle events (5677daa)
Bug Fixes
angular: hide pages properly (a44b844)
angular: make pages invisible before they are rendered (a589816)
transition: make sure hidden is removed (f52dece)
Bug Fixes
css: revert hidden css (7d3d98d)
tab: prevent infinite loop (05b258c)
toolbar: remove transparent border on translucent toolbar (55cb354)
Bug Fixes
all: accesibility and global styles for hidden nodes (4b844ef)
checkbox: get css variable customization working better (3e7aa4b)
content: set height to make it accessible for children elements (#14772) (857b42d)
grid: set the flex and width to auto when size is auto (ba30671), closes #14807
inputs: inputs work inside (8324bd1)
label: style color (5c0e9e6)
list: hide the last item border when there are no lines (#14770) (26f7379), closes #14769
margin: adds css variables (f6c8f3f), closes #14798 #14826
menu-button: fix sass linting (d22f04b)
menu-button: get proper styles when used inside ion-buttons (811eee7)
modal: use flex to position modal to make it easier to size (9488a98), closes #14392
overlay: remove global css vars in overlays for local ones (38b1e47)
refresher: find parent ion-content properly (4eab209), closes #14833
slides: swiper container should take up 100% height (1d201ec), closes #14771
spinner: color can be customized in non-shadow-dom (65008e7)
spinner: get paused attribute working and update tests (3ab1e2d), closes #14811
Features
button: overflow is configurable (ddb1e49), closes #14839
menu: add getWidth() (cb4acab), closes #14794
Bug Fixes
anchor: add proper styling, support for colors, and basic test (1dbf5bb), closes #14777
anchor: inner inherits text styles (9aedfc6)
button: add box-sizing so anchor buttons won't exceed max-width (9c9f081), closes #14760
button: set display type on host (89d1526)
button: submit form w/ ion-button within shadow dom (4ed8541), closes #14776
item: add cursor pointer back to native item (43f1fec), closes #14743
searchbar: use tag in toolbar context selector (124b87c)
segment: add styles for in a color toolbar (d9e4ca7)
spinner: style CSS props (2798bb0)
tab: props are reactive (00c4c77)
tab-button: add a class to hide the tab when show is false (eb9ed17)
tabs: add the colors to the tabbar as well (5348e7c), closes #14758
tabs: fix the tabs so the color property works on tab button (8aed3bf), closes #14758
virtual-scroll: read viewport size for every scroll event (1d3eb3f)
Bug Fixes
angular: publish css to npm (748c209)
item: pass the correct type property to the button tag (5f8b02e), closes #14740
tabs: correct alignment for label/icon only tabs (b46c3e2)
tabs: update the tabbar placement value to match the property it applies to (45583bc)
toolbar: get translucency working with header, footer and toolbar (f6ab5b6)
Bug Fixes
angular: esm (0e68f17)
Bug Fixes
angular: avoid TS 2.8 features (c736bac)
angular: correct subscription to cordova ready event (#14577) (5967352)
bundling: fix EventEmitter import (8e47101)
linting (e629e29)
icon: target element for style and add to breaking (949d93e)
overlay: make type an any (15dc651)
router: fix reuse strategy (bd53bba)
scripts: update github release notes (fc078af)
tabs: align tab title and icons to flex-start (c11d74b), closes #14606
Features
all: custom icons (e6638e7)
dir: default to ltr css, rtl overrides w/ [dir=rtl] selectors (fb4353c)
slides: update swiper to latest (8e164d6)
Bug Fixes
all: strong typing for color (618f708)
angular: platform logic belongs to core (af5db2f)
angular: build script (a88e1e8)
angular: params are assigned to props (7fa6e43)
angular: populated the platforms array (#14466) (d177087)
angular: Required<> is not available (8aa6965)
angular: routerLink integration (ed8ff4f)
content: scrol-inner takes all height (3da0c98)
nav: Remove console.log (#14467) (d93b1d5)
refresher: adds threshold (34ae904)
router: accepts root direction (ae9d0c7)
router: fix push() public interface (875b9d0)
Features
img: adds lazy load image (b06c65f)
Bug Fixes
angular: aot (714f4a6)
Bug Fixes
alert: onDidDismiss() is called (7b33039)
all: snapshot tests (cc7ab4e)
angular: exports (50021cd)
angular: routerLink uses (526c9a8)
angular: setup config provider correctly (82fbe31)
angular: unexport some es2017 js (f7bcb68)
app: fix the statusbar-padding to match new structure (6c2d539)
back-button: fix position (e00da6d)
capacitor: detect capacitor native (23d86eb)
hover: remove ion-app .enable-hover css (a939fa2)
inputs: interactive css to rule all them (1bd5467)
refresher: move gesture target to content (df2faa4)
router: change events when URL changes (ece86ee)
router: dynamic redirects (ba551fd)
router: route information is stateless (0f8477d)
snapshot: using md mode (e352d1b)
theming: update contrast colors (ae1028d)
virtual-scroll: JSX can render headers and footers (012127d)
virtual-scroll: linting (df8a4f7)
Performance Improvements
all: dynamic import (bb809b6)
Bug Fixes
angular: compare router params length (b3a9c7f)
angular: Config provider (329a348)
angular: platform.ready() returns type (c0ec02e)
angular: update proxies (da0bfc7)
config: add object.entries polyfil (c917a3c)
config: add setupConfig util (0c1476e)
lint: import order (8b1452c)
nav: rename animate to animated (98a3519)
prerender: router compatible with prerender (9c7b0ca)
router: error when it can't initialize property (e56b2ee)
router: initial load waits until outlet attaches (c905ba4)
router: root prop (89d5a35)
router: writeURL() for non root base (af4bcb8)
scripts: github release (545d3c2)
segment: checked can be changed dynamically (78454b4)
select: cssClass + strong typed (826e02b)
toast: only use constant and env if supported (#14399) (9bee0f0)
validate: fix type errors (3328314)
Features
router: add willChange event (d613411)
Bug Fixes
all: strong typed events (d5129df)
angular: adds missing events (c929dad)
angular: Config provider (c87f0c5)
angular: platform ready() (2b3c14b)
overlay: cssClasses applied to overlay (43d7538)
prerender: local references to window/document (78bd146)
virtual-scroll: queue.write (c1cbbc5)
Features
angular: animation is explicit (099b3ed)
Performance Improvements
platform: remove from critical path (86a6cde)
Bug Fixes
angular: add NavParams (22ebbce)
angular: change detection in deep ViewContainers (850d7fc)
angular: emit es5 code (02c1e83)
angular: icon proxy (db5313e)
angular: router-outlet uses stack by default (5c91101)
angular: using es2017 types (12a27bc)
angular: viewContainer in overlays (8ad3df9)
back-button: get the back button color working (5f4250b)
fab: fix fab activation (a203534)
label: inline position by default (fde878b)
label: using prop for position (b1ee4b8), closes #14288
mode: set mode css class on ion-app (fcb08e1)
props: update stencil (ea24ad6)
react: FrameworkDelegate matches API (e40a6b0)
toast: account for safe-area on ios (d984214)
Features
angular: adds DomController (6a31f39), closes #14286
angular: push/setRoot/pop (4d23cba)
DomController: add DomController provider using stencil queue (bceece7)
queue: use stencil's queue controller for dom read/writes (d623b3b)
router: dont reuse the component if the params are different (5899b03)
routerDirection: refactors goBack (54d7a12)
Bug Fixes
angular: change detection (79ba639)
angular: proxy methods (5153da4)
angular: proxy outputs (64a9497)
menu: prerender (a3cd5db)
split-pane: prerender (c6e962c)
0.2.2 (2018-04-05)
Bug Fixes
back-button: fix menu and back button alignment (#14268) (57fbf6c)
ripple-effect: animation (25c852c)
sass: add missing alert css properties (#14269) (3471dd6), closes #14258
script: release script pushes tags (d23108a)
scripts: improve script (2215c6a)
select: pass header and subHeader to interfaces (2195895)
select: wrap the text for the message in a popover (0a0959b)
0.2.1 (2018-04-04)
Bug Fixes
angular: back button prevents default (4db687e)
angular: back-button (1f78390)
angular: back-button does not push view (bb46b5f)
angular: tabs flickering (7e97006)
app: hide elements (11cb42f)
scripts: update dep version (974b949)
Features
angular: href integration (09e6b7e)
0.2.0 (2018-04-02)
Bug Fixes
angular: URL based tabs (14fedb9)
0.1.6 (2018-04-02)
Bug Fixes
angular: lifecycles (062641d)
angular: modal and popover (acd411d)
angular: module exports (cece447)
angular: proxies (2308239)
angular: tabs angular tests (ff1ed88)
router-outlet: enteringEl !== leavingEl (0d44253)
router-outlet: mutable prop (ff06dab)
0.1.5 (2018-03-29)
Bug Fixes
all: absolute positioning (4fcddad)
angular: goback navigation (7b9a00e)
angular: ion-back-button (9c789ce)
angular: stack based navigation (726938f)
avatar: adjust wide images to fill instead of squish (b0f8ca5)
back-button: empty text is a valid value (eb0ff2f)
back-button: ios style (2b8e489)
button: dynamic bar-button (d0c5f53)
checkbox: update ios checkbox to be closer to native (b29fce1)
components: add font-smoothing to mixing components (9caeec7)
covers: absolute positioning (ce09978)
item-option: remove outline on active/focus (eae6869), closes #14191
label: add missing text-wrap styles for ios (a9bd76a), closes #13157
menu: default menu mode (c31bcde)
nav: animated opts (57a5d49)
nav: no animation (4fdfddb)
nav: transition name (011a374)
picker: do not scroll (1c06bfe)
ripple-effect: tapclick is required in ionic (d57122c)
router: change detection for componentProps (a718f7e)
router: explicit goback should not push (7a26162)
router: fixes navChanged() (dddaee1)
router: ion-nav (113af9e)
router: loging (ffaec16)
router: route change detection (9e9f2a2)
router: wait RAF (b26a563)
slides: unload slides correctly (59c6891)
thumbnail: adjust wide images to fill instead of squish (54558c9)
toast: dismiss timeout (44f343d)
toolbar: unused private (c9d2a0d)
transition: nav ios transition (095f9c8)
Features
button: goback attribute (00fc460)
config: add set to config (69a6f8d)
content: scrollEnabled (5c2678f)
menu-controller: expose registerAnimation (153f8ca)
nav: goBack directive (862e571)
nav-controller: goback best guess (46bbd0f)
ripple: css variable color (77fc792)
tab: framework support (48d1bd4)
Performance Improvements
app: platform is not needed (e681836)
Reverts
toolbar: revert to use old button attributes (574c346), closes #14172
0.1.4 (2018-03-21)
Bug Fixes
action-sheet: update padding on title to match native (f0a40fa)
alert: update colors for alert text and input borders (605ec93), closes #14196
alert: update md alert to closer match spec (7d53e49)
all: ts strict (part 4) (4693229)
angular: router-outlet animation (943e2f7)
chip: use lighter background color (08553f1), closes #14196
picker: does not scroll (b49a45d)
router: reusing checks params (371fc19)
router-outlet: css and change logic (6e683c5)
Features
fab: add box shadow and transition for ios (d26074a)
ion-router-outlet: adds router-outlet (c03afab)
0.1.4-9 (2018-03-20)
Bug Fixes
all: ts strict (part 3) (06ad60e)
angular: ion-nav no routing (9094c66)
angular: removeViewFromDom (41f54f8)
back-button: use correct color for ios back button (b82c382), closes #14177
overlays: page is removed properly (9988c75)
theming: update spinner classes to new names (f578122)
Features
angular: ion-nav (f39d3ad)
0.1.4-8 (2018-03-19)
Bug Fixes
back-button: apply the proper color to the back button (7d2de18), closes #14177
Features
nav: support for rootParams (50abcf5)
0.1.4-7 (2018-03-16)
Features
router: wildcard redirects (2bdf4ad)
0.1.4-6 (2018-03-15)
Bug Fixes
alert: backdrop calls cancel handler (de22eca)
alert: set input value (6e2a9c9)
angular: create angular delegate (3b5f758)
angular: fix overlays (cc4fecc)
angular: modal and popover support (9a0755a)
demos: fixes angular (f398b3a)
overlay: using hostData for zIndex (64f0866)
overlay: wrong stencil import (22f6a34)
overlays: OverlayController interface (6e2ca85)
popover: lifecycles (b56c2a8)
router: ambiguous routes (b4f46ee)
router: fix selection (207f416)
router: rename API to match stencil-router (e729610)
router: retuning string path (f48d817)
toggle: ios shadow (7df023a)
Features
ion-router: dynamic routes (7c3cba0)
overlay: adds lifecycle events (0b099ce)
overlays: adds onDidDismiss and onWillDismiss (7dcf8a5)
Performance Improvements
scss: optimize multi dir (#14156) (ba63d01)
0.1.4-5 (2018-03-09)
Bug Fixes
item: button outline (f671008)
router: fix flickering (f2ac6e3)
router: flickering 2 (88f2981)
router: tslint (1ace045)
Features
router: adds redirectTo (f5c6333)
0.1.4-4 (2018-03-08)
Bug Fixes
back-button: implements back animation (64a787a)
route: params is not undefined (8b6df5a)
0.1.4-3 (2018-03-08)
Bug Fixes
router: passing params to ion-nav (d1263a8)
Features
back-button: adds defaultHref (5271f68)
nav: params (878d7e6)
route: adds route-link (4a3030f)
router: reverse lookup with params (3ce8a67)
0.1.4-2 (2018-03-07)
Bug Fixes
fab: add side as a property for fab list (7387d34)
ion-router: fixes routing algorithm (c8a27b7)
item: href (540c33b)
overlays: bundling of overlays (9650bec)
router: invalid url (c7fe694)
routing: flickering (part 1) (7b264f9)
tabs: do not select when using router (174d9b5)
Features
router: adds parameters (f29e3f4)
virtual-scroll: adds JSX support (dc8b363)
0.1.4-1 (2018-03-07)
Bug Fixes
ion-router: fixes routing algorithm (c8a27b7)
overlays: bundling of overlays (9650bec)
routing: flickering (part 1) (7b264f9)
tabs: do not select when using router (174d9b5)
Features
virtual-scroll: adds JSX support (dc8b363)
0.1.4-0 (2018-03-06)
Refactor
Refactored navigation system
Bug Fixes
testing: do not throw error for missing Ionic global (aa91d11)
zone: forgot to remove console.logs (4ec3e48)
0.1.3 (2018-03-03)
Performance Improvements
Updates to latest stencil, that includes the zone bypassing abilities.
Bug Fixes
ts: ts strict fixes (8ff02c7)
0.1.2 (2018-03-03)
Performance Improvements
events: bypass ngzone (7366c38)
scroll: watchdog + simplification (33a6274)
Bug Fixes
scroll: clearInterval just to be safe (6da9882)
0.1.1 (2018-03-01)
Bug Fixes
button: pass the property type instead of hardcoding button (10e481a)
0.1.0 (2018-03-01)
3270
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
