Esercizio - Applicare ai componenti stili abbinati alla personalizzazione

  • 8 minuti

In questo esercizio si apprenderà come usare le proprietà CSS personalizzate con i componenti di Microsoft Graph Toolkit per modificare lo stile dell'applicazione.

Prima di iniziare

Come prerequisito per questo esercizio, è necessario completare l'esercizio precedente: "Modificare il comportamento dei componenti usando gli attributi".

Applicare uno stile al componente di accesso in modo che corrisponda alla personalizzazione

Si supponga di voler modificare l'aspetto del contenuto del pulsante per il componente Login. In index.html è possibile utilizzare il tag <style> all'interno di <head> per personalizzare i componenti.

<head>
  <style>
  </style>
</head>

  1. Per personalizzare il corpo della pagina, aggiungere body{} tra i tag <style>. Usare la proprietà CSS seguente all'interno del selettore body{}:

    • background-color modifica il colore di sfondo della pagina in modo che segua il colore di sfondo del tema
    • color modifica il colore del testo della pagina in modo che segua il colore del testo del tema

  2. Per personalizzare il componente Accesso, aggiungere mgt-login{} tra i tag <style>. Usare le proprietà CSS seguenti all'interno del selettore mgt-login{}:

    • --login-button-padding consente di modificare la spaziatura all'interno dell'elemento "user's mail". Definirlo come 30px per uno spazio identico sopra, sotto, a sinistra e a destra.
    • --login-signed-in-background modifica il colore di sfondo del pulsante in slategrey
    • --login-popup-text-color consente di modificare in slategrey il colore del carattere del popup del profilo dell'utente.

  3. Per personalizzare il componente Agenda, aggiungere mgt-agenda{} tra i tag <style>. Usare le proprietà CSS seguenti all'interno del selettore mgt-agenda{}:

    • --agenda-header-font-size consente di modificare le dimensioni del carattere in 24px.
    • --agenda-event-padding consente di modificare la spaziatura all'interno degli eventi in 20px.
    • --agenda-event-background-color consente di modificare in slategrey il colore di sfondo degli eventi.
    • --agenda-event-box-shadow consente di modificare l'ombreggiatura della casella di evento in grey.
    <head>
  <style>
    body {
      background-color: var(--fill-color);
      color: var(--neutral-foreground-rest);
    }
    mgt-login {
      --login-signed-in-background: slategrey;
      --login-button-padding: 30px;
      --login-popup-text-color: slategrey;
    }
    mgt-agenda {
      --agenda-header-font-size: 24px;
      --agenda-event-padding: 20px;
      --agenda-event-background-color: slategrey;
      --agenda-event-box-shadow: grey;
    }
  </style>
</head>

  4. Aggiungere il componente per attivare o disattivare il colore del tema. Aprire il file index.html e aggiungere il mgt-theme-toggle tag al <body> tag .

    <html>
  <head>
    ...
  </head>
  <body>
    <mgt-theme-toggle></mgt-theme-toggle>
    ...
  </body>
</html>

La versione finale del file index.html avrà un aspetto simile al seguente:

<!DOCTYPE html>
<html>
<head>
  <script src="https://unpkg.com/@microsoft/mgt@3/dist/bundle/mgt-loader.js"></script>

  <style>
    body {
      background-color: var(--fill-color);
      color: var(--neutral-foreground-rest);
    }
    mgt-login {
      --login-signed-in-background: slategrey;
      --login-button-padding: 30px;
      --login-popup-text-color: slategrey;
    }
    mgt-agenda {
      --agenda-header-font-size: 24px;
      --agenda-event-padding: 20px;
      --agenda-event-background-color: slategrey;
      --agenda-event-box-shadow: grey;
    }
  </style>
</head>
<body>

  <mgt-msal2-provider client-id="[Your-Client-ID]"></mgt-msal2-provider>

  <mgt-theme-toggle></mgt-theme-toggle>
  <mgt-login>
    <template data-type="signed-in-button-content" >
      <div>
        {{personDetails.mail}}
      </div>
    </template>
  </mgt-login>

  <mgt-agenda class="agenda"
      date="June 29, 2023"
      days="3"
      group-by-day>
  </mgt-agenda>

</body>
</html>

Testare l'applicazione nel browser

  1. In Visual Studio Code, selezionare la combinazione di tasti seguente e cercare Live Server:

    • Windows: CTRL+MAIUSC+P
    • macOS: COMANDO+MAIUSC+P

    Eseguire Live Server per testare l'applicazione.

  2. Aprire il browser e andare a http://localhost:3000.

  3. Accedere con il proprio account Microsoft 365 Developer. Fornire il consenso alle autorizzazioni necessarie e selezionare Accetta.

  4. Usando l'interruttore tema, impostare il tema su Scuro

  5. Infine, si noterà che i componenti vengono adattati automaticamente al tema scuro e che lo stile del pulsante di accesso è cambiato.

Questa immagine mostra la versione finale dell'applicazione.

In generale, i componenti di Microsoft Graph Toolkit possono essere facilmente personalizzati. È possibile modificare l'aspetto dei componenti usando proprietà CSS personalizzate e associarli alla personalizzazione dell'applicazione.