Styles intégrés des composants de formulaire adaptatif inline-styling-of-adaptive-form-components

Adobe recommande d’utiliser les composants principauxde capture de données modernes et extensibles pour créer de nouveaux formulaires adaptatifsou ajouter des formulaires adaptatifs à des pages AEM Sites. Ces composants représentent une avancée significative dans la création de formulaires adaptatifs, ce qui garantit des expériences utilisateur impressionnantes. Cet article décrit l’ancienne approche de la création de formulaires adaptatifs à l’aide de composants de base.

Version
Lien de l’article
AEM as a Cloud Service
Cliquez ici
AEM 6.5
Cet article

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èmes. En outre, vous pouvez appliquer des styles CSS intégrés à différents composants de formulaire adaptatif et prévisualiser les modifications apportées au fur et à mesure. Les styles intégrés remplacent les styles fournis dans le thème.

Application des propriétés de style CSS intégré apply-inline-css-properties

Pour ajouter des styles intégrés à un composant :

  1. Ouvrez votre formulaire dans l’éditeur de formulaires, puis choisissez le mode Style. Pour passer au mode Style, dans la barre d’outils de la page, sélectionnez canvas-drop-down > Style.

  2. Sélectionnez un composant dans la page, puis sélectionnez le bouton Modifier 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 formulaires 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 Objets de formulaire dans la barre latérale répertorie les composants tels que les champs et les panneaux. Les champs et les panneaux sont des composants génériques qui peuvent contenir des composants tels que des zones 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 lui appliquer une mise en forme.

  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. Sélectionnez Terminé pour confirmer les modifications ou sur Annuler pour annuler les modifications.

Exemple : styles intégrés pour un composant de champ example-inline-styles-for-a-field-component

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 du style intégré

Composant de zone de texte avant d’appliquer les propriétés de style intégrées

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 = 2 px

Style de bordure = plein

Couleur de la bordure = #1111

Crée une bordure large noire 2 px autour du champ.
Zone de texte
background-color
#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
100 px
Définit la largeur sur 100 px pour le libellé.
Icône d’aide du champ
Texte > Couleur de police
#2ECC40
Modifie la couleur de la face de l’icône d’aide.
Description longue
text-align
center
Aligne la description longue pour faciliter le centrage.

Style de zone de texte après l’application du style intégré

Composant de zone de texte après application des propriétés de style intégré

En suivant les étapes ci-dessus, vous pouvez sélectionner et mettre en forme d’autres composants, tels que les panneaux, les boutons d’envoi et les boutons radio.

NOTE
Les propriétés de style varient en fonction du composant sélectionné.
recommendation-more-help
19ffd973-7af2-44d0-84b5-d547b0dffee2