Упражнение — компоненты стиля в соответствии с фирменным оформлением

  • 8 мин

В ходе этого упражнения вы научитесь использовать пользовательские свойства CSS с компонентами Microsoft Graph Toolkit, чтобы менять стиль приложения.

Перед началом работы

Прежде чем приступать к этому упражнению, необходимо выполнить предыдущее: “Изменение поведения компонентов с помощью атрибутов”.

Настройка стиля компонента “Вход” в соответствии с фирменной символикой

Допустим, нам нужно изменить внешний вид содержимого кнопки для компонента Вход. Для настройки компонентов можно использовать тег <style> в разделе <head> файла index.html.

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

  1. Чтобы настроить основной текст страницы, добавьте body{} между тегами <style>. Используйте следующее свойство CSS в селекторе body{}:

    • background-color изменяет цвет фона страницы, чтобы следовать цвету фона темы
    • color изменяет цвет текста страницы, чтобы следовать цвету текста темы

  2. Чтобы настроить компонент Login, добавьте mgt-login{} между тегами <style>. Используйте следующие свойства CSS в селекторе mgt-login{}:

    • --login-button-padding меняет интервал в элементе почты пользователя. Задайте интервал 30px для одинакового отступа сверху, снизу, слева и справа.
    • --login-signed-in-background изменяет цвет фона кнопки на slategrey
    • --login-popup-text-color меняет цвет шрифта во всплывающем окне профиля пользователя на slategrey.

  3. Чтобы настроить компонент 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>

  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 Toolkit предоставляют широкие возможности настройки. Вы можете менять внешний вид компонентов с помощью пользовательских свойств CSS и согласовать их с фирменным стилем приложения.