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

8 分

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

始める前に

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

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

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

ページの本文をカスタマイズするには、タグの間にを追加 body{} します <style> 。セレクター内で次の CSS プロパティを body{} 使用します。
- background-color テーマの背景色に従ってページの背景色を変更します
- color テーマのテキストの色に従ってページのテキストの色を変更します
Login コンポーネントをカスタマイズするには、タグの間にを追加mgt-login{}します<style>。セレクター内で次の CSS プロパティを mgt-login{} 使用します。
- --login-button-padding は、"ユーザーのメール" 要素内のスペースを変更します。上下左右に均等にスペースを確保するために、30px に定義します。
- --login-signed-in-background ボタンの背景色をに変更します。 slategrey
- --login-popup-text-color は、ユーザープロファイルのポップアップフォントの色を slategrey (スレートグレー) に変更します。
コンポーネントを Agenda カスタマイズするには、タグの間にを追加 mgt-agenda{} します <style> 。セレクター内で次の CSS プロパティを mgt-agenda{} 使用します。
- --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>
```
テーマの色を切り替えるコンポーネントを追加しましょう。 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>

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

Visual Studio Code の場合、次のキーの組み合わせを押し、Live Server で検索します。
- Windows: CTRL+SHIFT+P
- macOS: COMMAND+SHIFT+P
Live Server を実行してアプリテストします。
ブラウザーを開き、http://localhost:3000 に移動します。
Microsoft 365 開発者アカウントでサインインします。必要なアクセス許可に同意し、[同意する] を選択します。
テーマトグルを使用して、テーマをダークに切り替えます
最終的に、コンポーネントにダークテーマが自動的に適用され、[サインイン済み] ボタンのスタイルが変更されていることがわかります。

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

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

続行

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

始める前に

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

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

フィードバック

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