Componenti di stile da abbinare alla tua personalizzazione
I componenti di Microsoft Graph Toolkit possono essere facilmente personalizzati. Se si vuole cambiare l'aspetto dei componenti, è possibile farlo facilmente usando un set di proprietà CSS personalizzate.
I componenti di Microsoft Graph Toolkit usano Shadow DOM. Questo indica che sono isolati dal resto dell'app Web. Ad esempio, se il colore del tipo di carattere globale dell'app Web è stato modificato in blu, i componenti di Microsoft Graph Toolkit useranno comunque il relativo colore predefinito.
Questo isolamento è intenzionale in modo che i componenti di Microsoft Graph Toolkit eseguano sempre il rendering come previsto e non siano interessati dall'applicazione di stili specifici dell'app Web.
Per applicare uno stile al contenuto di Microsoft Graph Toolkit, usare proprietà CSS personalizzate esposte dal componente. Ad esempio, per modificare il colore del tipo di carattere usato per visualizzare gli eventi nel componente agenda:
<style>
mgt-agenda {
--agenda-header-color: blue;
--agenda-event-time-color: blue;
--agenda-event-subject-color: blue;
--agenda-event-location-color: blue;
}
</style>
Per altre informazioni sulle proprietà CSS personalizzate disponibili esposte da ogni componente, vedere la relativa documentazione.
Microsoft Graph Toolkit offre anche i temi chiari e scuri.
Il modo più semplice per aggiungere il supporto per il cambio di tema consiste nell'usare il mgt-theme-toggle componente e impostare lo sfondo del corpo e il colore del carattere sulle variabili per seguire il tema.
<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>
Se usi la logica personalizzata per cambiare tema per la tua app, puoi fare in modo che i componenti di Microsoft Graph Toolkit seguano il tema applicandolo a livello di codice.
<div id="graph">
<mgt-people-picker></mgt-people-picker>
</div>
<script>
let region = document.getElementById('graph');
mgt.applyTheme('dark', region);
</script>
