Mettre en forme des éléments pour les formulaires adaptatifs styling-constructs-for-adaptive-forms
Prérequis prerequisites
Connaissances en matière de CSS et structure LESS.
Éléments personnalisables what-can-be-customized
Cet article répertorie les classes CSS de formulaires adaptatifs disponibles publiquement. Vous pouvez tirer parti de ces classes pour appliquer un style aux divers composants d’un formulaire adaptatif. La mise en forme des composants de création, tels que les boîtes de dialogue et les barres d’état qui affichent des avertissements, ne fait pas partie de cet article. Utilisez ces éléments de style pour créer des styles (en utilisant CSS ou Less) uniquement lorsque vous ne pouvez pas mettre en forme des composants à l’aide de éditeur de thèmes.
Personnalisation des styles dans les formulaires adaptatifs customizing-styles-in-adaptive-forms
La structure LESS simplifie le cas d’utilisation pour personnaliser les styles dans les formulaires adaptatifs. La structure vous permet de définir des styles à l’aide d’un ensemble de variables et de fonctions (mixins). La structure LESS aide à réduire la taille du code regroupé et augmente sa capacité de réutilisation.
Vous pouvez personnaliser les styles des formulaires adaptatifs comme suit :
- Modification du thème
- Modifier le style du composant
Modification du thème changing-theme
Vous pouvez modifier le thème d’un formulaire adaptatif pour vous assurer que son apparence est cohérente avec les pages web auxquelles le formulaire adaptatif est intégré.
Les modifications de l’aspect général du formulaire adaptatif via les propriétés CSS font généralement partie des modifications du thème. Les principales modifications de la convivialité du formulaire adaptatif, telles que les modifications de disposition et le positionnement des composants, ne sont pas considérées comme des modifications du thème.
Selon l’amorçage, l’ensemble suivant de propriétés CSS définit le thème d’une page web :
- Couleur d’arrière-plan
- Bordure (type, couleur, épaisseur)
- Couleur de la police
- Remplissage
- Marge
- Taille de police
- LineHeight
Actuellement, les variables LESS sont définies uniquement pour ces propriétés des différents éléments d’un formulaire adaptatif.
Modification du style de composant changing-component-style
Vous pouvez modifier l’apparence, la disposition, le positionnement et la visibilité des éléments. Pour réaliser cette tâche, créez ou mettez à jour vos fichiers .css personnalisés pour inclure les mises en forme répertoriées dans cet article.
Pour appliquer un style à un formulaire adaptatif, ouvrez le formulaire adaptatif pour l’édition, ouvrez les propriétés du conteneur de formulaires adaptatifs et spécifiez le chemin du fichier CSS personnalisé dans l’onglet de base. Mises en forme par défaut du formulaire adaptatif remplacé par les mises en forme répertoriées dans le fichier .css personnalisé.
Composants components
Les composants décrits dans cet article possèdent leurs classes CSS prédéfinies. Vous pouvez modifier les variables pour modifier les styles dans les classes CSS. Vous pouvez également réécrire la classe entière. Cette section décrit les classes dans les composants et les styles que vous pouvez modifier à l’aide de variables.
Définition de style du conteneur container-styling
Un conteneur est le composant de niveau supérieur. D’autres panneaux et champs se trouvent sous le composant de conteneur.
Définition de style du champ field-styling
Les formulaires adaptatifs incluent différents types de champs. Chaque champ a un nom de classe unique, qui est le nom du champ. Le champ possède également un nom de classe commun guideFieldNode
.
Les champs incluent des libellés, des widgets, des descriptions d’aide (descriptions longues et courtes), ainsi que des icônes d’aide de champ (point d’interrogation).
Définition de style de libellé label-styling
L’élément HTML label utilisé pour le champ inclut les classes left ou top selon que le libellé se trouve en haut ou à gauche.
Les règles CSS pour le libellé sont appliquées à l’aide de la classe guideFieldLabel. Si vous êtes un auteur, remplacez cette règle pour que vos modifications personnalisées soient visibles.
Définition de style des widgets widgets-styling
Selon leur type, les widgets contiennent également des classes. En règle générale, les widgets incluent la classe guideFieldWidget
. Les widgets fournis avec HTML utilisent normalement l’entrée standard de l’élément de HTML et sélectionnent . Le style est effectué en conséquence. Vous ne pouvez pas mettre en forme un widget personnalisé en modifiant les variables.
Restrictions de la définition de style de widget limitations-in-widget-styling
La mise en forme des champs ciblés, obligatoires et désactivés est limitée à l’aide de variables. Vous pouvez toutefois la modifier en remplaçant les styles. La restriction utilisant des variables est principalement fournie pour garder le nombre de variables sous contrôle. La restriction peut être relâchée si l’aspect d’un champ change considérablement car il est dans l’un des états décrits précédemment.
Description d’aide help-description
Un auteur peut spécifier le contenu d’aide dans les champs à l’aide de composants de descriptions longue et courte. Les deux composants ont une classe commune .guideHelpDescription
et une autre classe .short
/.long
, en fonction du type de description. Le contenu d’aide est intégré dans un élément de paragraphe pour remplacer la définition de style de la description. La description de l’aide (longue et courte) est modifiée à l’aide de variables commençant par widgetshelp, comme indiqué dans le tableau suivant :
Termes et conditions terms-and-conditions
Le widget des termes et conditions (TnC
) vous permet de spécifier les termes et conditions. Vous pouvez personnaliser le widget à l’aide des variables décrites dans le tableau suivant.
Bouton button
Les boutons sont également des widgets. Toutefois, leur style est légèrement différent des widgets. Dans les formulaires adaptatifs, l’un des éléments suivants constitue un bouton :
- input[type = text]
- Bouton
- élément avec la classe .button
Code HTML du bouton :
<button type="button" >
<span class="iconButtonicon"></
span>
<span class="iconButtonlabel"></
span>
</button>
Point d’interrogation question-mark
Pour les widgets, un point d’interrogation s’affiche lorsqu’un auteur ajoute une description longue dans le contenu de l’aide. L’icône par défaut fournie dans l’amorçage est utilisée. Pour utiliser une icône personnalisée, vous pouvez personnaliser les icônes d’amorçage.
Tableau table
Vous pouvez modifier le thème de couleur de l’en-tête et des rangées de contenu d’un tableau en utilisant les variables suivantes.
Pièce jointe file-attachment
Le widget Pièce jointe des formulaires adaptatifs vous permet de télécharger des fichiers. Vous pouvez également personnaliser le widget à l’aide des variables.
Styles de navigateur navigator-styles
Il existe quatre types d’onglets de navigateur. Il s’agit notamment des onglets à gauche, en haut, dans l’assistant et en accordéon. Chaque navigateur possède une classe différente.
Voici le code de HTML de l’élément de navigateur d’onglets (similaire aux onglets d’amorçage) :
<li>
tab title
</li>
Accordion navigator is an exception, it has following barebone
structure:
<div class="accordion.navigators">
<div>
<div class = "guideHeader">
<a>
<span class = "guideSummary" ></span>
........................... repeatable buttons, if the repeatable configuration is set ................................
<div class = "repeatableButtons">
<button name="Add" class="Add"/>
<button name="Remove" class="Remove"/>
</div>
</a>
</div>
................................ panel content ..................................
</div>
</div>
Vous pouvez modifier la définition de style du navigateur à l’aide des règles CSS qui sélectionnent les éléments à l’aide de sélecteurs descendants. Par exemple, pour ajouter un style de décoration de texte à la balise d’ancrage :
Navigateur d’onglets en haut :
.tab-navigators
li a {
text-decoration:
underline;
}
Tab navigator on left:
.tab-navigators-vertical
li a {
text-decoration:
underline;
}
Accordion navigator:
.accordion-navigators .guideHeader a .guideSummary {
text-decoration:
underline;
}
Wizard navigator:
.wizard-navigators
li a {
text-decoration:
underline;
}
En outre, il existe des classes pour définir le style des navigateurs d’onglets (gauche et haut) en fonction de la présence de navigateurs imbriqués ou enfants ou de sous-navigateurs.
La classe guideNavIcon fournit une icône par défaut aux navigateurs d’onglets (gauche et haut) et aux navigateurs de l’assistant.
Définition de style du panneau panel-styling
Un panneau comporte une barre d’outils facultative et son contenu.
Le noeud du panneau est divisé en navigateurs et en contenu. Il ``n’y a pas de composant de définition du style séparé pour le contenu. Les variables décrites sont appliquées sur le navigateur ainsi que sur le contenu.
*Le panneau supérieur (RootPanel) ne dispose pas de cette classe.
Styles mobiles mobile-styling
Barre d’en-tête header-bar
Ces variables influent sur la barre d’en-tête visible sur un périphérique mobile ou équipé qui contient un titre de panneau et les navigateurs Suivant et Précédent.
Indicateur de défilement scroll-indicator
Ces variables influent sur l’indicateur de défilement, qui est une flèche orange qui s’affiche sur un périphérique mobile ou un petit écran. Un indicateur de défilement indique qu’il existe du contenu au-delà de la partie visible de l’écran. Vous pouvez faire défiler l’écran vers le bas pour le voir. Lorsque vous atteignez la fin du contenu, la flèche disparaît.
Variables spécifiques à la disposition de la barre d’outils fixe pour mobile mobile-fixed-toolbar-layout-specific-variables
Ces variables dans le tableau suivant influent sur la disposition de la barre d’outils fixe pour mobile.