Plugin Étiquettes Flottantes

• Installation
• Utilisation

En utilisant la fonction createFloatingLabelsPlugin de @formkit/addons, vous pouvez facilement ajouter un traitement d'étiquette flottante à n'importe quelle entrée FormKit de type text (famille text, email, url, date, etc.) ou textarea.

Installation

Pour installer le plugin des étiquettes flottantes, nous devons l'importer depuis @formkit/addons, l'ajouter à notre configuration FormKit et inclure les styles CSS de support (ou fournir les vôtres).

Le createFloatingLabelsPlugin a une option que vous pouvez configurer, qui contrôle si le traitement des étiquettes flottantes 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

Utilisation

Par défaut, le plugin d'étiquette flottante ne prend effet sur une entrée 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 par défaut, vous pouvez toujours les désactiver sur une entrée FormKit en définissant la propriété floating-label sur false.

C'est tout ! Des étiquettes flottantes sur vos entrées FormKit en aussi peu que 3 lignes de code supplémentaires.