Des fonctionnalités supplémentaires communes, optionnelles et de première partie pour FormKit.
Vous pouvez ajouter ce package en utilisant npm install @formkit/addons ou yarn add @formkit/addons.
Ajoute auto-animate à chaque entrée automatiquement :
createAutoAnimatePlugin(options?: AutoAnimateOptions, animationTargets?: Record<string, string[]>): FormKitPlugin;options optionnel — AutoAnimateOptionsanimationTargets optionnel — Une carte des types d'entrée et un tableau de leurs sections qui devraient être animées.import { createApp } from 'vue'
import App from 'App.vue'
import { createAutoAnimatePlugin } from '@formkit/addons'
import { plugin, defaultConfig } from '@formkit/vue'
createApp(app).use(plugin, defaultPlugin({
plugins: [
createAutoAnimatePlugin({
// config optionnelle
duration: 250,
easing: 'ease-in-out',
delay: 0,
},
{
// objet cibles d'animation optionnel
global: ['outer', 'inner'],
form: ['form'],
repeater: ['items'],
})
]
}))Crée un nouveau plugin de zone de texte à hauteur automatique.
createAutoHeightTextareaPlugin(): FormKitPlugin;Crée un nouveau plugin d'étiquettes flottantes.
createFloatingLabelsPlugin(FloatingLabelsOptions?: FloatingLabelsOptions): FormKitPlugin;FloatingLabelsOptions optionnel — Les options de FloatingLabelsOptions à passer au pluginCrée un nouveau plugin de sauvegarde en local.
createLocalStoragePlugin(localStorageOptions?: LocalStorageOptions): FormKitPlugin;localStorageOptions optionnelCrée un nouveau plugin multi-étapes.
createMultiStepPlugin(options?: MultiStepOptions): FormKitPlugin;options optionnel — Les options de MultiStepOptions à passer au pluginLes options à passer à createFloatingLabelsPlugin
interface FloatingLabelsOptions {
useAsDefault?: boolean;
}Les options à passer à createLocalStoragePlugin
interface LocalStorageOptions {
beforeLoad?: (payload: any) => any;
beforeSave?: (payload: any) => any;
control?: string;
debounce?: number;
key?: string | number;
maxAge?: number;
prefix?: string;
}Les options à passer à createMultiStepPlugin
interface MultiStepOptions {
allowIncomplete?: boolean;
hideProgressLabels?: boolean;
tabStyle?:'tab' | 'progress';
}