Componentes de estilo no Kit de Ferramentas do Microsoft Graph

Artigo
11/07/2024

Cada componente do Microsoft Graph Toolkit documenta um conjunto de propriedades personalizadas do CSS que você pode usar para alterar a aparência de determinados elementos. Você 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>

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

Para obter mais flexibilidade, considere usar modelos personalizados.

Aplicar temas

Dois temas estão disponíveis - light e dark. Esses temas têm suporte automaticamente porque os componentes mgt usam elementos da Web da interface do usuário fluentes. Por padrão, todos os componentes estão no light tema. Para alternar para dark o tema, você pode fazê-lo globalmente para todo o documento usando o mgt-theme-toggle componente ou pode atualizar o tema para 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 o tema para o documento colocando-o em qualquer lugar conveniente para sua experiência de temas. Esse componente renderizará um alternância que você pode usar para alternar entre light e dark modos.

<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 alternância de tema

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

Definir 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 de componentes específica 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 interface do usuário fluentes

Você pode personalizar os tokens usados pela interface do usuário fluente para estilizar o componente fluente da interface do usuário usado em um mgt componente. Os Componentes Web da interface do usuário fluentes fornecem suporte de primeira classe para Tokens de Design e tornam a configuração, a obtenção e o uso de Tokens de Design simples.

Para obter detalhes sobre como personalizar os componentes da Web da interface do usuário fluentes, consulte Tokens de Design.

Como alternativa, você pode substituir os valores de token de design existentes com 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 interface do usuário fluente subjacente é usado. Ele 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 da interface do usuário fluente alterado para amarelo no modo de luz

No dark modo de tema:

Valor do token de design da interface do usuário fluente alterado para amarelo no modo escuro

Compartilhar via