Componentes de estilo no Kit de Ferramentas do Microsoft Graph
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:
No dark
modo de tema:
Comentários
https://aka.ms/ContentUserFeedback.
Brevemente: Ao longo de 2024, vamos descontinuar progressivamente o GitHub Issues como mecanismo de feedback para conteúdos e substituí-lo por um novo sistema de feedback. Para obter mais informações, veja:Submeter e ver comentários