Framework7 v7 から v8 への移行

この記事では、Framework7 v7 から Framework7 v8 にアプリを移行するために必要な変更点について説明します。

完全な変更ログはこちらで確認できます。

Auroraテーマの削除

Framework7は当初からモバイルアプリケーションとインターフェースに焦点を当てて開発されてきたため、Auroraテーマを削除することにしました。

機能の削除

以下のコンポーネント、モジュール、機能が削除されました。

• Elevation - Material Designでは影が使用されなくなったため削除されました。
• Lazy - ネイティブの`loading="lazy"`を使用するため削除されました。
• Menu - Auroraテーマで使用されていたため削除されました。
• Appbar - Auroraテーマで使用されていたため削除されました。
• Request - ネイティブの`fetch`を使用するため削除されました。
• インライン入力ラベル - 最新のアプリではこのようなレイアウトはほとんど使用されないため削除されました。
• リストアイテムセルと行 - あまり役に立たないため削除されました。
• 既存のDOM要素からページを読み込み、前のページをDOMに保持できるルーターの`stackPages`機能が削除されました。ルーターコンポーネントを使用することをお勧めします。
• インライン入力ラベル（現在削除済み）を対象としていたため、オートコンプリートの`expandInput`機能が削除されました。
• ブラウザによる遅延コンポーネント - ブラウザによって読み込まれる`lazy`プレフィックス付きのコンポーネントファイルは削除されました。代わりにバンドラーを使用してください。

アプリの`id`、`version`、`language`

これらのアプリパラメータとプロパティは、アプリのどこにも使用されていないため削除されました。

ダークモード

• アプリパラメータの`autoDarkMode`は`darkMode: 'auto'`に名前が変更されました。
• 新しい`app.setDarkMode('auto')`、`app.setDarkMode(false)`、`app.setDarkMode(true)`メソッドを使用するため、`app.enableAutoDarkTheme()`と`app.disableAutoDarkTheme()`メソッドは削除されました。

カラー

Framework7 v8ではMaterial Youデザインが導入され、カラースキームに多くの変更が加えられました。

• プライマリテーマカラーと追加のカラーは、CSSではなく`app.colors`パラメータで指定する必要があります。
• `utils.colorThemeCSSProperties()`は現在、`ios`、`md`、`light`、`dark`のCSS変数を備えたオブジェクトを返します。
• テーマカラーに関連する多くのCSS変数が変更されました（特にMaterialテーマ）。
• `color-theme-[$color]`クラス（およびコンポーネントのプロパティ）は削除されました。`color-[$color]`クラスが同じ機能を果たすようになりました。
• 更新されたカラースキームドキュメントを確認してください。

Swiper v9

Framework7 v8には、新しいSwiperバージョン9が付属しており、特に新しいSwiper Element Webコンポーネントなど、多くの新機能があります。

• Swiperを自動的に初期化する（コアバージョン）`swiper-init`クラスのサポートは、Swiper Elementに置き換えられました。
• スワイプ可能なタブは現在Swiper Elementを使用する必要があります。
• Swiper Elementを使用するため、Swiper React、Svelte、VueコンポーネントはFramework7パッケージから削除されました。
• Swiper v9移行ガイドを確認することをお勧めします。

グリッド

• 新しい簡素化されたグリッドレイアウトとサイズ
• サイズ変更可能なグリッド機能が削除されました。

タイムライン

タイムラインは、水平タイムラインの列数を指定するために、新しいグリッドに従って新しいクラスを使用します。

検索バー

`hideDividers`パラメータは`hideGroupTitles`に名前が変更されました。

ポップオーバー

`angle`パラメータ（プロパティ）とレイアウトクラスは`arrow`に名前が変更されました。

ヘアライン

ほとんどのコンポーネントに`outline`/`no-outline`クラスがあるため、ヘアラインヘルパークラスは削除されました。

ブロック

デフォルトでは、強いブロックはアウトライン（境界線）なしでレンダリングされるようになりました。そのためには、新しい`block-outline`クラスが必要です。

リスト

• デフォルトでは、リストはアウトライン（境界線）なしでレンダリングされるようになりました。そのためには、新しい`list-outline`クラスが必要です。
• デフォルトでは、リストは背景なしでレンダリングされるようになりました。そのためには、新しい`list-strong`クラスが必要です。
• デフォルトでは、リストは区切り線（リストアイテム間の境界線）なしでレンダリングされるようになりました。そのためには、新しい`list-dividers`クラスが必要です。

カード

• デフォルトでは、カードは影なしでレンダリングされるようになりました。そのためには、新しい`card-raised`クラスが必要です。
• デフォルトでは、カードヘッダーとフッターの間には区切り線（境界線）がありません。そのためには、新しい`card-header-divider`と`card-footer-divider`クラスが必要です。