从 Framework7 v7 迁移到 v8

在这篇文章中，我们将逐步介绍大部分的破坏性更改，以检查需要做哪些工作来将您的应用程序从 Framework7 v7 迁移到 Framework7 v8。

您还可以查看完整的变更日志在这里

移除了 Aurora 主题

我们决定专注于移动应用程序和界面，这是 Framework7 最初创建的目的。因此，决定移除 Aurora 主题。

移除了功能

以下组件、模块和功能已被移除：

• Elevation - 已移除，因为这些阴影不再在 Material Design 中使用
• Lazy - 已移除，优先使用原生方式loading="lazy"
• Menu - 已移除，原本打算用于 Aurora 主题
• Appbar - 已移除，原本打算用于 Aurora 主题
• Request - 已移除，优先使用原生方式fetch
• Inline Input Labels - 已移除，因为这些布局在现代应用程序中很少使用
• List Item Cell & Row - 已移除，因为它们实际上没有太大用处
• 移除了stackPages路由器中允许您从现有 DOM 元素加载页面并保留先前页面在 DOM 中的功能。建议使用路由器组件代替
• 移除了expandInputAutocomplete 中的功能，因为它原本用于内联输入标签（现在已移除）
• 浏览器懒加载组件 - 带有.lazy前缀的组件文件现在已被移除。使用打包工具代替

应用id, version, language

这些应用程序参数和属性已被移除，因为无论如何它们在应用程序中都没有被使用。

深色模式

• autoDarkModeapp 参数已被重命名为darkMode: 'auto'
• app.enableAutoDarkTheme()和app.disableAutoDarkTheme()method 已移除，优先使用新的app.setDarkMode('auto'), app.setDarkMode(false), app.setDarkMode(true)方法中覆盖。

颜色

Material You 设计在 Framework7 v8 中引入了许多颜色主题的更改：

• 现在，主主题颜色和所有附加颜色必须在app.colors参数中指定，而不是在 CSS 中
• utils.colorThemeCSSProperties()现在返回一个包含ios, md, light和darkCSS 变量的对象
• 现在有许多与主题颜色相关的 CSS 变量已更改（尤其是在 Material 主题中）
• color-theme-[$color]类（和组件属性）已被移除，因为color-[$color]类现在执行相同的功能
• 请查看更新的颜色主题文档

Swiper v9

Framework7 v8 带来了全新的 Swiper 版本 9，它具有许多新功能，尤其是新的 Swiper Element Web 组件。

• swiper-initCore 版本中的类支持（用于自动初始化 Swiper）已被移除，优先使用Swiper 元素
• Swipeable Tabs 现在需要使用 Swiper ElementSwiper React、Svelte、Vue 组件已从 Framework7 包中移除，优先使用
• Swiper React, Svelte, Vue components have been removed from Framework7 package in favor of Swiper 元素
• 建议查看Swiper v9 迁移指南

网格

• 新的简化网格布局和尺寸
• 可调整大小的网格功能已被移除

时间线

时间线使用新的类来根据新的网格指定水平时间线中的列数参数已被重命名为

搜索栏

hideDividers parameter has been renamed to hideGroupTitles.

弹出框

angle参数（属性）和布局类已被重命名为arrow.

细线

细线辅助类已被移除，因为大多数组件现在都有outline/no-outline类

块

现在 strong 块默认情况下没有轮廓（边框），需要新的block-outline类来实现

列表

• 现在 list 默认情况下没有轮廓（边框），需要新的list-outline类来实现
• 现在 list 默认情况下没有背景，需要新的list-strong类来实现
• 现在 list 默认情况下没有分隔符（列表项之间的边框），需要新的list-dividers类来实现

卡片

• 现在 card 默认情况下没有阴影，需要新的card-raised类来实现
• 现在 card 默认情况下没有分隔符（卡片头部和脚部之间的边框），需要新的card-header-divider和card-footer-divider类来实现