Skip to main content
Version: v7 (beta)

Updating from Ionic 6 to 7

note

Ionic 7 is in beta. Please report any issues on the Ionic Framework GitHub Repo.

note

This guide assumes that you have already updated your app to the latest version of Ionic 6. Make sure you have followed the Updating to Ionic 6 Guide before starting this guide.

Breaking Changes

For a complete list of breaking changes from Ionic 6 to Ionic 7, please refer to the breaking changes document in the Ionic Framework repository.

はじめ方

Angular

  1. Ionic 7はAngular 14+に対応しています。 Angular Update Guide に従い、Angularの最新バージョンにアップデートしてください。
  2. プロジェクトでrxjsを使用している場合、Ionic 7ではrxjsの最低バージョンが7.5.0である必要があります：
npm install rxjs@7.5.0
  1. Ionic 7の最新バージョンにアップデートしてください：
npm install @ionic/angular@next

Ionic Angular Serverを使用している場合は、必ずそちらも更新してください。

npm install @ionic/angular@next @ionic/angular-server@next

React

  1. Ionic 7はReact 17+に対応しています。Reactの最新バージョンにアップデートしてください。
npm install react@latest react-dom@latest
  1. Ionic 7の最新バージョンにアップデートします。
npm install @ionic/react@next @ionic/react-router@next

Vue

  1. Ionic 7はVue 3.0.6+をサポートしています。Vueの最新バージョンにアップデートしてください。
npm install vue@latest vue-router@latest
  1. Ionic 7の最新バージョンにアップデートします。
npm install @ionic/vue@next @ionic/vue-router@next

Core

  1. Ionic 7の最新バージョンにアップデートします。
npm install @ionic/core@next

あなたのコードのアップデート

ブラウザサポート

Ionicがサポートするブラウザーのリストが変更されました。 ブラウザサポートガイド を確認し、サポートされているブラウザにアプリをデプロイしていることを確認してください。

browserslist または .browserslistrc ファイルをお持ちの場合は、以下の内容で更新してください。

Chrome >=79
ChromeAndroid >=79
Firefox >=70
Edge >=79
Safari >=14
iOS >=14

型

  1. ActionSheetAttributes、AlertAttributes、AlertTextareaAttributes、AlertInputAttributes、LoadingAttributes、ModalAttributes、PickerAttributes、PopoverAttributesおよび ToastAttributes は削除されました。開発者は、代わりに { [key: string]: any } を使用する必要があります。

Checkbox

  1. CSS 変数 --background と --background-checked を使用している場合は、それぞれ --checkbox-background と --checkbox-background-checked にリネームします。

Datetime

  1. value プロパティに空文字列('')を設定するコードを削除します
  2. value プロパティのタイムゾーン情報にアクセスするコードをすべて削除します。Datetimeはタイムゾーンを管理しないので、提供されたタイムゾーン情報はすべて無視されます。

Input

  1. detail ペイロードが値とイベントを含むオブジェクトになったので、ionInputイベントの detail ペイロードにアクセスするコードを event.detail から event.detail.value に更新します。
  1. Remove any usage of the swipeToClose property. Card modals are swipeable by default, so you can remove swipeToClose if you want your card modal to remain swipeable. Use the canDismiss property if you want to prevent a modal from dismissing.
  2. Remove any code that sets the canDismiss property to undefined. The canDismiss property now defaults to true, so this code is no longer needed.

Picker

  1. ion-picker-column の refresh にアクセスするコードをすべて削除する。代わりに ion-picker の columns プロパティを使用してビューをリフレッシュする必要があります。
  1. detail ペイロードが値とイベントを含むオブジェクトになったので、ionInputイベントのdetailペイロードにアクセスするコードを event.detail から event.detail.value に更新します。

Segment

  1. Remove any code that sets the value property to null. Developers should use either '' or undefined instead.

Slides

  1. ion-slides、ion-slide、および関連する型を削除する。これらのコンポーネントは、Swiper.jsを直接使用するために削除されました。この移行については、以下のガイドに詳細が記載されています。

Angular Migration Guide
React Migration Guide
Vue Migration Guide

Textarea

  1. detail ペイロードが値とイベントを含むオブジェクトになったので、ionInputイベントのdetailペイロードにアクセスするコードを event.detail から event.detail.value に更新します。

Toggle

  1. CSS変数 --background と --background-checked を使用している場合は、それぞれ --track-background と --track-background-checked にリネームします。

Virtual Scroll

ion-virtual-scrollとそれに関連する型を削除する。このコンポーネントは、JavaScript Frameworksが提供する仮想スクロールのソリューションを使用するために削除されました。この移行については、以下のガイドに詳細が記載されています。

Angular Migration Guide
React Migration Guide
Vue Migration Guide

アップグレードに助けが必要？

Ionic 7 Breaking Changes Guide を必ず見てください。デフォルトのプロパティとCSS Variableの値について、開発者が注意する必要がある変更がいくつかありました。このページでは、ユーザーアクションが必要な変更点のみをリストアップしています。

<<<<<<< HEAD アップグレードのヘルプが必要な場合は、Ionic Forumにスレッドを投稿してください。

======= If you need help upgrading, please post a thread on the Ionic Forum.

3bd16bc620b471736c9f4ce90e2f3eae53781174

Contents

Edit this page