CHANGELOG_ARCHIVE/v5.md
Vue Router 4 has been released! Be sure to update from the release candidate to the latest stable version of Vue Router.
For more information on the changes in Vue Router 4, see https://github.com/vuejs/vue-router-next/releases/tag/v4.0.0.
npm install vue-router@4
findDOMNode, resolves #20972 (5275332)When updating to Ionic Vue v5.5.1 make sure you are on the latest version of vue-router@next to take advantage of the bug fixes in this release:
npm install vue-router@next
This is the first stable release of Ionic Vue.
Enjoy the Vue! :tada:
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!
This version is dedicated to our upcoming Ionic Vue release.
npm install @ionic/[email protected] @ionic/[email protected] --save-exact
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!
This version is dedicated to our upcoming Ionic Vue release.
npm install @ionic/[email protected] @ionic/[email protected] --save-exact
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!
This version is dedicated to our upcoming Ionic Vue release.
npm install @ionic/[email protected] @ionic/[email protected] --save-exact
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!
Promise<void> (#21259) (7703da2)Enjoy! :fire:
We recommend updating to version
4.11.10before 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.
Release Candidate is here! :tada:
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;
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.
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.
Before:
<ion-modal-controller></ion-modal-controller>
After:
import { modalController } from '@ionic/core';
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.
inputmode property for ion-searchbar now defaults to undefined. To get the old behavior, set the inputmode property to "search".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.
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)
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:
<ion-header text-center></ion-header>
<ion-content padding></ion-content>
<ion-label text-wrap></ion-label>
<ion-item wrap></ion-item>
AFTER:
<ion-header class="ion-text-center"></ion-header>
<ion-content class="ion-padding"></ion-content>
<ion-label class="ion-text-wrap"></ion-label>
<ion-item class="ion-wrap"></ion-item>
events: remove the Events service. (#19600) (8d4a721)
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:
<ion-searchbar show-cancel-button>
<ion-searchbar show-cancel-button="true">
<ion-searchbar show-cancel-button="false">
AFTER:
<ion-searchbar show-cancel-button="focus">
<ion-searchbar show-cancel-button="focus">
<ion-searchbar show-cancel-button="never">
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:
<ion-split-pane>
...
<div main>...</div>
</ion-split-pane>
AFTER:
<ion-split-pane content-id="main-content">
...
<div id="main-content">...</div>
</ion-split-pane>
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)