Componentes de estilo no Microsoft Graph Toolkit

Cuidado

O Microsoft Graph Toolkit foi preterido. O período de aposentadoria começa em 1º de setembro de 2025, com aposentadoria total planejada para 28 de agosto de 2026. Os desenvolvedores devem migrar para o uso dos SDKs do Microsoft Graph ou outras ferramentas do Microsoft Graph com suporte para criar experiências na Web. Para obter mais informações, consulte o anúncio de substituição.

Cada componente do Microsoft Graph Toolkit documenta um conjunto de propriedades personalizadas CSS que você pode usar para alterar a aparência de determinados elementos. Você pode encontrar as propriedades CSS personalizadas disponíveis nos documentos de cada componente. Por exemplo:

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

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

Você não pode estilizar elementos internos de um componente, a menos que forneça uma propriedade personalizada CSS. Os elementos filho do componente são hospedados em um shadow dom.

Para obter mais flexibilidade, considere o uso de modelos personalizados.

Aplicar temas

Dois temas estão disponíveis - light e dark. Esses temas são suportados automaticamente porque os componentes de gerenciamento usam elementos da Web da interface do usuário fluente. Por padrão, todos os componentes estão no light tema. Para alternar para dark o tema, você pode fazer isso globalmente para todo o documento usando o mgt-theme-toggle componente ou pode atualizar o tema de um componente definindo os valores de token CSS personalizados no componente.

Exemplo 1: Tema global usando mgt-theme-toggle

Usando o componente mgt-theme-toggle , você pode definir os temas do documento colocando-o em qualquer lugar que seja conveniente para sua experiência de temas. Esse componente renderizará uma alternância que você pode usar para alternar entre light os modos and 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: Criação de temas de um componente programaticamente sem a alternância de tema

Você pode criar um tema para um componente individual programaticamente sem usar o theme-toggle componente. Isso é obtido chamando a applyTheme função de @microsoft/mgt que recebe o modo como light ou dark e o elemento HTML. Por padrão, todos os elementos são renderizados no light tema.

Definindo elementos específicos para o tema escuro

Você 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

Você pode usar vários tokens CSS para estilizar um componente se quiser substituir as cores do tema atual. Verifique a página do componente específico para obter a lista de tokens disponíveis.

Observação: personalizar esses tokens significa que os valores definidos são os valores padrão usados e o uso do mgt-theme-toggle componente não terá 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;
}

Você também pode usar tokens globais para personalização que se aplica a todos os elementos no DOM. O kit de ferramentas 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 da IU do Fluent

Você pode personalizar os tokens usados pela IU do Fluent para estilizar o componente da IU do fluente usado em um mgt componente. O Fluent UI Web Components fornece suporte de primeira classe para Design Tokens e simplifica a configuração, a obtenção e o uso de Design Tokens.

Para obter detalhes sobre como personalizar os componentes da Web da IU do Fluent, consulte Tokens de design.

Como alternativa, você pode substituir os valores de token de design existentes por seus próprios valores. Não recomendamos essa prática porque o valor definido será usado em todo o DOM em que um mgt componente com um elemento de IU do Fluent subjacente é usado. Ele não será alterado nos modos de tema ou dark nãolight.

<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:

O valor do token de design da IU do Fluent foi alterado para amarelo no modo claro

No dark modo de tema:

O valor do token de design da IU do Fluent foi alterado para amarelo no modo escuro

  • Last updated on