样式

• Tailwind CSS
  • 构建你自己的 Tailwind CSS 主题
  • 额外的样式覆盖
• 安装传统的 Genesis CSS 主题
• 外部属性
• 自定义类
• 追加类
• 重置类
• 移除类
• Section-key class 属性
• Classes 属性
• Classes 配置
  • 全局类配置
  • 在组、列表或表单上的类配置
• 使用 @formkit/themes 中的 generateClasses
• rootClasses 函数
• 修改模式中的类
  • 模式中的区块键类属性
  • 模式中的类属性
  • 模式中的配置

FormKit 提供了健壮且易于访问的标记 — 但不对你期望的样式做任何假设。FormKit 提供了你可以在项目中使用的 可选 主题 — 或者你可以创建自己的主题。

Tailwind CSS

使用 Web UI

开始使用 FormKit Themes（适用于 Tailwind）的最简单方法是直接访问 https://themes.formkit.com，自定义您选择的主题，然后选择 Download theme 来获取在项目根目录中运行的特定命令。

FormKit Themes

多功能、可配置、MIT 许可的 Tailwind 主题，用于您的项目。减少样式设计时间 —— 更多时间用于构建。

使用 CLI

另外，您可以使用 FormKit 命令行界面（CLI）为您的项目生成主题。要开始，请在与您的 formkit.config.{ts|js} 文件相同的目录中运行以下命令：

npx formkit theme

您将被引导选择一个现有主题作为项目的起点。此命令将在项目的根目录中创建一个 formkit.theme.{ts|js} 文件。要完成设置，您需要在 formkit.config.{ts|js} 中使用此主题文件中的 rootClasses：

// formkit.config.ts
import { fr } from '@formkit/i18n'
import { defaultConfig } from '@formkit/vue'
import { rootClasses } from './formkit.theme'

export default defaultConfig({
  locales: { fr },
  locale: 'fr',
  config: {
    rootClasses,
  },
})

最后，您需要将 formkit.theme.{ts|js} 文件添加到 Tailwind 配置文件的 content 属性中。这将确保主题的样式包含在项目的 CSS 中：

// tailwind.config.js
/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./app.vue",
    "./formkit.theme.ts" // <-- 添加您的主题文件
  ],
  darkMode: 'class',
  theme: {
    extend: {},
  },
  plugins: [],
}

如果您再次运行命令，您将被带到 https://themes.formkit.com，在那里您可以自定义所选主题。

# 在项目根目录中有现有的 formkit.theme 文件
> npx formkit theme
? 发现本地主题文件 <themeName>，编辑这个主题？ › (Y/n)

构建你自己的 Tailwind CSS 主题

想要创建你自己的 Tailwind 主题吗？查看我们的起始主题 — 它有详细的注释 — 来开始。你也可以按照我们的指南 "创建一个 Tailwind CSS 主题" 一步一步地了解主题创建过程。

额外的样式覆盖

继续阅读以了解如何进一步覆盖你选择的 FormKit 主题中的类，在全局、表单和输入级别。

安装传统的 Genesis CSS 主题

CDN 使用

要通过 CDN 加载 genesis，请将其提供给你的 defaultConfig 的 theme 属性。

...
defaultConfig({
  theme: 'genesis' // 将从 CDN 加载并注入到文档头部
})
...

直接导入

要安装 Genesis，首先安装 @formkit/themes 包。

npm install @formkit/themes

然后在你的 main.js 中（无论你在哪里启动 Vue）包含 Genesis 的 theme.css（这假设你正在使用像 Vite、Webpack、Snowpack 或 Nuxt 这样的构建工具）：

import '@formkit/themes/genesis'

外部属性

为了样式化目的，一些属性会自动添加到所有 FormKit 输入的 outer 部分，并从中移除：

• data-type — 输入的类型，如 text、select、checkbox 等。
• data-multiple — 对于接受 multiple 属性的输入，当输入具有多个属性时（如 select 输入），这将被附加。
• data-disabled — 当输入被禁用时出现。
• data-complete — 当输入是 "完整" 的时出现。旨在用于在用户完成填写输入时（如绿色勾号）对输入进行样式化。阅读关于 context.state.complete 的信息，了解什么条件会使其为 true。
• data-invalid — 当输入有失败的验证规则且失败规则的消息可见时出现。
• data-errors — 当输入有明确设置的错误时出现。

你可以使用上述属性来轻松为填写表单的用户提供实时视觉反馈：

自定义类

大多数用户会希望将自己的样式和类应用到 FormKit 提供的标记上。 FormKit 提供了多种方法来为你的项目应用类。

可以使用以下任何方法修改所有部分的类（从最高到最低的特异性）：

• The {section-key}-class 属性。（最具体）
• The classes 属性。
• The classes 配置选项。
• The rootClasses 配置函数。（最不具体）

类遵循严格的层次结构。最初，类由 rootClasses 函数生成。然后可以通过 classes 配置选项进行修改，接着是 classes 属性，最后是 {section-key}-class 属性。在这些阶段中，类可以被追加、重置或选择性修改。

追加类

要追加一个类，只需返回你想追加的字符串，或提供一个带有布尔值的类对象 — true 属性将被追加：

重置类

通过提供一个特殊的（不渲染的）类 $reset，无论是字符串格式还是对象格式，都可以完全移除由所有早期层次步骤产生的类：

移除类

通过提供一个值为 false 的对象来移除你想要移除的类，或者提供一个以 $remove: 开头并与类列表中现有类匹配的 {section-key}-class 属性的类名，可以选择性地移除由类层次结构中较早步骤产生的类。这包括移除 formkit 默认的 formkit- 前缀类：

Section-key class 属性

通过 {section-key}-class 属性是修改 FormKit 输入框内元素类的最简单方式。要给特定的部分元素添加类，比如 label，你只需添加 label-class 属性：

Classes 属性

Classes 属性与 section-key class 属性类似，不同之处在于它允许同时设置所有部分的类：

Classes 配置

Classes 配置选项与 classes 属性类似，不同之处在于它适用于所有配置了该选项的输入框。FormKit 独特的配置系统允许你在项目中全局应用类，或者仅应用于某个特定组或表单的输入框：

全局类配置

在组、列表或表单上的类配置

使用 @formkit/themes 中的 generateClasses

FormKit 随附了一个名为 generateClasses 的辅助函数，包含在 @formkit/themes 中。

generateClasses 函数接受一个以输入类型为键，值为一个以 ${sectionKey} 为键的子对象的 JavaScript 对象。通过这个函数，你可以快速地根据给定输入类型，将类列表应用到输入框内的部分。

rootClasses 函数

rootClasses 是一个配置函数，负责生成每个元素的默认类。这个函数已经有一个默认值，它生成所有默认的类（如 formkit-outer 和 formkit-label），这些类随 FormKit 一起提供 — 因此替换这个单一函数可以让你轻松替换所有初始类。这使得它成为使用像 Tailwind 这样的实用框架编写自定义主题的理想选择。

rootClasses 函数传递 2 个参数（分别是）：

• 部分键（如 label 或 input）。
• 输入的节点。

该函数将为每个部分调用一次，它 必须 返回一个带有布尔值的类对象。

虽然 rootClasses 的典型用法是在全局配置级别应用类到整个项目 — 但你也可以使用 config 属性，通过你提供的函数中的逻辑计算出的类列表，覆盖项目中特定表单或输入：

修改模式中的类

除了通过配置或属性 在 <FormKit> 组件上 修改类之外，你还可以在模式中使用相同的技术：

模式中的区块键类属性

在模式中，你还可以通过 {section-key}Class 属性修改输入元素内部的类。例如，要向标签区块添加一个类，你可以添加 labelClass 属性：

{
  $formkit: 'text',
  name: 'email',
  // 向 "label" 区块添加 'appended-class'
  labelClass: 'appended-class'
},

模式中的类属性

就像在 <FormKit> 组件上的 类属性 一样，你可以使用模式节点上的 classes 属性修改任何输入的区块的类列表：

{
  $formkit: 'text',
  name: 'email',
  // 修改这个输入的 "outer" 和 "inner" 区块的类
  classes: {
    outer: 'new-outer-class',
    inner: {
      $reset: true, // 重置 "inner" 区块上的类
      'new-inner-class': true
    }
  },
},

模式中的配置

由于配置会传递给后代输入，你可以通过在父级上修改配置，如 form、list 或 group，这将影响所有任何深度的后代：