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/addons
的 createFloatingLabelsPlugin
函数,您可以轻松地为任何 text
系列(text
、email
、url
、date
等)或 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 行代码。