edvaldo b. guimarães filho

Microsoft Fluent UI em Projetos React: Instalação e Configuração

Introdução ao Microsoft Fluent UI

O Microsoft Fluent UI é um sistema de design que oferece uma coleção de componentes e estilos para criar interfaces de usuário consistentes e acessíveis.

Ele é amplamente utilizado em aplicativos da Microsoft e pode ser integrado em projetos React, Angular, Vue, entre outros.

Este artigo técnico abordará os passos iniciais para começar a usar o Fluent UI e fornecerá referências principais para aprofundar seu conhecimento.

Passos Iniciais

1. Instalação

Para começar a usar o Fluent UI em um projeto React, você precisa instalar os pacotes necessários. Use o seguinte comando no terminal:

npm install @fluentui/react

2. Configuração Básica

Após a instalação, você pode começar a importar e usar os componentes do Fluent UI. Aqui está um exemplo básico de como configurar um botão:

import React from 'react';
import { PrimaryButton } from '@fluentui/react';

const App = () => {
  return (
    <div>
      <PrimaryButton text="Clique Aqui" />
    </div>
  );
};

export default App;

3. Personalização de Estilos

O Fluent UI permite personalizar os estilos dos componentes usando tokens de tema e funções de estilo.

Aqui está um exemplo de como aplicar um tema personalizado:

import { createTheme, ThemeProvider } from '@fluentui/react';

const myTheme = createTheme({
  palette: {
    themePrimary: '#0078d4',
    themeLighterAlt: '#f3f9fd',
    themeLighter: '#d0e7f8',
    themeLight: '#a9d3f2',
    themeTertiary: '#5ca9e5',
    themeSecondary: '#1a86d9',
    themeDarkAlt: '#006cbe',
    themeDark: '#005ba1',
    themeDarker: '#004377',
    neutralLighterAlt: '#faf9f8',
    neutralLighter: '#f3f2f1',
    neutralLight: '#edebe9',
    neutralQuaternaryAlt: '#e1dfdd',
    neutralQuaternary: '#d0d0d0',
    neutralTertiaryAlt: '#c8c6c4',
    neutralTertiary: '#a19f9d',
    neutralSecondary: '#605e5c',
    neutralPrimaryAlt: '#3b3a39',
    neutralPrimary: '#323130',
    neutralDark: '#201f1e',
    black: '#000000',
    white: '#ffffff',
  },
});

const App = () => {
  return (
    <ThemeProvider theme={myTheme}>
      <PrimaryButton text="Botão Personalizado" />
    </ThemeProvider>
  );
};

export default App;

Edvaldo Guimrães Filho Avatar

Published by

Edvaldo Guimrães Filho
With over 30 years of professional experience as a System and Business Analyst, Project Manager, and Technical Marketing and Sales Support Leader, including 20 years specializing in SharePoint and 5 years in Business AI Transformation, I have worked across various industries and markets. I have had the privilege of collaborating with top 500 Brazilian companies such as DASA, Siemens, Telefónica, Heineken, K2, Comgas/Raízen/Shell, Cognizant, Coty, Hypermarcas, Banco Itaú, Cobrape, Natura, Stefanini, Braskem, Nestlé, Avanade, TIM, Infoserver, SysMap, Vivo, Apsen, Siemens, EDS, Duracell, KPMG, Petrobras, CESP, TV Record, Método Engenharia, and MSD (Merck Sharp & Dohme). Today, I manage, project, and develop solutions and integrations using the following technological platforms: SharePoint, Microsoft 365, Power Platform, Power BI, C#, SQL, Python, JavaScript, React, IoT, C/C++, CAD, and 3D Printing.
Categories:
Tags:

Leave a comment