Компоненты стиля в наборе средств 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
, которая принимает в режиме или light
dark
и 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
режиме темы:
В dark
режиме темы: