Stil-Komponenten zum Anpassen an Ihr Branding
Die Komponenten des Microsoft Graph-Toolkits sind in puncto Anpassung sehr flexibel. Wenn Sie das Aussehen von Komponenten ändern möchten, können Sie dies ganz einfach mithilfe einer Reihe benutzerdefinierter CSS-Eigenschaften erreichen.
Komponenten des Microsoft Graph-Toolkits verwenden das Schatten-DOM. Dies bedeutet, dass sie von Ihren übrigen Web-Apps isoliert sind. Wenn Sie beispielsweise die Schriftfarbe Ihrer Web-App global in Blau geändert haben, wird in Komponenten des Microsoft Graph-Toolkits weiterhin ihre Standardfarbe verwendet.
Diese Isolation ist beabsichtigt, damit Komponenten des Microsoft Graph-Toolkits immer wie gewünscht dargestellt werden und das Styling Ihrer Web-App keine Auswirkungen auf sie hat.
Zur visuellen Anpassung der Inhalte des Microsoft Graph-Toolkits verwenden Sie benutzerdefinierte CSS-Eigenschaften, die von der Komponente bereitgestellt werden. Zum Beispiel ändern Sie so die Schriftfarbe, mit der Ereignisse in der Agenda-Komponente angezeigt werden:
<style>
mgt-agenda {
--agenda-header-color: blue;
--agenda-event-time-color: blue;
--agenda-event-subject-color: blue;
--agenda-event-location-color: blue;
}
</style>
Weitere Informationen zu den verfügbaren benutzerdefinierten CSS-Eigenschaften, die von den einzelnen Komponenten dargestellt werden, finden Sie in ihrer jeweiligen Dokumentation.
Das Microsoft Graph-Toolkit bietet auch helle und dunkle Designs.
Die einfachste Möglichkeit zum Hinzufügen von Unterstützung für das Wechseln von Designs besteht darin, die mgt-theme-toggle -Komponente zu verwenden und Textkörperhintergrund und Schriftfarbe auf Variablen festzulegen, um dem Design zu folgen.
<head>
<!-- trimmed for brevity -->
<style>
body {
background-color: var(--fill-color);
color: var(--neutral-foreground-rest);
}
</style>
</head>
<body>
<!-- trimmed for brevity -->
<mgt-theme-toggle></mgt-theme-toggle>
<mgt-people-picker></mgt-people-picker>
</body>
Wenn Sie benutzerdefinierte Logik verwenden, um das Design für Ihre App zu wechseln, können Sie die Komponenten des Microsoft Graph-Toolkits dem Design folgen lassen, indem Sie es programmgesteuert anwenden.
<div id="graph">
<mgt-people-picker></mgt-people-picker>
</div>
<script>
let region = document.getElementById('graph');
mgt.applyTheme('dark', region);
</script>
