Widgets UI

Introduction

Les widgets UI sont des contrôles personnalisés qui améliorent la visualisation de nos champs HTML5 standard. Par exemple, nous pouvons utiliser le widget "International Telephone Input" pour afficher un menu déroulant avec des drapeaux et des indicatifs de pays en tant que placeholders dynamiques. Bien sûr, nous pouvons les personnaliser en utilisant les attributs personnalisés du Form Builder.

Comment utiliser un widget UI

Utiliser les widgets UI est assez simple, il suffit d'aller dans Paramètres du formulaire > Paramètres UI et de sélectionner le widget UI que vous souhaitez utiliser dans votre formulaire.

Par exemple, nous allons sélectionner le widget "International Telephone Input" et cliquer sur Enregistrer.

Voyons le résultat.

Notez que certains widgets nécessitent l'ajout d'une classe CSS à votre champ de formulaire. Pour d'autres, comme dans notre exemple précédent, il suffit de les activer pour les afficher dans le formulaire.

Comment configurer un widget UI

Pour configurer le widget UI que nous souhaitons utiliser, nous devons aller dans le Form Builder > Paramètres du champ > Attributs personnalisés.

Dans notre exemple, les entrées téléphoniques internationales affichent le drapeau du pays de l'utilisateur. Pour cet exemple, nous allons personnaliser ce comportement pour afficher le drapeau de la Grande-Bretagne. Pour cela, nous allons ajouter l'attribut personnalisé suivant :

• Attribut : data-initial-country
• Valeur : gb

Et, Enregistrer tout.

Voyons le résultat.

Attributs personnalisés pour les widgets UI

Nous allons maintenant lister tous les attributs que nous pouvons utiliser pour configurer les widgets UI.

Flatpickr

Remplacez tout champ de date par un sélecteur de date léger et compatible avec tous les navigateurs.

• data-alt-format : Une chaîne de caractères utilisée pour définir comment la date sera affichée dans la zone de saisie. Par exemple : F j, Y
• data-allow-invalid-preload : Permet le préchargement d'une date invalide. Peut être vrai ou faux.
• data-aria-date-format : Définit comment la date sera formatée dans l'aria-label pour les jours du calendrier. Par exemple : F j, Y
• data-default-date : Définit la date initialement sélectionnée au format HTML5 (aaaa-mm-jj). Par exemple : 2021-12-31
• data-default-hour : Valeur initiale de l'élément heure. Par exemple : 12
• data-default-minute : Valeur initiale de l'élément minute. Par exemple : 0
• data-disable : Dates séparées par des virgules au format HTML5. Par exemple : 2022-01-01,2022-01-02,2022-01-03
• data-disable-mobile : Définir sur vrai pour toujours utiliser le sélecteur non natif. Peut être vrai ou faux.
• data-enable-time : Active le sélecteur d'heure. Peut être vrai ou faux.
• data-enable-seconds : Active les secondes dans le sélecteur d'heure. Peut être vrai ou faux.
• data-hour-increment : Ajuste le pas pour la saisie de l'heure (y compris le défilement). Par exemple : 1
• data-inline : Affiche le calendrier en ligne. Peut être vrai ou faux.
• data-max-date : La date maximale qu'un utilisateur peut choisir (incluse). Par exemple : 2021-12-31
• data-min-date : La date minimale à partir de laquelle un utilisateur peut commencer à choisir (incluse). Par exemple : 2021-12-01
• data-minute-increment : Ajuste le pas pour la saisie des minutes (y compris le défilement). Par exemple : 5
• data-mode : "single", "multiple" ou "range". Les champs de date ne sont compatibles qu'avec le mode "single", mais vous pouvez utiliser les autres avec les champs de texte.
• data-next-arrow : HTML pour l'icône de flèche, utilisée pour changer de mois. Par exemple : >
• data-no-calendar : Masque la sélection des jours dans le calendrier. Utilisez-le avec "data-enable-time" pour créer un sélecteur d'heure. Ce n'est pas compatible avec un champ de date, mais vous pouvez l'utiliser avec des champs de texte.
• data-position : Où le calendrier est rendu par rapport à la saisie verticalement et horizontalement, au format "[vertical] [horizontal]". Vertical peut être auto, above ou below (obligatoire). Horizontal peut être left, center ou right. Par exemple : "above" ou "auto center"
• data-prev-arrow : HTML pour l'icône de flèche gauche. Par exemple : <
• data-shorthand-current-month : Affiche le mois en utilisant la version abrégée (par exemple, Sep au lieu de September). Peut être vrai ou faux.
• data-show-months : Le nombre de mois à afficher en même temps lors de l'affichage du calendrier. Par exemple : 1
• data-time-24hr : Affiche le sélecteur d'heure en mode 24 heures sans sélection AM/PM lorsqu'il est activé. Peut être vrai ou faux.
• data-week-numbers : Active l'affichage des numéros de semaine dans le calendrier.
• data-month-selector-type : Comment le mois doit être affiché dans l'en-tête du calendrier. Peut être "dropdown" ou "static". Si "data-show-months" a une valeur supérieure à 1, le mois est toujours affiché en mode statique.

International Telephone Input ¶

Ajoute un menu déroulant de drapeaux aux champs de téléphone et affiche un placeholder pertinent. L'utilisateur saisit son numéro national et le plugin envoie le numéro international standardisé complet.

• data-initial-country : Peut être "auto" ou un code pays à deux lettres, par exemple : "us", "gb" ou "it".

jQuery Mask

Applique des masques sur les champs de formulaire et les éléments HTML.

• data-mask : Pour appliquer votre masque avec l'attribut data-mask, utilisez-le simplement. Par exemple : 00/00/0000
• data-mask-placeholder : Pour ajouter un placeholder à votre masque. Par exemple : "//____"
• data-mask-reverse : Active un masque réversible. Peut être vrai ou faux.
• data-mask-clearifnotmatch : Efface le champ si la saisie ne correspond pas. Peut être vrai ou faux.
• data-mask-selectonfocus : Sélectionne le masque lors du focus. Peut être vrai ou faux.

Valeurs courantes que vous pouvez ajouter à l'attribut personnalisé "data-mask" :

• Date : 00/00/0000
• Heure : 00:00:00
• DateHeure : 00/00/0000 00:00:00
• CEP : 00000-000
• Téléphone : 0000-0000
• Téléphone avec DDD : (00) 0000-0000
• Téléphone US : (000) 000-0000
• Mixte : AAA 000-S0S
• Adresse IP : 099.099.099.099
• Accepte uniquement les chiffres : 0#

jQuery Ui Datepicker

Sélectionnez une date à partir d'un calendrier contextuel ou en ligne sur tout champ 'date'.

• data-date-format : Le format pour les dates analysées et affichées. Par exemple : mm/dd/yy
• data-show-button-panel : Indique si un panneau de boutons doit être affiché sous le calendrier. Peut être vrai ou faux.
• data-change-month : Indique si le mois doit être rendu comme un menu déroulant au lieu de texte. Peut être vrai ou faux.
• data-change-year : Indique si l'année doit être rendue comme un menu déroulant au lieu de texte. Peut être vrai ou faux.
• data-year-range : La plage d'années affichées dans le menu déroulant de l'année. Par exemple : 2019:2022
• data-number-of-months : Le nombre de mois à afficher en même temps. Par exemple : 1
• data-min-date : La date minimale sélectionnable. Par exemple, "+1m +7d" représente un mois et sept jours à partir d'aujourd'hui.
• data-max-date : La date maximale sélectionnable. Par exemple, "+1m +7d" représente un mois et sept jours à partir d'aujourd'hui.
• data-is-rtl : Indique si la langue actuelle est écrite de droite à gauche. Peut être vrai ou faux.
• data-show-week : Lorsqu'il est vrai, une colonne est ajoutée pour afficher la semaine de l'année. Peut être vrai ou faux.
• data-first-day : Définit le premier jour de la semaine : Dimanche est 0, Lundi est 1, etc.

Krajee File Input

Ajoutez la classe CSS "file" au champ de fichier pour améliorer l'entrée de fichier HTML5.

• data-browse-label : L'étiquette à afficher pour le bouton de sélection/parcourir de fichier. Par défaut : Browse...
• data-browse-icon : L'icône à afficher avant l'étiquette pour le bouton de sélection/parcourir de fichier. Par défaut :
• data-remove-label : L'étiquette à afficher pour le bouton de suppression de fichier. Par défaut : Remove .
• data-remove-icon : L'icône à afficher avant l'étiquette pour le bouton de suppression de fichier. Par défaut :   .
• data-cancel-label : L'étiquette à afficher pour le bouton d'annulation du téléchargement de fichier. Par défaut : Cancel .
• data-cancel-icon : L'icône à afficher avant l'étiquette pour le bouton d'annulation du téléchargement de fichier. Par défaut :   .
• data-upload-label : L'étiquette à afficher pour le bouton de téléchargement de fichier. Par défaut : Upload .
• data-upload-icon : L'icône à afficher avant l'étiquette pour le bouton de téléchargement de fichier. Par défaut :   .
• data-show-preview : Indique si l'aperçu du fichier doit être affiché. Peut être vrai ou faux. Par défaut : true .
• data-show-browse : Indique si le bouton de sélection de fichier doit être affiché. Peut être vrai ou faux. Par défaut : true .
• data-show-remove : Indique si le bouton de suppression/effacement de fichier doit être affiché. Peut être vrai ou faux. Par défaut : true .
• data-show-upload : Indique si le bouton de téléchargement de fichier doit être affiché. Peut être vrai ou faux. Par défaut : true .

Krajee Star Rating

Affichez un widget de notation par étoiles sur tout champ avec la classe CSS .rating. De plus, nous pouvons utiliser un thème personnalisé avec les classes CSS suivantes :

• .rating-theme-fas : Thème Font Awesome 5.x
• .rating-theme-uni : Thème Unicode
• .rating-theme-gly : Thème Glyphicons

Nous pouvons personnaliser ce widget en utilisant les attributs personnalisés suivants :

• data-container-class : La classe CSS à ajouter au conteneur de la notation par étoiles. Utile si vous souhaitez préfixer une classe CSS au conteneur et remplacer le style du widget du plugin pour votre cas d'utilisation.
• data-empty-star : Le balisage du symbole à afficher pour une étoile vide. Par défaut :
• data-filled-star : Le balisage du symbole à afficher pour une étoile remplie / mise en évidence :
• data-stars : Le nombre d'étoiles à afficher. Par défaut : 5.
• data-min : La valeur minimale pour l'entrée de notation. Par défaut : 0.
• data-max : La valeur maximale pour l'entrée de notation. Par défaut : 5.
• data-step : Le pas pour incrémenter la notation lorsque chaque étoile est cliquée. Par défaut : 0.5.
• data-rtl : Indique si l'entrée de notation doit être orientée de DROITE À GAUCHE. Peut être vrai ou faux. Par défaut : false .
• data-show-caption : Indique si la légende de notation doit être affichée. Peut être vrai ou faux. Par défaut : true.
• data-size : Taille du contrôle de notation. Un des xl, lg, md, sm ou xs. Par défaut : md .
• data-default-caption : Le texte de la légende par défaut, qui sera affiché lorsque aucune légende n'est configurée pour la notation. Par défaut : {rating} Stars .
• data-star-caption : Le texte de la légende correspondant à une étoile. Par défaut : One star .
• data-star-captions : Le texte de la légende correspondant à plusieurs étoiles. Par défaut : {rating} stars .
• data-clear-button : Le balisage pour afficher le bouton d'effacement. Par défaut :
• data-clear-button-title : Le titre affiché lors du survol du bouton d'effacement. Par défaut : Clear .
• data-clear-caption : La légende affichée lorsque le bouton d'effacement est cliqué. Par défaut : Not Rated .

Select2

Affichez un widget Select2 sur un champ de liste de sélection avec la classe CSS .select2.

Nous pouvons personnaliser ce widget en utilisant les attributs personnalisés suivants :

• data-theme : Le thème à utiliser pour le widget. Peut être classic ou bootstrap . Par défaut : bootstrap .
• data-placeholder : Le placeholder à afficher lorsqu'aucune option n'est sélectionnée. Par exemple : " Select a country ".
• data-allow-clear : Permet à l'utilisateur d'effacer la sélection actuelle. Doit être utilisé avec "data-placeholder " pour fonctionner. Peut être vrai ou faux.
• data-tags : Permet à l'utilisateur de créer de nouvelles options à partir de la saisie de texte dans la zone de recherche. Peut être true ou false .
• data-maximum-selection-length : Par exemple : 2
• data-minimum-input-length : Ne commence la recherche que lorsque l'utilisateur a saisi un certain nombre de caractères. Par exemple : 3
• data-maximum-input-length : Permet de limiter la longueur du terme de recherche afin qu'elle ne dépasse pas une certaine longueur. Par exemple : 20
• data-minimum-results-for-search : Permet de masquer la zone de recherche en fonction du nombre de résultats. Par exemple : 3.