Compartilhar via

Núcleo da Malha em Suplementos do Office

O Fabric Core é uma coleção open source de classes CSS e mixins Sass que se destina a ser utilizada em Suplementos do Office não React. O Fabric Core contém elementos básicos da linguagem de design Fluent UI, como ícones, cores, tipos de letra e grelhas. O Fabric Core é independente da arquitetura, pelo que pode ser utilizado com qualquer aplicação de página única ou qualquer arquitetura de IU Web do lado do servidor. (Chama-se "Fabric Core" em vez de "Fluent Core" por razões históricas.)

Se a IU do suplemento não for baseada em React, também pode utilizar um conjunto de componentes não React. Consulte Utilizar os componentes do Office UI Fabric JS.

Observação

Este artigo descreve a utilização do Fabric Core no contexto dos Suplementos do Office, mas também é utilizado numa vasta gama de aplicações 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 equipa está a trabalhar em Componentes Web fluentes da IU para fornecer uma solução mais recente. Criada com base em FAST, a biblioteca Fluent UI Web Components permite-lhe utilizar, personalizar e criar Componentes Web para criar uma IU mais moderna e baseada em normas. Convidamo-lo a testar esta biblioteca ao concluir o guia de introdução e o feedback bem-vindo sobre a sua experiência através do GitHub.

Uso do Fabric Core: ícones, fontes, cores

  1. Adicione a referência da rede de entrega de conteúdos (CDN) ao HTML na 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. Utilize os tipos de letra e os ícones do Núcleo de Recursos de Infraestrutura.

    Para utilizar um ícone fabric core, inclua o elemento "i" na sua página e, em seguida, referencie as classes adequadas. 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, veja Fluent UI Icons (Ícones fluentes da IU). Para encontrar mais ícones disponíveis no Fabric Core, utilize a funcionalidade 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 tipos de letra e cores disponíveis no Fabric Core, consulte Tipografia e o índice Cores em Cores.

Os exemplos estão incluídos nos Exemplos mais adiante neste artigo.

Utilizar componentes do Office UI Fabric JS

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

Os exemplos estão incluídos nos Exemplos mais adiante neste artigo.

Exemplos

Os seguintes suplementos de exemplo utilizam componentes Fabric Core e/ou Office UI Fabric JS. Alguns destes repositórios são arquivados, o que significa que já não estão a ser atualizados com erros ou correções de segurança, mas ainda pode utilizá-los para saber como utilizar componentes da IU do Fabric Core e dos Recursos de Infraestrutura.

  • Last updated on