演習 - ブランディングに合わせたコンポーネントのスタイル設定

  • 8 分

この演習では、Microsoft Graph ツールキット コンポーネントでカスタム CSS プロパティを使用してアプリケーションのスタイル設定を変更する方法について説明します。

始める前に

この演習の前提条件として、前の演習「属性を使用してコンポーネントの動作を変更する」を完了している必要があります。

ブランディングに合わせたログイン コンポーネントのスタイル設定

たとえば、ログイン コンポーネントのボタン コンテンツの外観を変更するとします。 index.html では、<head> 内の <style> タグを使用してコンポーネントをカスタマイズすることができます。

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

  1. ページの本文をカスタマイズするには、<style> タグの間にbody{}を追加します。 body{} セレクター内で次の CSS プロパティを使用します。

    • background-color テーマの背景色に従ってページの背景色を変更します
    • color テーマのテキストの色に従ってページのテキストの色を変更します

  2. Login コンポーネントをカスタマイズするには、<style> タグの間にmgt-login{}を追加します。 mgt-login{} セレクター内で次の CSS プロパティを使用します。

    • --login-button-padding は、"ユーザーのメール" 要素内のスペースを変更します。 上下左右に均等にスペースを確保するために、30px に定義します。
    • --login-signed-in-background ボタンの背景色を に変更します。 slategrey
    • --login-popup-text-color は、ユーザー プロファイルのポップアップ フォントの色を slategrey (スレートグレー) に変更します。

  3. Agenda コンポーネントをカスタマイズするには、<style> タグの間にmgt-agenda{}を追加します。 mgt-agenda{} セレクター内で次の CSS プロパティを使用します。

    • --agenda-header-font-size は、予定一覧ヘッダーのフォント サイズを 24px に変更します。
    • --agenda-event-padding は、イベント内の間隔を 20px に修正します。
    • --agenda-event-background-color は、イベントの背景色を slategrey (スレートグレー) に変更します。
    • --agenda-event-box-shadow は、イベントのボックス シャドウの色を 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. テーマの色を切り替えるコンポーネントを追加しましょう。 index.html ファイルを開き、mgt-theme-toggle タグを <body> タグに追加します。

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

index.html ファイルの最終バージョンは、この例のように表示されます。

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

ブラウザーでアプリをテストする

  1. Visual Studio Code の場合、次のキーの組み合わせを押し、Live Server で検索します。

    • Windows: CTRL+SHIFT+P
    • macOS: COMMAND+SHIFT+P

    Live Server を実行してアプリテストします。

  2. ブラウザーを開き、http://localhost:3000 に移動します。

  3. Microsoft 365 開発者アカウントでサインインします。 必要なアクセス許可に同意し、[同意する] を選択します。

  4. テーマトグルを使用して、テーマをダークに切り替えます

  5. 最終的に、コンポーネントにダーク テーマが自動的に適用され、[サインイン済み] ボタンのスタイルが変更されていることがわかります。

この画像は、アプリケーションの最終バージョンを示しています。

全体として、Microsoft Graph ツールキット コンポーネントは、カスタマイズに関して柔軟に対応することができます。 カスタム CSS プロパティを使用してコンポーネントの外観を変更し、スタイルをアプリケーションのブランディングに合わせることができます。