En utilisant la fonction createFloatingLabelsPlugin de @formkit/addons, vous pouvez facilement ajouter un effet d'étiquette flottante à n'importe quel champ de la famille text (text, email, url, date, etc) ou à un champ textarea de FormKit.
Pour utiliser ce plugin avec FormKit, installez @formkit/addons :
yarn add @formkit/addons
Une fois que vous avez installé le package addons, vous devrez enregistrer le plugin avec FormKit et inclure les styles CSS associés. La fonction createFloatingLabelsPlugin a une option que vous pouvez configurer qui contrôle si l'effet d'étiquette flottante est le traitement par défaut sur les entrées applicables :
// 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, // par défaut à false
}),
],
})
export default config
Par défaut, le plugin d'étiquettes flottantes ne prend effet sur un champ FormKit que si vous définissez la nouvelle propriété floating-label sur true.
Si vous souhaitez utiliser les étiquettes flottantes par défaut, passez l'option useAsDefault au plugin lorsque vous l'installez.
// formkit.config.js
...
plugins: [
createFloatingLabelsPlugin({
useAsDefault: true
}),
],
...
Lorsque les étiquettes flottantes sont définies comme traitement par défaut, vous pouvez toujours les désactiver sur un champ FormKit en définissant la propriété floating-label sur false.
C'est tout ! Des étiquettes flottantes sur vos champs FormKit en aussi peu que 3 lignes de code supplémentaires.