这是一个包含可用于您的项目的工作代码的广泛示例集合。
form
类型会自动添加一个提交按钮。通过添加类,使其界面符合您项目的样式。
使用 list
类型,我们可以创建可重复输入的重复器。此示例使用循环让用户添加/删除电子邮件地址。
使用 FormKitSchema
组件,根据另一个输入的值有条件地显示一个带有验证规则的输入。
使用 FormKitSchema
组件从多步骤表单指南中呈现多步骤表单。
创建一个自定义的模式驱动的提交按钮,在表单提交时动态禁用并提供加载旋转器。
使用插件在具有“required”规则的输入的标签区域添加星号(*)。
使用插件将字符串值转换为数字。如果您希望类型为 number
的输入返回 JS 的 Number
原始值,则此插件非常有用。
使用插件修改所有后代复选框输入的 HTML。
使用插件通过扩展模式定义在验证消息之前添加图标。
使用插件将所有初始输入值设置为空字符串 ""
而不是 undefined
。
使用插件允许 button
类型的输入具有可随意切换的加载旋转器,使用新的 loading
属性。
使用插件根据 id
自动设置输入的 name
、label
和 help
属性。减少在 HTML 中重复声明属性。
一个插件,在提交时或添加后端错误时,自动滚动到页面上的第一个错误。
一个带有 +1 和 -1 步进按钮的自定义输入。使用 createInput()
创建。
使用插槽或 :sections-schema
功能修改标签的 HTML。
根据另一个输入的值有条件地更新 select
输入的 options
。
仅使用新样式(此示例中的 Tailwind 类)将卡片样式应用于默认的 FormKit 单选输入结构。
在异步验证规则等待验证时,为输入添加加载旋转器。
仅在用户更改了表单中的任何值时才启用保存/提交按钮。
通过使用 FormKit 的 :sections-schema
注入 Vue 的 TransitionGroup
组件,为验证消息添加过渡效果。
在 StackBlitz 上的一个工作入门项目,使用了 Nuxt、FormKit 和 Tailwind CSS。
使用 rootClasses
配置函数和 FormKit 属性,根据输入状态生成动态类。对于 Tailwind 和其他 CSS 实用库非常有用。
创建 FormKit 输入的 UI 变体(如按钮),根据组件中的响应式数据进行更新。