DOCUMENTATION EN LIGNE
DE WINDEVWEBDEV ET WINDEV MOBILE

Aide / Développer une application ou un site / Champs, fenêtres et pages / Champs : Types disponibles / Champ Interrupteur à bascule
  • Présentation
  • Utilisation d'une image à 5 états pour le curseur
  • Paramétrage avancé des styles
  • Ajout d'une image via la fonction gImage
WINDEV
WindowsLinuxUniversal Windows 10 AppJavaEtats et RequêtesCode Utilisateur (MCU)
WEBDEV
WindowsLinuxPHPWEBDEV - Code Navigateur
WINDEV Mobile
AndroidWidget AndroidiPhone/iPadWidget IOSApple WatchMac CatalystUniversal Windows 10 App
Autres
Procédures stockées
Personnalisation des champs Interrupteurs à bascule
Présentation
Le champ Interrupteur à bascule est un champ Interrupteur à 2 états (on/off, vrai/faux, oui/non). De nombreuses possibilités de personnalisation sont disponibles via WINDEV, WEBDEV et WINDEV Mobile.
Utilisation d'une image à 5 états pour le curseur
Par défaut, le curseur est défini par un cadre (élément "Cadre du curseur" dans l'onglet "Style" de la description du champ). Pour chaque état (repos, survol, ...), ce cadre peut être personnalisé : couleur de fond, type et couleur de cadre, ...
Il est également possible d'utiliser une image pour définir le curseur :
  1. Affichez la fenêtre de description du champ Interrupteur à bascule.
  2. Dans le volet "Style", sélectionnez l'élément "Cadre du curseur".
  3. Dans la zone "Utiliser", sélectionnez "Image 5 états". Une fenêtre apparaît permettant de sélectionner l'image voulue pour le cadre du curseur.
    L'image utilisée doit être une image en mode 5 états (ou une planche d'images) et non une image "seule".
    Remarque : Si vous disposez simplement d'une image "seule", il est possible de la convertir automatiquement en mode 5 états à l'aide de l'éditeur d'images de WINDEV, WEBDEV et WINDEV Mobile.
  4. Validez.
Paramétrage avancé des styles
Pour obtenir un look très spécifique, il est possible de modifier plus précisément les différents paramètres disponibles dans l'onglet "Style" de la description du champ Interrupteur à bascule.
Pour chaque valeur (On/Off), pour chaque état (normal, survol, ...) et pour chaque élément (cadre de glissière, cadre de curseur, libellé de curseur, ...), il est possible de modifier la police, les couleurs, les images, ... Les combinaisons sont nombreuses !
Il est par exemple possible de personnaliser le cadre du curseur, en modifiant l'arrondi du cadre. Si l'arrondi du cadre a une dimension correspondant à la moitié des dimensions du curseur, le curseur obtenu sera "rond".
Il est par exemple possible d'utiliser l'option "Libellé des modes internes", pour modifier la couleur des libellés non actifs (le libellé #B pour la valeur "OFF" et le libellé #A pour la valeur "ON").
WEBDEV - Code Serveur Sous WEBDEV, les options de paramétrage de libellés permettent de personnaliser encore davantage le champ.
Il est par exemple possible d'appliquer une taille de police différente sur la valeur en cours. La valeur "active" peut ainsi avoir une taille de police de 20 px (alors que le second libellé a une taille de police de 12 px).
Pour obtenir un interrupteur "visuel" dont la couleur peut s'adapter, il est possible d'utiliser des emoji (caractères Unicode spécifiques).
Attention : le visuel affiché est dépendant du système (un même caractère ne sera pas affiché strictement de la même manière sous Windows, sous iOS ou sous Android).
Ajout d'une image via la fonction gImage
Pour personnaliser rapidement les libellés des options tout en conservant le curseur tel qu'il est, il est possible d'ajouter une image au libellé via la fonction gImage. Avec cette méthode, il est cependant nécessaire de faire attention à la couleur des images employées selon la couleur du curseur.
Pour conserver des images visibles dans tous les états, l'idée consiste simplement à permuter les images par programmation lorsque l'utilisateur clique sur le champ (événement "A chaque modification"). Par exemple :
// Adapte l'image affichée dans les libellés
SI MoiMême ALORS
    MoiMême[1].Libellé = gImage(IMG_Nom_Gris) + " Tri par nom"
SINON
    MoiMême[1].Libellé = gImage(IMG_Nom_Blanc) + " Tri par nom"
FIN
Remarque : toutes les fonctions gXXX peuvent être utilisées dans le libellé des valeurs (gPoliceGras, gPoliceSoulignée, ...).
WEBDEV - Code Serveur Sous WEBDEV, la personnalisation du libellé est effectuée par la propriété LibelléHTML. La propriété LibelléHTML permet de spécifier un code HTML en tant que libellé des options. Par exemple :
MoiMême[1].LibelléHTML = "<img src=" + IMG_DATE_GRIS + ">" + " Tri par date"
Version minimum requise
  • Version 24
Documentation également disponible pour…
Commentaires
Cliquez sur [Ajouter] pour publier un commentaire

Dernière modification : 25/05/2022

Signaler une erreur ou faire une suggestion | Aide en ligne locale