Composants de style dans le Kit de ressources Microsoft Graph

  • Article

Chaque composant du Kit de ressources Microsoft Graph documente un ensemble de propriétés personnalisées CSS que vous pouvez utiliser pour modifier l’apparence de certains éléments. Vous trouverez les propriétés CSS personnalisées disponibles dans chaque documentation de composant. Par exemple :

.person {
  --person-avatar-size: 34px;
}

<mgt-person class="person" person-query="me" view="fourlines" id="online" show-presence></mgt-person>

Vous ne pouvez pas appliquer de style aux éléments internes d’un composant, sauf si vous fournissez une propriété personnalisée CSS. Les éléments enfants du composant sont hébergés dans un dom d’ombre.

Pour plus de flexibilité, envisagez d’utiliser des modèles personnalisés.

Appliquer des thèmes

Deux thèmes sont disponibles : light et dark. Ces thèmes sont pris en charge automatiquement, car les composants mgt utilisent des éléments web de l’interface utilisateur Fluent. Par défaut, tous les composants sont dans le light thème. Pour basculer vers dark le thème, vous pouvez le faire globalement pour l’ensemble du document à l’aide du mgt-theme-toggle composant, ou vous pouvez mettre à jour le thème d’un composant en définissant les valeurs de jeton CSS personnalisées sur le composant.

Exemple 1 : Thème global utilisant mgt-theme-toggle

À l’aide du composant mgt-theme-toggle , vous pouvez définir les thèmes du document en le plaçant à un emplacement pratique pour votre expérience de thème. Ce composant affiche un bouton bascule que vous pouvez utiliser pour basculer entre light les modes et dark .

<body>
  <mgt-theme-toggle></mgt-theme-toggle>
  <header><mgt-login></mgt-login></header>
  <article><mgt-agenda></mgt-agenda></article>
  <footer></footer>
</body>

Exemple 2 : Thème d’un composant programmatiquement sans le bouton bascule de thème

Vous pouvez thèmer un composant individuel par programmation sans utiliser le theme-toggle composant. Pour ce faire, appelez la applyTheme fonction à partir de @microsoft/mgt qui accepte le mode en tant que light ou dark et l’élément HTML. Par défaut, tous les éléments sont rendus dans le light thème.

Définition d’éléments spécifiques sur un thème sombre

Vous pouvez définir le deuxième mgt-login composant sur dark thème et laisser les deux autres dans light le thème.

<mgt-login id="login-one"></mgt-login>
<mgt-login id="login-two"></mgt-login>
<mgt-login id="login-one"></mgt-login>

import { applyTheme } from "@microsoft/mgt-components";

const loginTwo = document.querySelector("#login-two");

if (loginTwo) {
  applyTheme("dark", loginTwo);
}

Exemple 3 : Personnaliser les jetons CSS d’un composant

Vous pouvez utiliser plusieurs jetons CSS pour appliquer un style à un composant si vous souhaitez remplacer les couleurs de thème actuelles. Consultez la page du composant particulier pour obtenir la liste des jetons disponibles.

Remarque : la personnalisation de ces jetons signifie que vos valeurs définies sont les valeurs par défaut utilisées et que l’utilisation du mgt-theme-toggle composant n’aura aucun effet.

<mgt-people-picker class="people-picker"></mgt-people-picker>

.people-picker {
  --people-picker-selected-option-background-color: orange;
  --people-picker-selected-option-highlight-background-color: red;
  --people-picker-dropdown-background-color: blue;
  --people-picker-dropdown-result-background-color: yellow;
  --people-picker-dropdown-result-hover-background-color: gold;
  --people-picker-dropdown-result-focus-background-color: green;
  --people-picker-no-results-text-color: orange;
  --people-picker-input-background: gray;
  --people-picker-input-border-color: yellow;
  --people-picker-input-hover-background: green;
  --people-picker-input-hover-border-color: red;
  --people-picker-input-focus-background: purple;
  --people-picker-input-focus-border-color: orange;
  --people-picker-input-placeholder-focus-text-color: yellow;
  --people-picker-input-placeholder-hover-text-color: gold;
  --people-picker-input-placeholder-text-color: white;
  --people-picker-search-icon-color: yellow;
  --people-picker-remove-selected-close-icon-color: blue;
  /** You can also change the person tokens **/
  --person-line1-text-color: blue;
  --person-line2-text-color: red;
}

Vous pouvez également utiliser des jetons globaux pour la personnalisation qui s’applique à tous les éléments du DOM. Le kit de ressources définit les jetons globaux CSS personnalisés suivants.

<mgt-file-list></mgt-file-list>

body {
  /**
  * Overrides the default font-family 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, 'BlinkMacSystemFont', 'Roboto', 'Helvetica Neue', sans-serif for dark and light theme.
  */
  --default-font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;

  /**
  * Overrides the default font-size of 14px
  */
  --default-font-size: 20px;
}

Exemple 4 : Personnaliser les jetons CSS de l’interface utilisateur Fluent

Vous pouvez personnaliser les jetons utilisés par l’interface utilisateur Fluent pour appliquer un style au composant d’interface utilisateur Fluent utilisé dans un mgt composant. Fluent UI Web Components fournit une prise en charge de première classe pour les jetons de conception et simplifie la définition, l’obtention et l’utilisation des jetons de conception.

Pour plus d’informations sur la personnalisation des composants web de l’interface utilisateur Fluent, consultez Concevoir des jetons.

Vous pouvez également remplacer les valeurs de jeton de conception existantes par vos propres valeurs. Nous vous déconseillons cette pratique, car la valeur que vous définissez sera utilisée dans le DOM où un mgt composant avec un élément d’interface utilisateur Fluent sous-jacent est utilisé. Il ne change pas dans les light modes de thème ou dark .

<mgt-login></mgt-login>

body {
  /**
  * Overrides the default #ffffff color for dark theme and #000000 color for light theme
  */
  --neutral-foreground-rest: yellow !important;

  /**
  * Overrides the default fluent UI components font-family
  */
  --body-font: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;

}

En light mode thème :

Valeur du jeton de conception Fluent UI remplacée par le jaune en mode clair

En dark mode thème :

Valeur du jeton de conception de l’interface utilisateur Fluent remplacée par le jaune en mode sombre