Modifier les paramètres de style

Vous pouvez modifier les paramètres de style par défaut de chaque widget dans Experience Builder pour personnaliser des propriétés telles que la taille, la position, l’arrière-plan, les bordures et l’ombre des zones. Les options varient en fonction des contraintes imposées par le type de page que vous y ajoutez ou que vous ajoutez à son conteneur parent (par exemple, une ligne ou une colonne). Ces options contrôlent automatiquement la taille et la position.

Paramètres de style

L’onglet Style (Style) du panneau de configuration du widget inclut des options permettant de modifier l’icône et l’étiquette pour distinguer les widgets lorsque vous configurez votre expérience Web. L’icône et le nom apparaissent dans la vue Outline (Contour) de la page active et dans les listes d’options lorsque vous connectez des widgets.

Au lieu de faire glisser les widgets dans la zone d’affichage pour les déplacer et les redimensionner, vous pouvez définir des valeurs explicites pour leur taille et leur position. Les paramètres de taille et de position définissent la manière dont le widget est positionné sur la page, en fonction de sa largeur, de sa hauteur et de sa localisation. Vous pouvez spécifier ces valeurs en pixels (px) ou en pourcentage (%) pour déterminer le mode d’affichage de votre contenu. Pour les paramètres de taille et de position applicables aux widgets ajoutés à une page plein écran ou une page déroulante, reportez-vous aux sections ci-après.

Les paramètres de style communs à tous les widgets sont les suivants :

• Keep within the parent container (Conserver à l’intérieur du conteneur parent) : empêchez un widget imbriqué d’être déplacé en dehors des limites de son widget parent.
• Background (Arrière-plan) : définissez l’arrière-plan du widget en choisissant une couleur de remplissage ou une image. Si vous choisissez une image, vous pouvez la positionner à l’intérieur des bordures du widget à l’aide de l’option Fit (Ajuster), Fill (Remplir), Center (Centrer), Tile (Tuile) ou Stretch (Étirer). Si vous sélectionnez Fit (Ajuster), le widget affiche la couleur de remplissage de l'arrière-plan autour de l’image.
• Border (Bordure) : définissez la bordure du widget en choisissant sa couleur, son style (tel que tireté ou pointillé) et sa largeur en pixels. Modifiez la taille du rayon (en pixels ou en pourcentage) pour mettre en forme les coins du widget. Verrouillez les paramètres pour synchroniser les rayons des quatre coins.
• Box Shadow (Ombre des zones) : ajoutez un effet d’ombre autour du widget à l’aide des paramètres suivants :
  • Offset X (Décalage X) : définissez la distance horizontale de l’ombre. Une valeur négative place l’ombre à gauche du widget et une valeur positive la place à droite.
  • Offset Y (Décalage Y) : définissez la distance verticale de l’ombre. Une valeur négative place l’ombre au-dessus du widget et une valeur positive la place en dessous.
  • Blur radius (Rayon de flou) : appliquez un effet de flou à l’ombre.
  • Spread radius (Rayon de répartition) : ajustez la taille de l’ombre.
  • Color (Couleur) : sélectionnez une couleur d’ombre.

Mise en page sur une page plein écran

Lorsque vous ajoutez une page plein écran à votre application, vous organisez les widgets dans une mise en page de forme libre. Si vous faites glisser le widget dans la zone d’affichage pour le déplacer ou le redimensionner, les paramètres Position (Position) et Size (Taille) du panneau Style (Style) sont mis à jour en conséquence.

Vous pouvez définir les paramètres Position (Position) suivants :

• Left (Gauche) : indiquez de quelle distance le segment gauche d’un widget est décalé à droite du segment gauche de son conteneur parent.
• Top (Haut) : indiquez de quelle distance le segment supérieur d’un widget est décalé sous le segment supérieur de son conteneur parent.
• Right (Droite) : indiquez de quelle distance le segment droit d’un widget est décalé à gauche du segment droit de son conteneur parent.
• Bottom (Bas) : indiquez de quelle distance le segment inférieur d’un widget est décalé au-dessus du segment inférieur de son conteneur parent.

Les valeurs de la propriété de position ne sont pas toutes appliquées simultanément. Il existe deux combinaisons de paramètres :

• Left (Gauche) et Top (Haut) ou Bottom (Bas)
• Right (Droite) et Top (Haut) ou Bottom (Bas)

Passez du mode Auto (Auto) au mode Custom (Personnalisé) pour choisir la valeur à définir manuellement. Si une valeur de position est définie sur Auto (Auto), cette propriété est définie automatiquement.

Remarque :

Si vous définissez des valeurs personnalisées pour Top (Haut) et Bottom (Bas), la valeur Top (Haut) est utilisée. Si vous définissez des valeurs personnalisées pour Left (Gauche) et Right (Droite), la valeur Left (Gauche) est utilisée lorsque la langue du navigateur se lit de gauche à droite (comme pour l’anglais ou le chinois) et la valeur Right (Droite) est utilisée lorsqu’elle se lit de droite à gauche (comme pour l’hébreu ou l’arabe).

Vous pouvez également modifier l’unité de chaque propriété de position :

• Px : valeur absolue en pixels
• % : pourcentage de la largeur du conteneur (gauche, droite) et de sa hauteur (haut, bas)

Les paramètres Size (Taille) représentent une combinaison des largeur et hauteur du conteneur. Vous pouvez définir des valeurs spécifiques pour Width (Largeur) et Height (Hauteur) ou sélectionner Auto (Auto) pour qu’elles soient définies automatiquement.

Pour davantage de contrôle, modifiez l’option Height mode (Mode de hauteur) :

• Fixed (Fixe) : définissez la largeur et la hauteur séparément. Il s’agit de l’option par défaut.
• Aspect ratio (Proportions) : ne définissez que la valeur de largeur et les proportions entre la largeur et la hauteur.

Exemples

La liste suivante décrit certaines des combinaisons recommandées pour les paramètres de taille et de position :

• Pour une largeur personnalisée, définissez une valeur Left (Gauche) ou Right (Droite) personnalisée et choisissez Auto (Auto) pour l’autre valeur.
• Pour une hauteur personnalisée, définissez une valeur Top (Haut) ou Bottom (Bas) personnalisée et choisissez Auto (Auto) pour l’autre valeur.
• Si vous choisissez Auto (Auto) pour la largeur, définissez des valeurs Left (Gauche) et Right (Droite) personnalisées ou définissez uniquement une valeur personnalisée pour Left (Gauche) ou Right (Droite), puis laissez la largeur s’adapter au contenu du widget.
• Si vous choisissez Auto (Auto) pour la hauteur, définissez des valeurs Top (Haut) et Bottom (Bas) personnalisées ou définissez uniquement une valeur personnalisée pour Top (Haut) ou Bottom (Bas), puis laissez la hauteur s’adapter au contenu du widget.

Blocs sur une page déroulante

Lorsque vous ajoutez une page déroulante à votre application, sa mise en page est organisée en blocs. Les blocs utilisent une mise en page en grille à plusieurs colonnes, telle que celle utilisée dans le widget Row (Ligne).

Les blocs possèdent les paramètres Size (Taille) et Position (Position) suivants :

• Width (Largeur) : définissez une largeur fixe en pourcentage de la page.
• Height (Hauteur) : définissez une valeur de hauteur en pixels ou sélectionnez Auto (Auto) pour définir automatiquement la hauteur de bloc.
• Offset X (Décalage X) : définissez le décalage horizontal en pixels.
• Offset Y (Décalage Y) : définissez le décalage vertical en pixels.

Widgets imbriqués dans un bloc

La largeur des widgets que vous ajoutez à un bloc peut être comprise entre une et 12 colonnes dans la mise en page sous forme de grille du bloc. Vous ne pouvez spécifier que les valeurs de hauteur pour les widgets imbriqués dans un bloc ; leur largeur est contrôlée par la grille. Si vous changez le paramètre de hauteur en Auto (Auto), il est défini automatiquement.

Il existe trois types de paramètres Height (Hauteur) :

• Fit to container (Adapter au conteneur) : utilisez toute la hauteur de son conteneur parent. Il s’agit de l’option par défaut.
• Fixed (Fixe) : définissez une hauteur personnalisée en pixels.
• Aspect ratio (Proportions) : calculez automatiquement la hauteur en fonction de la largeur et des proportions entre la largeur et la hauteur.

Si vous sélectionnez Fixed (Fixe) ou Aspect ratio (Proportions), vous pouvez choisir l’une des options Align (Aligner) suivantes :

• Top (Haut) : alignez le widget verticalement avec la partie supérieure du bloc.
• Bottom (Bas) : alignez le widget verticalement avec la partie inférieure du bloc.
• Center (Centre) : alignez le widget verticalement avec le centre du bloc.