示例

这是一个包含可用于您的项目的工作代码的广泛示例集合。

表单和结构

为FormKit提供的提交按钮添加类

form 类型会自动添加一个提交按钮。通过添加类,使其界面符合您项目的样式。

使用列表重复输入

使用 list 类型,我们可以创建可重复输入的重复器。此示例使用循环让用户添加/删除电子邮件地址。

模式

根据另一个输入的值有条件地显示输入

使用 FormKitSchema 组件,根据另一个输入的值有条件地显示一个带有验证规则的输入。

从模式构建的多步骤表单

使用 FormKitSchema 组件从多步骤表单指南中呈现多步骤表单。

具有禁用状态和加载旋转器的自定义模式提交按钮

创建一个自定义的模式驱动的提交按钮,在表单提交时动态禁用并提供加载旋转器。

插件

在所有必填输入的标签上添加星号

使用插件在具有“required”规则的输入的标签区域添加星号(*)。

使数字输入返回数字值

使用插件将字符串值转换为数字。如果您希望类型为 number 的输入返回 JS 的 Number 原始值,则此插件非常有用。

移除所有复选框的内部包装器

使用插件修改所有后代复选框输入的 HTML。

在验证消息之前添加图标

使用插件通过扩展模式定义在验证消息之前添加图标。

将初始值设置为空字符串而不是未定义

使用插件将所有初始输入值设置为空字符串 "" 而不是 undefined

为“button”类型的输入添加可手动切换的加载旋转器

使用插件允许 button 类型的输入具有可随意切换的加载旋转器,使用新的 loading 属性。

根据 id 自动设置输入的名称、标签和帮助文本

使用插件根据 id 自动设置输入的 namelabelhelp 属性。减少在 HTML 中重复声明属性。

滚动到表单上的第一个验证或错误。

一个插件,在提交时或添加后端错误时,自动滚动到页面上的第一个错误。

输入

具有自定义步进按钮的数字输入

一个带有 +1 和 -1 步进按钮的自定义输入。使用 createInput() 创建。

在标签中添加链接(<a> 标签)

使用插槽或 :sections-schema 功能修改标签的 HTML。

根据另一个输入的值有条件地更新选择输入的选项

根据另一个输入的值有条件地更新 select 输入的 options

将单选输入选项样式设置为卡片样式

仅使用新样式(此示例中的 Tailwind 类)将卡片样式应用于默认的 FormKit 单选输入结构。

用户界面

为异步验证规则添加加载指示器

在异步验证规则等待验证时,为输入添加加载旋转器。

只有在表单更改时才启用提交按钮

仅在用户更改了表单中的任何值时才启用保存/提交按钮。

为验证消息添加过渡效果

通过使用 FormKit 的 :sections-schema 注入 Vue 的 TransitionGroup 组件,为验证消息添加过渡效果。

具有 Nuxt、FormKit 和 Tailwind 的入门项目

在 StackBlitz 上的一个工作入门项目,使用了 Nuxt、FormKit 和 Tailwind CSS。

根据输入的状态生成动态类

使用 rootClasses 配置函数和 FormKit 属性,根据输入状态生成动态类。对于 Tailwind 和其他 CSS 实用库非常有用。

使用“features”创建 FormKit 输入的响应式 UI 变体

创建 FormKit 输入的 UI 变体(如按钮),根据组件中的响应式数据进行更新。