Widgets d'interface utilisateur

Introduction
Comment utiliser un widget d'interface utilisateur
Comment configurer un widget d'interface utilisateur
Attributs personnalisés pour les widgets d'interface utilisateur

Introduction

Les widgets d'interface utilisateur sont des contrôles personnalisés qui améliorent la visualisation de nos champs HTML5 standard. Par exemple, nous pouvons utiliser le widget « Saisie téléphonique internationale » pour afficher une liste déroulante avec des drapeaux et des codes de pays comme espaces réservés dynamiques. Bien entendu, nous pouvons les personnaliser en utilisant les attributs personnalisés du Form Builder.

Comment utiliser un widget d'interface utilisateur

L'utilisation des widgets d'interface utilisateur est assez simple, il suffit d'aller dans Paramètres du formulaire > Paramètres d'interface utilisateur et de sélectionner le widget d'interface utilisateur 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.

Tenez compte du fait que certains widgets nécessitent d'ajouter 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 d'interface utilisateur

Pour configurer le widget d'interface utilisateur que nous souhaitons utiliser, nous devons accéder au Générateur de formulaires > Paramètres de 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 : données-initiales-pays
Valeur : Go

Et, sauvez tout.

Voyons le résultat.

Attributs personnalisés pour les widgets d'interface utilisateur

Nous allons maintenant lister tous les attributs que nous pouvons utiliser pour configurer les widgets de l'interface utilisateur.

Flatpickr

Remplacez n'importe quel champ de date par un sélecteur de date léger multi-navigateurs.

data-alt-format : Une chaîne de caractères utilisée pour définir la façon dont 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. Cela peut être vrai ou faux.
data-aria-date-format : Définit comment la date sera formatée dans l'aria-label pour les jours calendaires. Par exemple : F j, Y
data-default-date : Définit la date initiale sélectionnée au format HTML5 (aaaa-mm-jj). Par exemple : 2021-12-31
data-default-hour : Valeur initiale de l'élément hour. 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éfini sur true pour toujours utiliser le sélecteur non natif. Cela peut être vrai ou faux.
data-enable-time : active le sélecteur de temps. Cela peut être vrai ou faux.
data-enable-seconds : Active les secondes dans le sélecteur de temps. Cela 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. Cela 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
mode données : "simple", "multiple" ou "plage". Les champs Date ne sont compatibles qu'avec le mode "simple", mais vous pouvez utiliser les autres avec les champs Texte.
data-next-arrow : HTML pour l'icône en forme de flèche, utilisée pour changer de mois. Par exemple : >
data-no-calendar : Masque la sélection du jour dans le calendrier. Utilisez-le avec "data-enable-time" pour créer un sélecteur de temps. Ceci n'est pas compatible avec un champ Date, mais vous pouvez l'utiliser avec des champs Texte.
data-position : Où le calendrier est rendu par rapport à l'entrée verticalement et horizontalement Au format "[vertical] [horizontal]". La verticale peut être automatique, au-dessus ou en dessous (obligatoire). L'horizontale peut être à gauche, au centre ou à droite. Par exemple : « au-dessus » ou « centre automatique »
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 (c'est-à-dire septembre au lieu de septembre). Cela 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é. Cela 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. Il peut être « déroulant » ou « statique ». Si « data-show-months » a une valeur supérieure à 1, le mois est toujours affiché comme statique.

Entrée téléphonique internationale ¶

Ajoute une liste déroulante d'indicateurs aux champs Téléphone et affiche un espace réservé pertinent. L'utilisateur saisit son numéro national et le plugin envoie le numéro international standardisé complet.

data-initial-country : Il peut s'agir de "auto" ou d'un code de pays à deux lettres, par exemple : "us", "gb" ou "it".

jQuery Masque

Créez 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 espace réservé à votre masque. Par exemple: " / /____"
data-mask-reverse : Activation d'un masque réversible. Cela peut être vrai ou faux.
data-mask-clearifnotmatch : Effacer le champ s'il ne correspond pas. Cela peut être vrai ou faux.
data-mask-selectonfocus : Sélectionnez Masque sur la mise au point. Cela peut être vrai ou faux.

Valeurs communes 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 aux États-Unis : (000) 000-0000
Mixte : AAA 000-S0S
Adresse IP : 099.099.099.099
Accepter uniquement les chiffres : 0#

jQuery Ui Datepicker

Sélectionnez une date dans un calendrier contextuel ou en ligne sur n'importe quel champ « date ».

data-date-format : Le format des dates analysées et affichées. Par exemple : mm/jj/aa
data-show-button-panel : s'il faut afficher un volet de boutons sous le calendrier. Cela peut être vrai ou faux.
data-change-month : indique si le mois doit être affiché sous forme de liste déroulante au lieu de texte. Cela peut être vrai ou faux.
data-change-year : indique si l'année doit être affichée sous forme de liste déroulante au lieu de texte. Cela peut être vrai ou faux.
data-year-range : La plage d’années affichée dans la liste déroulante des années. 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 dessinée de droite à gauche. Cela peut être vrai ou faux.
data-show-week : Lorsque c'est vrai, une colonne est ajoutée pour afficher la semaine de l'année. Cela peut être vrai ou faux.
data-first-day : Définissez le premier jour de la semaine : dimanche est 0, lundi est 1, etc.

Entrée de fichier Krajee

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

data-browse-label : L'étiquette à afficher pour le bouton de sélection de fichiers/parcourir. Par défaut, Parcourir...
data-browse-icon : L'icône à afficher avant l'étiquette du bouton de sélection de fichiers/parcourir. La valeur par défaut est
data-remove-label : L'étiquette à afficher pour le bouton de suppression de fichier. La valeur par défaut est Supprimer .
data-remove-icon : L'icône à afficher avant l'étiquette du bouton de suppression de fichier. La valeur par défaut est .
data-cancel-label : L'étiquette à afficher pour le bouton d'annulation du téléchargement de fichier. La valeur par défaut est Annuler .
data-cancel-icon : L'icône à afficher avant l'étiquette du bouton d'annulation du téléchargement de fichier. La valeur par défaut est .
data-upload-label : L'étiquette à afficher pour le bouton de téléchargement de fichier. Par défaut, Télécharger .
data-upload-icon : L'icône à afficher avant l'étiquette du bouton de téléchargement de fichier. La valeur par défaut est .
data-show-preview : s'il faut afficher l'aperçu du fichier. Cela peut être vrai ou faux. La valeur par défaut est true .
data-show-browse : s'il faut afficher le bouton de navigation dans les fichiers. Cela peut être vrai ou faux. La valeur par défaut est true .
data-show-remove : s'il faut afficher le bouton supprimer/effacer le fichier. Cela peut être vrai ou faux. La valeur par défaut est true .
data-show-upload : s'il faut afficher le bouton de téléchargement de fichier. Cela peut être vrai ou faux. La valeur par défaut est true .

Nombre d’étoiles de Krajee

Affichez un widget Star Rating sur n'importe quel champ avec la .rating . Nous pouvons également 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 notation par étoiles. Ceci est 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 de symbole à afficher pour une étoile vide. La valeur par défaut est :
data-filled-star : Le balisage du symbole à afficher pour une étoile remplie/mis en surbrillance :
data-stars : Le nombre d'étoiles à afficher. La valeur par défaut est 5.
data-min : La valeur minimale pour l'entrée de notation. La valeur par défaut est 0.
data-max : La valeur maximale pour l’entrée de notation. La valeur par défaut est 5.
data-step : L'étape pour incrémenter la note lorsque chaque étoile est cliquée. La valeur par défaut est 0,5.
data-rtl : indique si l'entrée de notation doit être orientée de DROITE À GAUCHE. Cela peut être vrai ou faux. La valeur par défaut est false .
data-show-caption : indique si la légende de la note doit être affichée. Cela peut être vrai ou faux. La valeur par défaut est vrai.
data-size : Taille du contrôle de notation. Un parmi xl, lg, md, sm ou xs. La valeur par défaut est md .
data-default-caption : Le texte de la légende par défaut, qui sera affiché lorsqu'aucune légende n'est configurée pour la note. La valeur par défaut est {rating} étoiles .
data-star-caption : Le texte de la légende correspondant à une étoile. La valeur par défaut est Une étoile .
data-star-captions : Le texte de la légende correspondant à plusieurs étoiles. La valeur par défaut est {rating} étoiles .
data-clear-button : Le balisage pour afficher le bouton d’effacement. La valeur par défaut est
data-clear-button-title : Le titre affiché au survol du bouton d'effacement. La valeur par défaut est Effacer .
data-clear-caption : La légende affichée lorsque le bouton Effacer est cliqué. La valeur par défaut est Non classé .

Sélectionnez2

Affichez un widget Select2 sur un champ Select List avec la .select2 .