Show Menu
SUJETS×

Styles intégrés des composants de formulaire adaptatif

Vous pouvez définir l’aspect général et le style d’un formulaire adaptatif en spécifiant les styles à l’aide d’un éditeur de thème . En outre, vous pouvez appliquer des styles CSS intégrés à différents composants de formulaire adaptatif et prévisualiser les modifications apportées à la volée. Les styles intégrés remplacent les styles fournis dans le thème.

Application des propriétés de style CSS intégré

Pour ajouter des styles intégrés à un composant :
  1. Ouvrez votre formulaire dans l’éditeur de formulaire, puis choisissez le mode Style. To change the mode to styling mode, in the page toolbar, tap > Style .
  2. Select a component in the page, and tap the edit button . Les propriétés de style s’ouvrent dans la barre latérale.
    Vous pouvez également sélectionner des composants dans l’arborescence de hiérarchie de formulaire dans la barre latérale. L’arborescence de hiérarchie de formulaire est disponible sous forme d’objets de formulaire dans la barre latérale.
    Vous pouvez également sélectionner un composant dans la barre latérale. Dans le mode Style, vous pouvez afficher les composants répertoriés sous Objets de formulaire. Toutefois, la liste des objets de formulaire de la barre latérale répertorie les composants de listes tels que les champs et les panneaux. Les champs et les panneaux sont des composants génériques qui peuvent contenir des composants, tels qu’une zone de texte et des boutons radio.
    Lorsque vous sélectionnez un composant dans la barre latérale, vous voyez tous les sous-composants répertoriés et les propriétés du composant sélectionné. Vous pouvez sélectionner un sous-composant spécifié et le styliser.
  3. Cliquez sur un onglet de la barre latérale pour spécifier les propriétés CSS. Vous pouvez définir des propriétés telles que les suivantes :
    • Dimensions et position (paramètre d’affichage, remplissage, hauteur, largeur, marge, position, index z, flottant, clair, débordement)
    • Texte (famille de polices, épaisseur, couleur, taille, hauteur de ligne et alignement)
    • Arrière-plan (image et gradient, couleur d’arrière-plan)
    • Bordure (largeur, style, couleur, rayon)
    • Effets (ombre, opacité)
    • Avancé (permet de saisir un CSS personnalisé pour le composant)
  4. De même, vous pouvez appliquer des styles pour d’autres parties d’un composant, tels que Widget, Légende et Aide.
  5. Tap Done to confirm the changes or Cancel to discard the changes.

Exemple : styles en ligne pour un composant de champ

Les images suivantes illustrent une zone de texte avant et après l’application des styles intégrés.
Composant de zone de texte avant l’application des propriétés de style intégré
Notez la modification du style de la zone de texte comme illustré ci-dessous après l’application des propriétés CSS suivantes.
Sélecteur
Propriété CSS
Valeur
Effet
Champ
bordure
Largeur de la bordure = 2px
Style de la bordure = plein
Couleur de la bordure = #1111
Crée une bordure large noire 2px autour du champ
Zone de texte
couleur d’arrière-plan
#6495ED
Modifie la couleur d’arrière-plan en CornflowerBlue (#6495ED)
Remarque : vous pouvez spécifier un nom de couleur ou son code hexadécimal dans le champ Valeur.
Libellé
Dimensions et position > largeur
100px
Définit la largeur sur 100 px pour le libellé
Icône d’aide du champ Texte > Couleur de la police #2ECC40 Modifie la couleur de l’icône d’aide.
Description longue
alignement de texte
centre
Aligne la description longue pour faciliter le centrage
Composant de zone de texte après l’application des propriétés de style intégré
En suivant les étapes ci-dessus, vous pouvez sélectionner et styliser d’autres composants, tels que les panneaux, les boutons d’envoi et les boutons radio.
Les propriétés de style varient en fonction du composant sélectionné.