從 Framework7 v7 移轉至 v8

在本文中，我們將逐步了解大部分重大變更，以查看將應用程式從 Framework7 v7 移轉至 Framework7 v8 時需要執行的動作。

您也可以在此處查看 完整的變更日誌

移除 Aurora 主題

我們決定專注於行動應用程式與介面，這也是 Framework7 最初建立的目的。因此，決定移除 Aurora 主題。

移除功能

已移除下列元件、模組與功能

• 漸層 - 已移除，因為此類陰影不再用於 Material Design 中
• 延遲載入 - 已移除，改用原生 loading="lazy"
• 選單 - 已移除，因為預計用於 Aurora 主題中
• 應用程式列 - 已移除，因為預計用於 Aurora 主題中
• 要求 - 已移除，改用原生 fetch
• 內嵌輸入標籤 - 已移除，因為此類配置很少用於現代應用程式中
• 清單項目儲存格與列 - 已移除，因為並非真正有用
• 已移除路由器中的 stackPages 功能，此功能允許您從現有的 DOM 元素載入頁面，並在 DOM 中保留先前的頁面。建議改用 路由器元件
• 已移除自動完成中的 expandInput 功能，因為此功能是為內嵌輸入標籤（現已移除）而設計
• 瀏覽器延遲載入元件 - 已移除具有 .lazy 字首的元件檔案，這些檔案由瀏覽器載入。改用套件管理工具

應用程式 id、version、language

已移除這些應用程式參數與屬性，因為它們並未在應用程式的任何地方使用。

深色模式

• autoDarkMode 應用程式參數已重新命名為 darkMode: 'auto'
• app.enableAutoDarkTheme() 和 app.disableAutoDarkTheme() 方法已被移除，取而代之的是新的 app.setDarkMode('auto')、app.setDarkMode(false)、app.setDarkMode(true) 方法

顏色

Material You 設計在 Framework7 v8 中到來，對顏色主題進行了許多變更

• 現在，主要主題顏色和所有其他顏色必須在 app.colors 參數中指定，而不是在 CSS 中
• utils.colorThemeCSSProperties() 現在會傳回包含 ios、md、light 和 dark CSS 變數的物件
• 現在與主題顏色相關的許多 CSS 變數都已變更（特別是在 Material 主題中）
• color-theme-[$color] 類別（和元件屬性）已被移除，因為 color-[$color] 類別現在執行相同的功能
• 查看已更新的 顏色主題 文件

Swiper v9

Framework7 v8 附帶全新的 Swiper 版本 9，其中包含許多新功能，特別是新的 Swiper Element 網路元件。

• swiper-init 類別支援（在核心版本中）以自動初始化 Swiper 已被移除，取而代之的是 Swiper Element
• 可滑動標籤現在 需要使用 Swiper Element
• Swiper React、Svelte、Vue 元件已從 Framework7 套件中移除，取而代之的是 Swiper Element
• 建議查看 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 類別