Modifier l’apparence par défaut des composants

  • Rversion finale: Xanadu
  • Mis à jour 1 août 2024
  • 6 minutes de lecture

    • Définissez les styles des composants et des wrappers pour modifier l’aspect par défaut.

    Cette vidéo vous montre comment effectuer la procédure suivante.

    Avant de commencer

    Rôle requis : ui_builder_admin

    Pourquoi et quand exécuter cette tâche

    Cette tâche décrit comment ajouter des styles aux composants et aux wrappers (tels que le corps, les mises en page en colonnes ou une colonne) contenant des composants. Personnalisez le style des composants en sélectionnant le composant dans l’arborescence de contenu ou appliquez des styles à plusieurs composants en plaçant les composants à l’intérieur d’une enveloppe.

    Pour en savoir plus sur l’ajout d’un style à l’ensemble de votre expérience, reportez-vous à la section Gérer le style visuel des expériences du générateur d'IU.

    Cette tâche s’applique au nouveau système de mise en page introduit dans Xanadu. Si votre page utilise l’ancien système de mise en page, reportez-vous à la section Ajouter un style à un composant à l’aide de l’ancien système de mise en page pour plus d’informations.

    Remarque :
    Au fur et à mesure que vous ajoutez et configurez des composants sur la page, l’étape affiche votre travail. Si vous apportez des modifications et que les mises à jour ne se chargent pas à l’étape, sélectionnez l’icône Ouvrir le menu , puis sélectionnez Développeur > étape de rechargement. Le rechargement de l’étape affiche vos changements, mais ne les enregistre pas. Pour enregistrer votre travail, sélectionnez Enregistrer en haut à droite.

    Vue Expérience avec le menu Ouvrir sélectionné affichant les options Développeur et Étape de rechargement.

    Procédure

    1. Accédez à la Tout > Cadre de travail Now Experience > Générateur d'IU.
    2. Ouvrez une expérience dans laquelle travailler ou créez une expérience en sélectionnant Créer > Expérience.
      Consultez la rubrique Configurer la façon dont les utilisateurs interagissent avec vos applications dans Générateur d'IU pour plus d’informations sur la création d’expériences.
    3. Créez ou ouvrez une page ou une variante de page.
      Pour plus d’informations sur la création d’une page dans le générateur d’IU, voir Créer une page dans le générateur d’IU.
    4. Dans le panneau Contenu, sélectionnez un composant ou une couche (par exemple, Corps, une mise en page en colonne ou une colonne) pour lequel vous souhaitez ajouter un style.
    5. Pour Corps ou composant, sélectionnez l’onglet Styles dans le panneau de configuration.
      Onglet Styles du panneau de configuration.
    6. Utilisez les représentations visuelles de l’onglet Styles pour choisir ce qui convient le mieux à l’apparence de votre page.
      Accessibilité (mise en page en colonnes et colonne)
      Spécifie les paramètres d’accessibilité tels que le nom de la région ARIA, le niveau d’en-tête de la région ARIA, le rôle ARIA et l’inclusion de l’en-tête ARIA. Pour plus d’informations, consultez la documentation ARIA sur developer.servicenow.com.
      Alignement (colonne et composant)
      Pour une colonne, définit la façon dont les composants s’alignent dans la colonne en tant que groupe. Pour un composant, définit le mode d’alignement du composant dans l’élément de mise en page parent, tel qu’une colonne ou une mise en page en colonne.
      Arrière-plan (corps, disposition en colonne, colonne et composant)
      Définit la couleur d’arrière-plan derrière l’élément de mise en page. Sélectionnez une couleur dans l’onglet Mes couleurs du sélecteur de couleurs, où vous pouvez afficher les couleurs disponibles dans une grille ou une liste. Vous pouvez également utiliser l’onglet Personnalisé pour spécifier n’importe quelle couleur au format HEX, RVB ou TSL.
      Options de couleur d’arrière-plan dans l’onglet Liste.
      Bordure (disposition en colonne, colonne et composant)
      Ajoute une bordure autour du contenu. La bordure est placée à l’intérieur immédiat de la marge et à l’extérieur immédiat du rembourrage. Spécifiez l’épaisseur de bordure, le type, la couleur et la forme d’angle. Pour les composants, vous avez la possibilité d’utiliser un CSS personnalisé pour la bordure.
      Option de bordure développée affichant les options d’épaisseur, de type, de couleur et de forme d’angle.
      Mise en page (Corps, Mise en page en colonnes et Colonne)
      Pour le corps et la colonne, spécifie la direction, l’alignement et la justification du contenu. Pour la mise en page en colonne, spécifie le nombre de colonnes et l’écart entre les colonnes (espace entre les colonnes).
      Cliché instantané (disposition en colonne, colonne et composant)
      Ajoute des effets d'ombre autour du contenu. Vous avez la possibilité d’utiliser un CSS personnalisé.
      Dimensionnement (composant)
      Pour les composants applicables, définit la hauteur et la largeur par défaut, minimum et maximum du composant (en px, %, em, rem ou une valeur personnalisée). Cette valeur est pertinente lorsque la fenêtre du navigateur est redimensionnée.
      Option de dimensionnement développée en affichant les options de largeur et de hauteur.
      Espacement (corps, disposition en colonnes et composant)
      Marge définit la taille de l’espace à l’intérieur immédiat du corps, de la disposition en colonnes ou du composant. Remplissage définit la taille de l’espace à l’extérieur immédiat du corps, de la disposition en colonnes ou du composant. Sélectionnez Marge ou Remplissage pour définir la même taille pour les quatre côtés.
      Options d’espacement des marges et des marges intérieures.
      Vous pouvez définir la taille de chaque marge ou côté de remplissage en sélectionnant le paramètre actuel, puis en sélectionnant une option.

      Option d’espacement avec paramètres de marge et de remplissage pour les quatre côtés du corps, la disposition en colonnes ou le composant.

    7. Facultatif : Pour le corps et les composants, vous pouvez modifier le code CSS en sélectionnant le lien Afficher et modifier CSS en bas de l’onglet Styles .
      L’onglet Styles affiche un éditeur de code de styles CSS. Les propriétés CSS suivantes sont les plus couramment utilisées :
      • couleur d’arrière-plan
      • image d’arrière-plan
      • Style de bordure
      • largeur de bordure
      • couleur de bordure
      • rayon de bordure
      • ombre de boîte
      • hauteur
      • hauteur minimale
      • hauteur maximale
      • marge
      • déborder
      • Marge intérieure
      • largeur
      • largeur minimale
      • largeur maximale
      • index z
      Éditeur de code de styles CSS.
      Important :
      Certains composants contiennent des configurations d’application de style intégrées que vous ne pouvez pas remplacer par CSS dans Générateur d'IU. Pour en savoir plus sur le remplacement de ces configurations de style, reportez-vous à la section Gérer le style visuel des expériences du générateur d'IU.
    8. Dans l’en-tête principal, sélectionnez Enregistrer pour enregistrer vos modifications.

    Ajouter un style à un composant à l’aide de l’ancien système de mise en page

    Définissez des styles CSS pour un composant afin de changer son apparence par défaut.

    Avant de commencer

    Rôle requis : ui_builder_admin

    Pourquoi et quand exécuter cette tâche

    Cette tâche décrit comment ajouter des styles à la couche contenant votre composant, ce qui est généralement recommandé au lieu d’appliquer des styles directement au composant. Assurez-vous que le composant dont vous souhaitez définir les styles est placé dans un composant de conteneur pour placer le composant dans une enveloppe. La couche de votre composant est d’un niveau supérieure à celle du composant dans la hiérarchie de contenu et est étiquetée par défaut comme Principale.

    Pour ajouter un style à une page entière, vous pouvez utiliser un CSS basé sur des normes dans le wrapper de la page. Pour en savoir plus sur l’ajout d’un style à l’ensemble de votre expérience, reportez-vous à la section Gérer le style visuel des expériences du générateur d'IU.

    Procédure

    1. Accédez à la Tout > Cadre de travail Now Experience > Générateur d'IU.
    2. Ouvrez une expérience dans laquelle travailler ou créez une expérience en sélectionnant Créer > Expérience.
      Consultez la rubrique Configurer la façon dont les utilisateurs interagissent avec vos applications dans Générateur d'IU pour plus d’informations sur la création d’expériences.
    3. Créez ou ouvrez une page ou une variante de page.
      Pour plus d’informations sur la création d’une page dans le générateur d’IU, voir Créer une page dans le générateur d’IU.
      Remarque :
      Un composant doit être placé dans un conteneur avant d’ajouter des styles au composant.
    4. Sélectionnez le conteneur contenant le composant auquel vous souhaitez ajouter un style.
      Le conteneur est généralement d’un niveau supérieur au composant de l’arborescence de contenu.
      L’onglet Styles s’affiche dans le panneau de configuration.
    5. Dans la fenêtre Styles CSS, entrez des propriétés et des valeurs CSS basées sur des normes.
      Les propriétés CSS suivantes sont les plus couramment utilisées pour appliquer des styles aux composants dans les conteneurs :
      • couleur d’arrière-plan
      • image d’arrière-plan
      • Style de bordure
      • largeur de bordure
      • couleur de bordure
      • rayon de bordure
      • ombre de boîte
      • hauteur
      • hauteur minimale
      • hauteur maximale
      • marge
      • déborder
      • Marge intérieure
      • largeur
      • largeur minimale
      • largeur maximale
      • index z
      Important :
      Certains composants contiennent des configurations d’application de style intégrées que vous ne pouvez pas remplacer par du CSS dans Générateur d'IU. Pour en savoir plus sur le remplacement de ces configurations de style, reportez-vous à la section Gérer le style visuel des expériences du générateur d'IU.
    6. Dans l’en-tête principal, sélectionnez Enregistrer pour enregistrer vos modifications.
      Figure 1. Ajouter un style à un composant dans le panneau de configuration des styles
      Onglet Styles CSS : option de styles qui peut être utilisée pour ajouter un style au corps ou à un composant à l’aide d’un CSS basé sur des normes.