Exercice : styles de composants devant correspondre à votre marque

  • 8 minutes

Au cours de cet exercice, vous apprendrez à utiliser des propriétés CSS personnalisées avec des composants du Kit de ressources Microsoft Graph pour modifier le style de votre application.

Avant de commencer

Comme condition préalable à cet exercice, vous devrez effectuer l’exercice précédent « Modifier le comportement des composants à l’aide d’attributs ».

Appliquer un style au composant Login pour qu’il corresponde à votre personnalisation

Supposons que vous voulez modifier l’apparence du contenu du bouton connecté pour le composant Connexion. Dans la index.html, vous pouvez utiliser la balise <style> dans <head> pour personnaliser des composants.

<head>
  <style>
  </style>
</head>

  1. Pour personnaliser le corps de la page, ajoutez body{} entre les <style> balises. Utilisez la propriété CSS suivante dans le body{} sélecteur :

    • background-color modifie la couleur d’arrière-plan de la page pour suivre la couleur d’arrière-plan du thème
    • color modifie la couleur du texte de la page pour suivre la couleur du texte du thème

  2. Pour personnaliser le composant Connexion , ajoutez mgt-login{} entre les <style> balises. Utilisez les propriétés CSS suivantes dans le mgt-login{} sélecteur :

    • --login-button-padding modifie l’espacement à l’intérieur de l’élément « courrier de l’utilisateur ». Définissez cet élément sur 30px pour obtenir un espace égal depuis le haut, le bas, la gauche et la droite.
    • --login-signed-in-background modifie la couleur d’arrière-plan du bouton en slategrey
    • --login-popup-text-color modifie la couleur de police des fenêtres contextuelles du profil utilisateur en slategrey.

  3. Pour personnaliser le Agenda composant, ajoutez mgt-agenda{} entre les <style> balises. Utilisez les propriétés CSS suivantes dans le mgt-agenda{} sélecteur :

    • --agenda-header-font-size modifie la taille de police de l’en-tête de l’agenda en 24px.
    • --agenda-event-padding modifie l’espacement à l’intérieur des événements en 20px.
    • --agenda-event-background-color modifie la couleur d’arrière-plan des événements en slategrey.
    • --agenda-event-box-shadow modifie l’ombre de la zone d’événement en grey.
    <head>
  <style>
    body {
      background-color: var(--fill-color);
      color: var(--neutral-foreground-rest);
    }
    mgt-login {
      --login-signed-in-background: slategrey;
      --login-button-padding: 30px;
      --login-popup-text-color: slategrey;
    }
    mgt-agenda {
      --agenda-header-font-size: 24px;
      --agenda-event-padding: 20px;
      --agenda-event-background-color: slategrey;
      --agenda-event-box-shadow: grey;
    }
  </style>
</head>

  4. Ajoutons le composant pour activer la couleur du thème. Ouvrez le fichier index.html et ajoutez la mgt-theme-toggle balise à la <body> balise.

    <html>
  <head>
    ...
  </head>
  <body>
    <mgt-theme-toggle></mgt-theme-toggle>
    ...
  </body>
</html>

La version finale de votre fichier index.html présentera comme dans cet exemple :

<!DOCTYPE html>
<html>
<head>
  <script src="https://unpkg.com/@microsoft/mgt@3/dist/bundle/mgt-loader.js"></script>

  <style>
    body {
      background-color: var(--fill-color);
      color: var(--neutral-foreground-rest);
    }
    mgt-login {
      --login-signed-in-background: slategrey;
      --login-button-padding: 30px;
      --login-popup-text-color: slategrey;
    }
    mgt-agenda {
      --agenda-header-font-size: 24px;
      --agenda-event-padding: 20px;
      --agenda-event-background-color: slategrey;
      --agenda-event-box-shadow: grey;
    }
  </style>
</head>
<body>

  <mgt-msal2-provider client-id="[Your-Client-ID]"></mgt-msal2-provider>

  <mgt-theme-toggle></mgt-theme-toggle>
  <mgt-login>
    <template data-type="signed-in-button-content" >
      <div>
        {{personDetails.mail}}
      </div>
    </template>
  </mgt-login>

  <mgt-agenda class="agenda"
      date="June 29, 2023"
      days="3"
      group-by-day>
  </mgt-agenda>

</body>
</html>

Tester votre application dans un navigateur

  1. Dans Visual Studio Code, sélectionnez la combinaison de touches suivante, puis recherchez Live Server :

    • Windows: CTRL+MAJ+P
    • macOS : COMMAND+SHIFT+P

    Exécutez Live Server pour tester votre application.

  2. Ouvrez votre navigateur, puis accédez à http://localhost:3000.

  3. Connectez-vous à l’aide de votre compte développeur Microsoft 365. Acceptez les autorisations de calendrier requises, puis sélectionnez Accepter.

  4. À l’aide du bouton bascule de thème, basculez le thème sur Sombre

  5. Enfin, vous verrez que le programme adapte automatiquement les composants au thème sombre et que le style du bouton connecté a changé.

Cette image montre la version finale de l’application.

Globalement, les composants du Kit de ressources Microsoft Graph sont flexibles en ce qui concerne la personnalisation. Vous pouvez modifier l’apparence des composants à l’aide de propriétés CSS personnalisées, puis les mettre en correspondance avec la personnalisation de votre application.