Style

• Tailwind CSS
  • Construire votre propre thème Tailwind CSS
  • Surcharge de style supplémentaire
• Installer le thème CSS Genesis hérité
• Attributs extérieurs
• Classes personnalisées
• Ajouter des classes
• Réinitialiser des classes
• Supprimer des classes
• Props de classe de section-clé
• Prop Classes
• Configuration des classes
  • Configuration globale des classes
  • Configuration des classes sur un groupe, une liste ou un formulaire
• Utilisation de generateClasses de @formkit/themes
• La fonction rootClasses
• Modification des classes dans le schéma
  • Propriétés de classe de section-clé dans le schéma
  • Propriété classes dans le schéma
  • Configuration dans le schéma

FormKit fournit un balisage robuste et accessible — mais sans supposer vos styles désirés. FormKit propose des thèmes optionnels que vous pouvez utiliser dans votre projet — ou vous pouvez créer le vôtre.

Tailwind CSS

Utilisation de l'interface Web

La manière la plus simple de commencer avec les thèmes FormKit (pour Tailwind) est de se rendre directement sur https://themes.formkit.com, de personnaliser un thème choisi selon vos préférences, puis de sélectionner Télécharger le thème pour recevoir des commandes spécifiques à exécuter à la racine de votre projet.

Thèmes FormKit

Des thèmes Tailwind polyvalents, configurables et sous licence MIT pour utilisation dans vos projets. Passez moins de temps à styliser — plus de temps à construire.

Utilisation du CLI

Alternativement, vous pouvez utiliser le CLI de FormKit pour générer des thèmes pour votre projet. Pour commencer, exécutez la commande suivante dans le même répertoire que votre fichier formkit.config.{ts|js} :

npx formkit theme

Vous serez guidé pour choisir un thème existant comme point de départ pour votre projet. Cette commande créera un fichier formkit.theme.{ts|js} à la racine de votre projet. Pour compléter la configuration, vous devrez utiliser les rootClasses de ce fichier de thème dans votre formkit.config.{ts|js} :

// formkit.config.ts
import { fr } from '@formkit/i18n'
import { defaultConfig } from '@formkit/vue'
import { rootClasses } from './formkit.theme'

export default defaultConfig({
  locales: { fr },
  locale: 'fr',
  config: {
    rootClasses,
  },
})

Enfin, vous devrez ajouter le fichier formkit.theme.{ts|js} à la propriété content de votre fichier de configuration Tailwind. Cela garantira que les styles du thème soient inclus dans le CSS de votre projet :

// tailwind.config.js
/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./app.vue",
    "./formkit.theme.ts" // <-- ajoutez votre fichier de thème
  ],
  darkMode: 'class',
  theme: {
    extend: {},
  },
  plugins: [],
}

Si vous exécutez la commande à nouveau, vous serez redirigé vers https://themes.formkit.com où vous pourrez personnaliser votre thème choisi.

# avec un fichier formkit.theme existant à la racine de votre projet
> npx formkit theme
? Found local theme file for <themeName>, edit this theme? › (Y/n)

Construire votre propre thème Tailwind CSS

Vous voulez créer votre propre thème Tailwind ? Consultez notre thème de démarrage — qui est fortement commenté — pour commencer. Vous pouvez également suivre notre guide, "Créer un thème Tailwind CSS" pour suivre étape par étape le processus de création de thème.

Surcharge de style supplémentaire

Continuez à lire pour apprendre comment remplacer davantage les classes qui accompagnent le thème FormKit que vous avez choisi aux niveaux global, formulaire et entrée.

Installer le thème CSS Genesis hérité

Utilisation CDN

Pour charger genesis via CDN, fournissez-le à la propriété theme de votre defaultConfig.

...
defaultConfig({
  theme: 'genesis' // sera chargé depuis le CDN et injecté dans l'en-tête du document
})
...

Importation directe

Pour installer Genesis, installez d'abord le paquet @formkit/themes.

npm install @formkit/themes

Ensuite, dans votre main.js (là où vous démarrez Vue) incluez le theme.css de Genesis (cela suppose que vous utilisez un outil de build comme Vite, Webpack, Snowpack ou Nuxt) :

import '@formkit/themes/genesis'

Attributs extérieurs

Pour des raisons de style, certains attributs sont automatiquement ajoutés à et retirés de la section outer de tous les entrées FormKit :

• data-type — Le type d'entrée, text, select, checkbox, etc.
• data-multiple — Pour les entrées qui acceptent l'attribut multiple, cela sera ajouté lorsque l'entrée a l'attribut multiple (comme l'entrée select).
• data-disabled — Présent lorsque une entrée est désactivée.
• data-complete — Présent lorsque l'entrée est "complète". Destiné à être utilisé pour styliser l'entrée lorsqu'un utilisateur a terminé de la remplir (comme une coche verte). Lisez à propos de context.state.complete pour savoir quelles conditions rendent cela vrai.
• data-invalid — Présent lorsque l'entrée 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'entrée 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 remplissant vos formulaires :

Classes personnalisées

La plupart des utilisateurs voudront appliquer leurs propres styles et classes au balisage fourni par FormKit. FormKit offre de nombreuses méthodes pour appliquer des classes à votre projet.

Les classes peuvent être modifiées pour toutes les sections en utilisant l'une des méthodes suivantes (de la plus haute à la plus basse spécificité) :

• Les props {section-key}-class. (la plus spécifique)
• La prop classes.
• L'option de configuration classes.
• La fonction de configuration rootClasses. (la 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. À chacune de ces étapes, les classes peuvent être ajoutées, réinitialisées, ou modifiées sélectivement.

Ajouter des classes

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 :

Réinitialiser des classes

Les classes produites par toutes les étapes antérieures de la hiérarchie 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 :

Supprimer des classes

Les classes produites par une étape antérieure de la hiérarchie des classes peuvent être sélectivement supprimées en fournissant un objet avec la valeur false pour la classe que vous souhaitez supprimer ou en fournissant un nom de classe à une prop {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- :

Props de classe de section-clé

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 props {section-key}-class. Pour ajouter une classe à un élément de section spécifique, comme label, vous ajoutez simplement la prop label-class :

Prop Classes

La prop classes est similaire à la prop de classe de section-clé, sauf qu'elle permet de définir des classes pour toutes les sections en même temps :

Configuration des classes

L'option de configuration des classes est similaire à la prop 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 juste sur des entrées dans un certain groupe ou formulaire :

Configuration globale des classes

Configuration des classes sur un groupe, une liste ou un formulaire

Utilisation de generateClasses de @formkit/themes

FormKit est livré avec une fonction d'assistance 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 de caractères. Avec cette fonction, vous pouvez rapidement appliquer des listes de classes aux sections à l'intérieur des entrées en fonction du type d'une entrée donnée.

La fonction rootClasses

rootClasses est une fonction de configuration qui est responsable de 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 fonction unique 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 frameworks utilitaires comme Tailwind.

La fonction rootClasses reçoit 2 arguments (respectivement) :

• La clé de section (comme label ou input).
• Le nœud de l'entrée.

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 prop 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 :

Modification des classes dans le schéma

En plus de modifier les classes via la configuration ou les propriétés sur un composant <FormKit>, vous pouvez utiliser les mêmes techniques au sein d'un schéma :

Propriétés de classe de section-clé dans le schéma

Dans un 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 label, vous pouvez ajouter la propriété labelClass :

{
  $formkit: 'text',
  name: 'email',
  // ajoute 'appended-class' à la section "label"
  labelClass: 'appended-class'
},

Propriété classes dans le schéma

Tout comme la propriété classes sur un composant <FormKit>, vous pouvez modifier la liste des 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
    }
  },
},

Configuration dans le schéma

Étant donné que la configuration est transmise aux entrées descendantes, vous pouvez modifier les classes via la configuration sur un parent, tel qu'un form, une list, ou un group, et cela affectera tous les descendants à n'importe quelle profondeur :