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 Onglet
  • Présentation
  • Image associée au libellé de l'onglet
  • Image du volet d'onglet
  • Associer une image au volet d'onglet
  • Couleur de fond / Image de fond des onglets
  • Formats d'images
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
Présentation
Pour optimiser le look de vos écrans, WINDEV, WEBDEV et WINDEV Mobile proposent d'utiliser des images ou des couleurs dans vos champs Onglet. Quelques exemples :
  • Image associée au libellé de l'onglet. Cette image est intégrée à côté de l'onglet. Exemple :
  • Image de l'onglet : Cette image permet de re-définir la forme et la couleur de l'onglet. Exemple :
  • Couleur du cadre des onglets. Exemple :
Remarques :
Image associée au libellé de l'onglet
L'image associée au libellé de l'onglet vient s'intégrer à côté du libellé de l'onglet.
WEBDEV - Code Serveur Pour associer une image au libellé du volet d'onglet :
  1. Affichez la description de l'onglet.
  2. Dans l'onglet "Général", sélectionnez l'option "Détails (volet)".
  3. Sélectionnez l'image à intégrer à côté du libellé via le bouton Bouton déroulant présent à côté du champ "Icône du volet" :
    • L'option "Parcourir" permet de sélectionner un fichier accessible depuis votre poste.
    • L'option "Catalogue" permet de sélectionner une image dans le catalogue d'images.
  4. Validez.
Image du volet d'onglet
L'image associée au volet d'onglet remplace le volet d'onglet existant. Il est ainsi possible de redéfinir la forme et la couleur du volet d'onglet.
L'image associée au volet d'onglet doit contenir deux dessins :
  • le dessin correspondant à l'état normal du volet
  • le dessin correspondant à l'état enfoncé du volet
L'ordre des dessins doit être le suivant :
  • WEBDEV - Code Serveur Dessin état normal puis dessin état enfoncé.
Attention : Si le volet est affiché verticalement, l'image du volet devra être verticale.
Cas particulier : image des volets à trois images
Dans ce cas, l'image des volets sera découpée en 3 images automatiquement par WINDEV/WEBDEV.
La règle de découpage est la suivante :
  • l'image est découpée en trois parties
  • la partie 1 correspond à la zone de gauche.
  • la partie 3 correspond à la zone de droite.
  • la partie 2 correspond à la zone du milieu. La taille de cette partie est égale à 16 pixels. Si le volet d'onglet est proportionnel au libellé, cette partie sera répétée autant de fois que nécessaire pour contenir le libellé.
Remarques :
  • Si la partie 2 de votre image est inférieure à 16 pixels, il est conseillé de ne pas utiliser un volet d'onglet proportionnel au libellé et d'intégrer si nécessaire les images supplémentaires ainsi que le libellé à l'image.
  • Si différents états sont définis pour les onglets, l'image associée au volet d'onglet doit contenir toutes les images correspondant aux différents états du volet d'onglet.
WEBDEV - Code ServeurPHP

Associer une image au volet d'onglet

Pour associer une image au volet d'onglet :
  1. Affichez la description de l'onglet.
  2. Dans l'onglet "Style", sélectionnez l'élément "Image des boutons de l'onglet".
  3. Indiquez le chemin de l'image à utiliser pour les volets d'onglets.
  4. Cochez si nécessaire l'option "mode 3 images".
  5. Validez.
Couleur de fond / Image de fond des onglets
WEBDEV - Code Serveur WEBDEV permet de modifier la couleur de fond et l'image de fond utilisée pour chaque volet d'onglet. Pour cela :
  1. Affichez la description de l'onglet.
  2. Dans l'onglet "Général", sélectionnez l'option "Bord, Fond (volet)".
  3. Modifiez l'élément voulu :
    • le champ "Couleur de fond" permet de définir la couleur de fond du volet d'onglet sélectionné.
    • le champ "Image de fond" permet de définir l'image de fond utilisée pour le volet d'onglet sélectionné.
Remarques :
  • Il est possible de modifier la couleur du cadre des onglets dans l'onglet "Style", élément "Boutons des volets d'onglet". Cet élément est nommé "Séparateur", car il permet de séparer les différents volets.
  • De nombreux paramètres des onglets peuvent être personnalisés grâce au style.
Formats d'images
Version minimum requise
  • Version 9
Documentation également disponible pour…
Commentaires
Cliquez sur [Ajouter] pour publier un commentaire

Dernière modification : 24/10/2022

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