Introducing KickStart —  AI generated FormKit forms in seconds. Generate from a screenshot, edit with drag-and-drop or conversational AI, copy & paste as components or schema!
Try for free

浮动标签插件

使用来自 @formkit/addonscreateFloatingLabelsPlugin 函数,您可以轻松地为任何 text 系列(textemailurldate 等)或 textarea FormKit 输入添加浮动标签效果。

安装

要在 FormKit 中使用这个插件,请安装 @formkit/addons

yarn add @formkit/addons

安装了 addons 包之后,您需要向 FormKit 注册插件并包含支持的 CSS 样式。createFloatingLabelsPlugin 有一个您可以配置的选项,该选项控制是否将浮动标签效果作为适用输入的默认效果:

// formkit.config.js
import { defaultConfig } from '@formkit/vue'
import { createFloatingLabelsPlugin } from '@formkit/addons'
import '@formkit/addons/css/floatingLabels'

const config = defaultConfig({
  plugins: [
    createFloatingLabelsPlugin({
      useAsDefault: true, // 默认为 false
    }),
  ],
})

export default config

使用

默认情况下,只有当您将新的 floating-label 属性设置为 true 时,浮动标签插件才会对 FormKit 输入生效。

加载实时示例

如果您希望默认使用浮动标签,则在安装时将 useAsDefault 选项传递给插件。

// formkit.config.js
...
plugins: [
  createFloatingLabelsPlugin({
    useAsDefault: true
  }),
],
...

当将浮动标签设置为默认时,您仍然可以通过将 floating-label 属性设置为 false 来禁用 FormKit 输入上的浮动标签。

加载实时示例

就是这样!在您的 FormKit 输入上添加浮动标签,只需额外的 3 行代码。