Compartilhar via

Componentes de estilo no Microsoft Graph Toolkit

Cuidado

O Toolkit do Microsoft Graph foi preterido. O período de reforma começa a 1 de setembro de 2025, com a reforma completa prevista para 28 de agosto de 2026. Os programadores devem migrar para utilizar os SDKs do Microsoft Graph ou outras ferramentas suportadas do Microsoft Graph para criar experiências Web. Para obter mais informações, veja o anúncio de preterição.

Cada componente do Microsoft Graph Toolkit documenta um conjunto de propriedades personalizadas CSS que pode utilizar para alterar o aspeto e funcionalidade de determinados elementos. Pode encontrar as propriedades CSS personalizadas disponíveis em cada documento de componente. Por exemplo:

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

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

Não pode modelar elementos internos de um componente, a menos que forneça uma propriedade personalizada CSS. Os elementos subordinados do componente estão alojados num ponto sombra.

Para obter mais flexibilidade, considere utilizar modelos personalizados.

Aplicar temas

Estão disponíveis dois temas - light e dark. Estes temas são suportados automaticamente porque os componentes mgt utilizam elementos Web Fluent UI. Por predefinição, todos os componentes estão no light tema. Para mudar para o dark tema, pode fazê-lo globalmente para todo o documento com o mgt-theme-toggle componente ou pode atualizar o tema de um componente ao definir os valores de token CSS personalizados no componente.

Exemplo 1: Tema global com mgt-theme-toggle

Ao utilizar o componente mgt-theme-toggle , pode definir o tema para o documento ao colocá-lo em qualquer lugar que seja conveniente para a sua experiência de temas. Este componente irá compor um botão de alternar que pode utilizar para alternar entre light os modos e dark .

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

Exemplo 2: Temas de um componente programaticamente sem o botão de alternar tema

Pode colocar um tema num componente individual programaticamente sem utilizar o theme-toggle componente . Isto é conseguido ao chamar a função a applyTheme partir da @microsoft/mgt que assume o modo como light ou dark e o elemento HTML. Por predefinição, todos os elementos são compostos no light tema.

Definir elementos específicos para tema escuro

Pode definir o segundo mgt-login componente como dark tema e deixar os outros dois no light tema.

<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);
}

Exemplo 3: Personalizar tokens CSS de um componente

Pode utilizar vários tokens CSS para modelar um componente se quiser substituir as cores do tema atual. Verifique a página do componente específico para obter a lista de tokens que estão disponíveis.

Nota: personalizar estes tokens significa que os valores definidos são os valores predefinidos que são utilizados e que a utilização do mgt-theme-toggle componente não terá qualquer efeito.

<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;
}

Também pode utilizar tokens globais para personalização que se aplica a todos os elementos no DOM. O toolkit define os seguintes tokens globais CSS personalizados.

<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;
}

Exemplo 4: Personalizar tokens CSS de IU Fluent

Pode personalizar os tokens utilizados pela IU fluente para modelar o componente fluente da IU utilizado num mgt componente. Os Componentes Web fluentes da IU fornecem suporte de primeira classe para Tokens de Design e simplificam a definição, a obtenção e a utilização de Tokens de Estrutura.

Para obter detalhes sobre como personalizar os componentes Web fluentes da IU, veja Tokens de Estrutura.

Em alternativa, pode substituir os valores de token de design existentes pelos seus próprios valores. Não recomendamos esta prática porque o valor que definiu será utilizado em todo o DOM onde é utilizado um mgt componente com um elemento de IU Fluent subjacente. Não será alterado nos light modos de tema ou 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;

}

No light modo de tema:

Valor do token de design fluente da IU alterado para amarelo no modo claro

No dark modo de tema:

Valor do token de design fluente da IU alterado para amarelo no modo escuro

  • Last updated on