从 Framework7 v7 迁移到 v8

在本文中，我们将详细介绍大部分重大变更，以检查将您的应用程序从 Framework7 v7 迁移到 Framework7 v8 需要执行的操作。

您还可以在此处查看完整的更新日志

已移除 Aurora 主题

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

已移除功能

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

• Elevation - 已移除，因为此类阴影不再用于 Material Design 中
• Lazy - 已移除，支持使用原生 loading="lazy"
• Menu - 已移除，因为它原本用于 Aurora 主题
• Appbar - 已移除，因为它原本用于 Aurora 主题
• Request - 已移除，支持使用原生 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 Web 组件。

• 已移除对 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 类。