Übung – Stil-Komponenten zum Anpassen an Ihr Branding

  • 8 Minuten

In dieser Übung erfahren Sie, wie Sie benutzerdefinierte CSS-Eigenschaften mit Komponenten des Microsoft Graph-Toolkits verwenden können, um Ihre Anwendung stilistisch anzupassen.

Vorbereitende Schritte

Als Voraussetzung für diese Übung müssen Sie die vorherige Übung abgeschlossen haben: "Ändern des Verhaltens von Komponenten mithilfe von Attributen".

Visuelle Anpassung der Anmeldekomponente an Ihr Branding

Nehmen wir an, Sie möchten das Aussehen des Schaltflächeninhalts für die Anmeldekomponente ändern. In der index.html-Datei können Sie das <style>-Tag in <head> verwenden, um Komponenten zu personalisieren.

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

  1. Um den Text der Seite anzupassen, fügen Sie zwischen den <style> Tags hinzubody{}. Verwenden Sie die folgende CSS-Eigenschaft im body{} Selektor:

    • background-color ändert die Hintergrundfarbe der Seite so, dass sie der Hintergrundfarbe des Designs folgt.
    • color ändert die Textfarbe der Seite, um der Textfarbe des Designs zu folgen.

  2. Fügen Sie zum Anpassen der Anmeldekomponente zwischen den <style> Tags hinzumgt-login{}. Verwenden Sie die folgenden CSS-Eigenschaften im mgt-login{} Selektor:

    • --login-button-padding ändert den Abstand im Element "E-Mail des Benutzers". Legen Sie 30px für einen gleichmäßigen Abstand oben, unten, links und rechts fest.
    • --login-signed-in-background ändert die Hintergrundfarbe der Schaltfläche in slategrey
    • --login-popup-text-color, um die Schriftfarbe im Benutzerprofil-Popup in slategrey (slategrey) zu ändern.

  3. Fügen Sie zum Anpassen der Agenda Komponente zwischen den <style> Tags hinzumgt-agenda{}. Verwenden Sie die folgenden CSS-Eigenschaften im mgt-agenda{} Selektor:

    • --agenda-header-font-size, um den Schriftgrad des Agenda-Header zu 24px zu ändern.
    • --agenda-event-padding, um die Abstände in den Ereignissen zu 20px zu ändern.
    • --agenda-event-background-color, um die Farbe des Ereignishintergrundes zu slategrey (slategrey) zu ändern.
    • --agenda-event-box-shadow, um den Schatten des Ereignisfelds zu grey (grey) zu ändern.
    <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. Fügen wir die Komponente hinzu, um die Designfarbe umzuschalten. Öffnen Sie die index.html-Datei , und fügen Sie das mgt-theme-toggle Tag dem <body> Tag hinzu.

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

Die endgültige Version Ihrer index.html-Datei wird wie dieses Beispiel aussehen:

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

Testen der App im Browser

  1. Drücken Sie die folgende Tastenkombination in Visual Studio Code, und suchen Sie nach Live Server:

    • Windows: STRG+UMSCHALTTASTE+P
    • macOS: BEFEHL+UMSCHALTTASTE+P

    Führen Sie Live Server aus, um Ihre App zu testen.

  2. Öffnen Sie Ihren Browser, und navigieren Sie zu http://localhost:3000.

  3. Melden Sie sich mit Ihrem Microsoft 365-Entwicklerkonto an. Stimmen Sie den erforderlichen Berechtigungen zu, und klicken Sie auf Annehmen.

  4. Ändern Sie das Design mithilfe des Designschalters auf Dunkel.

  5. Sie werden sehen, dass die Komponenten automatisch an das dunkle Design angepasst werden, und dass sich das Design der Anmeldeschaltfläche geändert hat.

Auf dieser Abbildung ist die endgültige Version der Anwendung zu sehen.

Die Komponenten des Microsoft Graph-Toolkits sind in puncto Anpassung generell sehr flexibel. Sie können das Aussehen der Komponenten mithilfe von benutzerdefinierten CSS-Eigenschaften ändern und diese an das Branding Ihrer Anwendung anpassen.