Компоненты стиля в наборе средств Microsoft Graph

  • Статья

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

.person {
  --person-avatar-size: 34px;
}

<mgt-person class="person" person-query="me" view="fourlines" id="online" show-presence></mgt-person>

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

Для большей гибкости рассмотрите возможность использования пользовательских шаблонов.

Применение тем

Доступны две темы : light и dark. Эти темы поддерживаются автоматически, так как компоненты mgt используют веб-элементы пользовательского интерфейса Fluent. По умолчанию все компоненты находятся в light теме. Чтобы переключиться на dark тему, вы можете сделать это глобально для всего документа с помощью mgt-theme-toggle компонента или обновить тему для компонента, задав настраиваемые значения маркера CSS в компоненте.

Пример 1. Глобальная тема с помощью mgt-theme-toggle

С помощью компонента mgt-theme-toggle можно задать тему для документа, разместив ее в любом удобном месте. Этот компонент отрисовывает переключатель, который можно использовать для переключения между light режимами и dark .

<body>
  <mgt-theme-toggle></mgt-theme-toggle>
  <header><mgt-login></mgt-login></header>
  <article><mgt-agenda></mgt-agenda></article>
  <footer></footer>
</body>

Пример 2. Программирование темы компонента без переключателя темы

Отдельный компонент можно тематически программно без использования theme-toggle компонента. Это достигается путем вызова applyTheme функции из @microsoft/mgt , которая принимает в режиме или lightdark и HTML-элемент. По умолчанию все элементы отображаются в light теме.

Установка темной темы для определенных элементов

Для второго mgt-login компонента dark можно задать тему и оставить два других в light теме.

<mgt-login id="login-one"></mgt-login>
<mgt-login id="login-two"></mgt-login>
<mgt-login id="login-one"></mgt-login>

import { applyTheme } from "@microsoft/mgt-components";

const loginTwo = document.querySelector("#login-two");

if (loginTwo) {
  applyTheme("dark", loginTwo);
}

Пример 3. Настройка маркеров CSS компонента

Если вы хотите переопределить цвета текущей темы, можно использовать несколько маркеров CSS для стиля компонента. Проверьте страницу конкретного компонента, чтобы получить список доступных маркеров.

Примечание. Настройка этих маркеров означает, что значения набора являются значениями по умолчанию, которые используются, и использование компонента не будет иметь никакого mgt-theme-toggle эффекта.

<mgt-people-picker class="people-picker"></mgt-people-picker>

.people-picker {
  --people-picker-selected-option-background-color: orange;
  --people-picker-selected-option-highlight-background-color: red;
  --people-picker-dropdown-background-color: blue;
  --people-picker-dropdown-result-background-color: yellow;
  --people-picker-dropdown-result-hover-background-color: gold;
  --people-picker-dropdown-result-focus-background-color: green;
  --people-picker-no-results-text-color: orange;
  --people-picker-input-background: gray;
  --people-picker-input-border-color: yellow;
  --people-picker-input-hover-background: green;
  --people-picker-input-hover-border-color: red;
  --people-picker-input-focus-background: purple;
  --people-picker-input-focus-border-color: orange;
  --people-picker-input-placeholder-focus-text-color: yellow;
  --people-picker-input-placeholder-hover-text-color: gold;
  --people-picker-input-placeholder-text-color: white;
  --people-picker-search-icon-color: yellow;
  --people-picker-remove-selected-close-icon-color: blue;
  /** You can also change the person tokens **/
  --person-line1-text-color: blue;
  --person-line2-text-color: red;
}

Вы также можете использовать глобальные маркеры для настройки, которая применяется ко всем элементам в DOM. Набор средств определяет следующие настраиваемые глобальные маркеры CSS.

<mgt-file-list></mgt-file-list>

body {
  /**
  * Overrides the default font-family 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, 'BlinkMacSystemFont', 'Roboto', 'Helvetica Neue', sans-serif for dark and light theme.
  */
  --default-font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;

  /**
  * Overrides the default font-size of 14px
  */
  --default-font-size: 20px;
}

Пример 4. Настройка маркеров CSS интерфейса Fluent

Маркеры, используемые пользовательским интерфейсом Fluent, можно настроить для стиля компонента fluent UI, используемого в компоненте mgt . Веб-компоненты пользовательского интерфейса Fluent обеспечивают первоклассную поддержку маркеров разработки и упрощают настройку, получение и использование маркеров разработки.

Дополнительные сведения о настройке веб-компонентов пользовательского интерфейса Fluent см. в разделе Создание маркеров.

Кроме того, можно переопределить существующие значения маркера разработки собственными значениями. Мы не рекомендуем эту практику, так как заданное значение будет использоваться в DOM, где mgt используется компонент с базовым элементом пользовательского интерфейса Fluent. Он не изменится в light режимах темы или dark .

<mgt-login></mgt-login>

body {
  /**
  * Overrides the default #ffffff color for dark theme and #000000 color for light theme
  */
  --neutral-foreground-rest: yellow !important;

  /**
  * Overrides the default fluent UI components font-family
  */
  --body-font: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;

}

В light режиме темы:

Значение маркера разработки пользовательского интерфейса Fluent изменено на желтый в светлом режиме

В dark режиме темы:

Значение маркера разработки пользовательского интерфейса Fluent изменено на желтый в темном режиме