Compartilhar via

Conceber a sua aplicação Microsoft Teams com componentes básicos da IU Fluent

  • Artigo

Pode estruturar e criar a sua aplicação do Teams do zero com os seguintes componentes básicos da IU Fluent. Concebidos o mais simples possível, estes componentes podem funcionar em diferentes casos de utilização, temas e tamanhos de ecrã.

As ilustrações nesta página mostram o aspeto dos componentes nos temas predefinidos (claros) e escuros do Teams.

Kit de IU do Microsoft Teams

Com base nos componentes de reação da IU Fluent, o Microsoft Teams UI Kit inclui componentes e padrões concebidos especificamente para a criação de aplicações do Teams. No kit de IU, pode agarrar e inserir os componentes listados aqui diretamente na sua estrutura e ver mais exemplos de como utilizar cada componente.

Obtenha o Kit de IU do Microsoft Teams (Figma).

Alerta

Exemplo a mostrar um componente de IU de alerta.

Botão

O exemplo mostra um componente de IU de botão.

Exemplo a mostrar um componente de IU de trilho.

Cartão

Exemplo a mostrar um componente de IU do cartão.

Exemplo a mostrar um componente de IU de carrossel.

Caixa de seleção

O exemplo mostra um componente de IU da caixa de verificação.

Marca de treinador

Exemplo a mostrar um componente de IU de marca de treinador.

Menu contextual

Exemplo a mostrar um componente de IU de menu contextual.

Diálogo

O exemplo mostra um componente de IU da caixa de diálogo.

Exemplo a mostrar um componente de IU de lista pendente.

Lista de grupos

Exemplo a mostrar um componente de IU da lista de grupos.

Exemplo a mostrar um componente de IU de hiperligação.

Input

Exemplo a mostrar um componente de IU de entrada.

Par chave-valor

O exemplo mostra um componente de IU do par de valores chave.

Parágrafo

O exemplo mostra um componente de IU de parágrafo.

Seletor

Exemplo a mostrar um componente de IU do seletor.

Pivot

Exemplo a mostrar um componente de IU dinâmica.

Indicador de progresso

Exemplo a mostrar um componente de IU do indicador de progresso.

Rádio

O exemplo mostra um componente de IU de rádio.

Barra de deslocamento

Exemplo a mostrar um componente de IU da barra de deslocamento.

Exemplo a mostrar um componente de IU da caixa de pesquisa.

Painel lateral

Exemplo a mostrar um componente de IU do painel lateral.

Etiqueta de estado

Exemplo a mostrar um componente de IU da etiqueta de estado.

Notificação do sistema

Exemplo a mostrar um componente de IU de alerta.

Alternância

Nota: na IU Fluente, o botão de alternar é um tipo de caixa de verificação.

O exemplo mostra um componente de IU de alternar.

Dica de ferramenta

Exemplo a mostrar um componente de IU de descrição.

Outros recursos

Obtenha exemplos de código e detalhes de implementação para alguns dos componentes listados aqui e no Microsoft Teams UI Kit.

Experimente os componentes de reação da IU Fluent