Formatieren von Komponenten im Microsoft Graph-Toolkit

Artikel
09/03/2023

Jede Komponente des Microsoft Graph-Toolkits dokumentiert einen Satz benutzerdefinierter CSS-Eigenschaften , mit denen Sie das Aussehen und Verhalten bestimmter Elemente ändern können. Die verfügbaren benutzerdefinierten CSS-Eigenschaften finden Sie in den einzelnen Komponentendokumenten. Zum Beispiel:

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

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

Sie können interne Elemente einer Komponente nur formatieren, wenn Sie eine benutzerdefinierte CSS-Eigenschaft bereitstellen. Die untergeordneten Komponentenelemente werden in einem Schatten dom gehostet.

Um mehr Flexibilität zu erzielen, sollten Sie die Verwendung benutzerdefinierter Vorlagen in Betracht ziehen.

Anwenden von Designs

Es sind zwei Designs verfügbar: light und dark. Diese Designs werden automatisch unterstützt, da die mgt-Komponenten Fluent UI-Webelemente verwenden. Standardmäßig befinden sich alle Komponenten im light Design. Um zum Design zu dark wechseln, können Sie dies global für das gesamte Dokument mithilfe der mgt-theme-toggle -Komponente tun, oder Sie können das Design für eine Komponente aktualisieren, indem Sie die benutzerdefinierten CSS-Tokenwerte für die Komponente festlegen.

Beispiel 1: Globales Design mit mgt-theme-toggle

Mithilfe der mgt-theme-toggle-Komponente können Sie das Design für das Dokument festlegen, indem Sie es an einer beliebigen Stelle platzieren, die für Ihre Designerfahrung geeignet ist. Diese Komponente rendert einen Umschalter, mit dem Sie zwischen light den Modi und dark wechseln können.

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

Beispiel 2: Programmgesteuertes Design einer Komponente ohne Designschalter

Sie können eine einzelne Komponente programmgesteuert designen, ohne die Komponente zu theme-toggle verwenden. Dies wird erreicht, indem die applyTheme Funktion von @microsoft/mgt aufgerufen wird, die im Modus als light oder dark und das HTML-Element akzeptiert. Standardmäßig werden alle Elemente im light Design gerendert.

Festlegen bestimmter Elemente auf dunkles Design

Sie können die zweite mgt-login Komponente auf dark Design festlegen und die anderen beiden im light Design belassen.

<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);
}

Beispiel 3: Anpassen von CSS-Token einer Komponente

Sie können mehrere CSS-Token verwenden, um eine Komponente zu formatieren, wenn Sie die aktuellen Designfarben überschreiben möchten. Überprüfen Sie die Jeweilige Komponentenseite, um die Liste der verfügbaren Token abzurufen.

Hinweis: Das Anpassen dieser Token bedeutet, dass Ihre Festgelegtenwerte die Standardwerte sind, die verwendet werden, und die Verwendung der mgt-theme-toggle Komponente hat keine Auswirkungen.

<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;
}

Sie können auch globale Token für die Anpassung verwenden, die für alle Elemente im DOM gilt. Das Toolkit definiert die folgenden benutzerdefinierten globalen CSS-Token.

<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;
}

Beispiel 4: Anpassen von CSS-Token der Fluent-Benutzeroberfläche

Sie können die von Fluent UI verwendeten Token anpassen, um die in einer mgt Komponente verwendete Fluent-UI-Komponente zu formatieren. Fluent UI Web Components bietet erstklassige Unterstützung für Designtoken und vereinfacht das Festlegen, Abrufen und Verwenden von Designtoken.

Ausführliche Informationen zum Anpassen der Fluent UI-Webkomponenten finden Sie unter Entwerfen von Token.

Alternativ können Sie vorhandene Entwurfstokenwerte mit Ihren eigenen Werten überschreiben. Diese Vorgehensweise wird nicht empfohlen, da der von Ihnen festgelegte Wert im gesamten DOM verwendet wird, in dem eine mgt Komponente mit einem zugrunde liegenden Fluent UI-Element verwendet wird. Sie ändert sich nicht im light Designmodus oder dark im Designmodus.

<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;

}

Im light Designmodus:

Wert des Fluent UI-Entwurfstokens im hellen Modus in Gelb geändert

Im dark Designmodus:

Wert des Fluent-UI-Entwurfstokens im dunklen Modus in Gelb geändert

Teilen über