FormKit fournit un balisage robuste et accessible - mais sans aucune supposition sur vos
styles souhaités. Il existe un thème de base optionnel (comme vu dans ces documents)
appelé Genesis que vous pouvez utiliser dans vos projets.
Pour charger genesis via CDN, fournissez-le à la propriété theme de votre defaultConfig.
...
defaultConfig({
theme: 'genesis' // sera chargé à partir du CDN et injecté dans l'en-tête du document
})
...Pour installer Genesis, installez d'abord le package @formkit/themes.
npm install @formkit/themesEnsuite, dans votre main.js (où que vous démarriez Vue) incluez le theme.css de Genesis (cela suppose que vous utilisez un outil de construction comme Vite, Webpack, Snowpack, ou Nuxt) :
import '@formkit/themes/genesis'Pour des raisons de style, certains attributs sont automatiquement ajoutés et retirés de la section outer de tous les inputs FormKit :
data-type — Le type d'input, text, select, checkbox, etc.data-multiple — Pour les inputs qui acceptent l'attribut multiple, cela sera ajouté lorsque l'input a l'attribut multiple (comme l'input select).data-disabled — Présent lorsqu'un input est désactivé.data-complete — Présent lorsque l'input est "complet". Destiné à être utilisé pour styliser l'input lorsqu'un utilisateur a terminé de remplir l'input (comme une coche verte). Lisez à propos de context.state.complete pour des informations sur les conditions qui font que cela est true.data-invalid — Présent lorsque l'input a des règles de validation échouées et que les messages pour les règles échouées sont visibles.data-errors — Présent lorsque l'input a des erreurs explicitement définies.Vous pouvez utiliser les attributs ci-dessus pour fournir facilement un retour visuel en temps réel aux utilisateurs qui remplissent vos formulaires :
La plupart des utilisateurs voudront appliquer leurs propres styles et classes au balisage fourni par FormKit. FormKit fournit de nombreuses méthodes pour appliquer des classes pour votre projet.
Les classes peuvent être modifiées pour toutes les sections en utilisant l'une des méthodes suivantes (de la plus spécifique à la moins spécifique) :
{section-key}-class. (le plus spécifique)classes.classes.rootClasses. (le moins spécifique)Les classes suivent une hiérarchie stricte. Initialement, les classes sont produites par la fonction rootClasses. Elles peuvent ensuite être modifiées par l'option de configuration classes, puis par la prop classes, et enfin par la prop {section-key}-class. À chacun de ces stades, les classes peuvent être ajoutées, réinitialisées, ou modifiées sélectivement.
Pour ajouter une classe, il suffit de retourner la chaîne de caractères que vous souhaitez ajouter, ou de fournir un objet de classes avec des valeurs booléennes — les propriétés true seront ajoutées :
Les classes produites par toutes les étapes hiérarchiques précédentes peuvent être complètement supprimées en fournissant une classe spéciale (non rendue) $reset soit au format chaîne de caractères, soit au format objet :
Les classes produites par une étape précédente dans la hiérarchie des classes peuvent être supprimées de manière sélective en fournissant un objet avec la valeur false pour la classe que vous souhaitez supprimer ou en fournissant un nom de classe à une propriété {section-key}-class qui commence par $remove: et qui correspond à une classe existante dans la liste des classes. Cela inclut la suppression des classes par défaut de formkit préfixées par formkit- :
En plus des quatre méthodes énumérées ci-dessus, des substitutions plus généralisées sont également disponibles, comme la substitution du schéma d'une entrée, l'utilisation du crochet de nœud classes, ou l'utilisation de slots :
La manière la plus simple de modifier les classes d'un élément à l'intérieur d'une entrée FormKit est via les propriétés {section-key}-class. Pour ajouter une classe à un élément de section spécifique, comme label, il suffit d'ajouter la propriété label-class :
La propriété Classes est similaire à la propriété de classe de clé de section, sauf qu'elle permet de définir des classes sur toutes les sections en même temps :
L'option de configuration des classes est similaire à la propriété Classes, sauf qu'elle s'applique à toutes les entrées auxquelles la configuration est appliquée. Le système de configuration unique de FormKit vous permet d'appliquer des classes globalement sur votre projet ou simplement sur les entrées d'un certain groupe ou formulaire :
FormKit est livré avec une fonction d'aide appelée generateClasses incluse dans @formkit/themes.
La fonction generateClasses prend un objet javascript clé par type d'entrée avec des valeurs d'un sous-objet clé par ${sectionKey} avec des valeurs de chaînes. Avec cette fonction, vous pouvez rapidement appliquer des listes de classes aux sections à l'intérieur des entrées en fonction du type d'entrée donné.
rootClasses est une fonction de configuration qui est responsable
pour produire les classes par défaut pour chaque élément. Cette fonction a déjà une valeur par défaut qui produit toutes les classes par défaut (comme formkit-outer et formkit-label) qui sont livrées avec FormKit - donc remplacer cette seule fonction vous permet de remplacer facilement toutes les classes initiales. Cela en fait un candidat idéal pour écrire des thèmes personnalisés lors de l'utilisation de cadres utilitaires comme Tailwind.
La fonction rootClasses reçoit 2 arguments (respectivement) :
label ou input).La fonction sera appelée une fois pour chaque section et elle doit retourner un objet de classes avec des valeurs booléennes.
Bien que l'utilisation typique de rootClasses soit au niveau de la configuration globale pour appliquer
des classes à l'ensemble de votre projet - vous pouvez également l'utiliser avec la propriété config pour remplacer
un formulaire ou une entrée spécifique dans votre projet avec une liste de classes calculée à partir de la logique
au sein de votre fonction fournie :
Parce que rootClasses est une option de configuration, vous pouvez l'appliquer par entrée, par groupe, ou globalement.
En plus de modifier les classes via la configuration ou les props sur un composant <FormKit>, vous pouvez utiliser les mêmes techniques à l'intérieur du schéma :
Dans le schéma, vous pouvez également modifier les classes d'un élément à l'intérieur d'une entrée via les propriétés {section-key}Class. Par exemple, pour ajouter une classe à la section d'étiquette, vous pouvez ajouter la propriété labelClass :
{
$formkit: 'text',
name: 'email',
// ajoute 'appended-class' à la section "label"
labelClass: 'appended-class'
},Tout comme la propriété classes sur un composant <FormKit>, vous pouvez modifier la liste de classes pour n'importe quelle section d'une entrée avec la propriété classes sur un nœud de schéma :
{
$formkit: 'text',
name: 'email',
// modifie les classes sur les sections "outer" et "inner" de cette entrée
classes: {
outer: 'new-outer-class',
inner: {
$reset: true, // réinitialise les classes sur la section "inner"
'new-inner-class': true
}
},
},Comme la config est transmise aux entrées descendantes, vous pouvez modifier les classes via la config sur un parent, comme un form, list, ou un group, et cela affectera tous les descendants à n'importe quelle profondeur :
Si vous ne l'avez pas déjà fait, ajoutez Tailwind CSS à votre projet en suivant leurs instructions d'installation
FormKit fournit une version Tailwind du thème Genesis que vous pouvez utiliser comme point de départ dans votre propre projet. Pour utiliser ce thème Tailwind pré-fait, copiez le thème suivant dans un fichier (quelque chose comme tailwind-theme.js) dans votre projet.
Maintenant, importez votre thème Tailwind dans votre fichier formkit.config et ajoutez-le à la configuration de votre projet.
Vous devrez importer la fonction d'aide generateClasses du package @formkit/themes ainsi que les icônes de support du package @formkit/icons.
npm install @formkit/themes @formkit/icons// formkit.config.js
import { generateClasses } from '@formkit/themes'
import { genesisIcons } from '@formkit/icons'
import myTailwindTheme from './tailwind-theme.js' // changez pour le chemin de votre thème
export default {
icons: {
...genesisIcons,
},
config: {
classes: generateClasses(myTailwindTheme),
},
}Ensuite, ajoutez le chemin vers votre thème à l'array de contenu de votre fichier tailwind.config — cela est nécessaire pour que Tailwind sache quelles classes vous utilisez dans votre projet.
De plus, vous devriez ajouter le plugin FormKitVariants à votre tailwind.config.js à partir du package @formkit/themes afin de pouvoir utiliser les variantes fournies par FormKit telles que formkit-invalid: dans votre projet.
// tailwind.config.js
const FormKitVariants = require('@formkit/themes/tailwindcss')
module.exports = {
content: [
...
'./tailwind-theme.js',
],
plugins: [FormKitVariants],
}Vous voulez créer votre propre thème Tailwind ? Nous avons écrit un guide qui explique le processus en utilisant à la fois les propriétés de classe en ligne ainsi que l'utilisation du plugin FormKitVariants et de la fonction d'aide generateClasses de @formkit/themes pour créer un thème Tailwind global.
Le guide se termine par une reproduction complète du thème CSS FormKit Genesis écrit en Tailwind.