Компоненты стиля для использования фирменного оформления

  • 3 мин

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

Компоненты Microsoft Graph Toolkit используют теневую модель DOM. Это означает, что они изолированы от остальных компонентов веб-приложения. Например, если изменить глобальный цвет шрифта в веб-приложении на синий, компоненты Microsoft Graph Toolkit по-прежнему будут использовать свой цвет по умолчанию.

Стили компонентов Microsoft Graph Toolkit.

Такая изоляция является намеренной, чтобы компоненты Microsoft Graph Toolkit всегда отображались должным образом и на них не влиял специфический стиль веб-приложения.

Чтобы настроить стиль содержимого Microsoft Graph Toolkit, используйте пользовательские свойства CSS, предоставляемые компонентом. Например, так можно изменить цвет шрифта, используемый для отображения событий в компоненте повестки дня:

<style>
  mgt-agenda {
    --agenda-header-color: blue;
    --agenda-event-time-color: blue;
    --agenda-event-subject-color: blue;
    --agenda-event-location-color: blue;
  }
</style>

Стили компонентов Microsoft Graph Toolkit с пользовательскими свойствами CSS.

Дополнительные сведения о доступных пользовательских свойствах CSS, предоставляемых каждым компонентом, доступны в соответствующей документации.

В Microsoft Graph Toolkit также доступны светлая и темная темы.

Самый простой способ добавить поддержку переключения тем — использовать mgt-theme-toggle компонент и задать фон текста и цвет шрифта переменным, чтобы следовать за темой.

<head>
  <!-- trimmed for brevity -->
  <style>
    body {
      background-color: var(--fill-color);
      color: var(--neutral-foreground-rest);
    }
  </style>
</head>
<body>
    <!-- trimmed for brevity -->
    <mgt-theme-toggle></mgt-theme-toggle>
    <mgt-people-picker></mgt-people-picker>
</body>

Компоненты Microsoft Graph Toolkit с темной темой.

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

<div id="graph">
    <mgt-people-picker></mgt-people-picker>
</div>
<script>
    let region = document.getElementById('graph');
    mgt.applyTheme('dark', region);
</script>

Снимок экрана: компонент Microsoft Graph Toolkit с темной темой.