Compartilhar via

Núcleo da Malha em Suplementos do Office

  • Artigo

O Fabric Core é uma coleção de código aberto de classes CSS e mixins Sass que se destina a usar em suplementos do Office não React. O Fabric Core contém elementos básicos da linguagem de design da interface do usuário fluente, como ícones, cores, tipfaces e grades. O Fabric Core é independente da estrutura, portanto, ele pode ser usado com qualquer aplicativo de página única ou qualquer estrutura de interface do usuário da Web do lado do servidor. (É chamado de "Fabric Core" em vez de "Fluent Core" por razões históricas.)

Se a interface do usuário do suplemento não for baseada em React, você também poderá usar um conjunto de componentes não React. Consulte Usar componentes JS do Office UI Fabric.

Observação

Este artigo descreve o uso do Fabric Core no contexto de Suplementos do Office, mas também é usado em uma ampla gama de aplicativos e extensões do Microsoft 365. Para obter mais informações, consulte Fabric Core e o repositório código aberto Office UI Fabric Core.

Observação

Embora o Fabric Core seja a biblioteca recomendada para criar suplementos não React, a equipe está trabalhando em Componentes Web fluentes da interface do usuário para fornecer uma solução mais recente. Criada em FAST, a biblioteca de Componentes Web da interface do usuário fluente permite que você use, personalize e crie componentes Web para criar uma interface do usuário mais moderna e baseada em padrões. Convidamos você a testar esta biblioteca concluindo os comentários rápidos de início e boas-vindas sobre sua experiência por meio do GitHub.

Uso do Fabric Core: ícones, fontes, cores

  1. Adicione a referência de CDN (rede de entrega de conteúdo) ao HTML em sua página.

    <link rel="stylesheet" href="https://res-1.cdn.office.net/files/fabric-cdn-prod_20230815.002/office-ui-fabric-core/11.0.0/css/fabric.min.css">

  2. Use ícones e fontes do Fabric Core.

    Para usar um ícone do Fabric Core, inclua o elemento "i" em sua página e referencie as classes apropriadas. Para controlar o tamanho do ícone, você pode alterar o tamanho da fonte. Por exemplo, o código a seguir mostra como criar um ícone de tabela muito grande que usa a cor themePrimary (#0078d7).

    <i class="ms-Icon ms-font-xl ms-Icon--Table ms-fontColor-themePrimary"></i>

    Para obter instruções mais detalhadas, consulte Ícones de interface do usuário fluentes. Para encontrar mais ícones disponíveis no Fabric Core, use o recurso de pesquisa nessa página. Quando encontrar um ícone para usar no suplemento, não deixe de adicionar um prefixo ao nome do ícone com ms-Icon--.

    Para obter informações sobre tamanhos de fonte e cores disponíveis no Fabric Core, consulte Tipografia e a tabela Cores do conteúdo em Cores.

Exemplos são incluídos nos Exemplos mais adiante neste artigo.

Usar componentes do Office UI Fabric JS

Suplementos com UIs não React também podem usar qualquer um dos muitos componentes do Office UI Fabric JS, incluindo botões, caixas de diálogo, seletores e muito mais. Consulte o readme do repositório para obter instruções.

Exemplos são incluídos nos Exemplos mais adiante neste artigo.

Exemplos

Os suplementos de exemplo a seguir usam componentes do Fabric Core e/ou do Office UI Fabric JS. Alguns desses repositórios são arquivados, o que significa que eles não estão mais sendo atualizados com correções de bug ou de segurança, mas você ainda pode usá-los para aprender a usar componentes do Fabric Core e da interface do usuário do Fabric.