Formatieren von Komponenten im Microsoft Graph-Toolkit

  • Artikel
  • 2 Minuten Lesedauer

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:

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

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 stehen zwei Designs zur Verfügung: hell und dunkel. Standardmäßig sind alle Komponenten mit hellem Design formatiert. Um zum dunklen Design zu wechseln, können Sie einfach auf den Abschnitt Ihrer HTML-Seite anwenden class="mgt-dark" . Auf die Komponenten in diesem Abschnitt wird ein dunkles Design angewendet. Die folgenden Beispiele zeigen, wie Designs basierend auf der Struktur Ihres HTML-Codes angewendet werden.

Beispiel 1: Globales Design

<body class="mgt-light">
    <!-- light theme will apply to all components in this section -->
    <header><mgt-login></mgt-login></header>
    <article><mgt-agenda></mgt-agend></article>
    <footer></footer>
</body>

Beispiel 2: Design einzelner Komponenten

<mgt-person-card class="mgt-dark"></mgt-person-card>

Beispiel 3: Regionales Design

<div class="mgt-light">
    <header class="mgt-dark">
        // login component will have dark theme
        <mgt-login></mgt-login>
    </header>
    <article>
        // agenda component will have light theme
        <mgt-agenda></mgt-agenda>
    </article>
</div>

Beispiel 4: Anpassen von CSS mit Design

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

mgt-people-picker.custom-class {
    --input-background-color: $custom-background-color;
    --input-border: $custom-input-border;
}