Configuração Inicial
- Crie um projeto SPFx:
yo @microsoft/sharepoint
Escolha React como o framework e siga os prompts.
- Instale o Fluent UI:
npm install @fluentui/react
- Importe os Componentes nos arquivos
.tsxconforme os exemplos abaixo.
Exemplo de WebParts para Componentes Fluent UI
1. TextField – Campo de Texto
import * as React from 'react';
import { TextField } from '@fluentui/react';
const TextFieldExample: React.FC = () => (
<TextField label="Nome" placeholder="Digite seu nome" />
);
export default TextFieldExample;
2. Dropdown – Lista Suspensa
import * as React from 'react';
import { Dropdown, IDropdownOption } from '@fluentui/react';
const options: IDropdownOption[] = [
{ key: 'option1', text: 'Opção 1' },
{ key: 'option2', text: 'Opção 2' },
];
const DropdownExample: React.FC = () => (
<Dropdown label="Escolha uma opção" options={options} />
);
export default DropdownExample;
3. Checkbox – Caixa de Seleção
import * as React from 'react';
import { Checkbox } from '@fluentui/react';
const CheckboxExample: React.FC = () => (
<Checkbox label="Aceito os Termos" />
);
export default CheckboxExample;
4. ChoiceGroup – Botões de Opção (Radio Buttons)
import * as React from 'react';
import { ChoiceGroup, IChoiceGroupOption } from '@fluentui/react';
const options: IChoiceGroupOption[] = [
{ key: 'A', text: 'Opção A' },
{ key: 'B', text: 'Opção B' },
];
const ChoiceGroupExample: React.FC = () => (
<ChoiceGroup label="Escolha uma opção" options={options} />
);
export default ChoiceGroupExample;
5. Slider – Controle Deslizante
import * as React from 'react';
import { Slider } from '@fluentui/react';
const SliderExample: React.FC = () => (
<Slider label="Volume" min={0} max={100} step={1} />
);
export default SliderExample;
6. Toggle – Botão de Alternância
import * as React from 'react';
import { Toggle } from '@fluentui/react';
const ToggleExample: React.FC = () => (
<Toggle label="Ativar notificações" />
);
export default ToggleExample;
7. Pivot – Controle de Abas
import * as React from 'react';
import { Pivot, PivotItem } from '@fluentui/react';
const PivotExample: React.FC = () => (
<Pivot>
<PivotItem headerText="Aba 1">
<p>Conteúdo da Aba 1</p>
</PivotItem>
<PivotItem headerText="Aba 2">
<p>Conteúdo da Aba 2</p>
</PivotItem>
</Pivot>
);
export default PivotExample;
8. Icon – Ícones
import * as React from 'react';
import { Icon } from '@fluentui/react';
const IconExample: React.FC = () => (
<Icon iconName="Mail" />
);
export default IconExample;
9. DetailsList – Tabela de Dados
import * as React from 'react';
import { DetailsList, IColumn } from '@fluentui/react';
const items = [
{ key: 'item1', name: 'Item 1', value: '100' },
{ key: 'item2', name: 'Item 2', value: '200' },
];
const columns: IColumn[] = [
{ key: 'column1', name: 'Nome', fieldName: 'name', minWidth: 100, maxWidth: 200 },
{ key: 'column2', name: 'Valor', fieldName: 'value', minWidth: 100, maxWidth: 200 },
];
const DetailsListExample: React.FC = () => (
<DetailsList items={items} columns={columns} />
);
export default DetailsListExample;
10. Persona – Cartão de Perfil
import * as React from 'react';
import { Persona, PersonaSize } from '@fluentui/react';
const PersonaExample: React.FC = () => (
<Persona
text="John Doe"
secondaryText="Designer"
size={PersonaSize.size40}
/>
);
export default PersonaExample;
11. ProgressIndicator – Indicador de Progresso
import * as React from 'react';
import { ProgressIndicator } from '@fluentui/react';
const ProgressIndicatorExample: React.FC = () => (
<ProgressIndicator label="Progresso" percentComplete={0.5} />
);
export default ProgressIndicatorExample;
12. Dialog – Pop-up de Confirmação
import * as React from 'react';
import { Dialog, DialogType, DialogFooter, PrimaryButton, DefaultButton } from '@fluentui/react';
const DialogExample: React.FC = () => {
const [isDialogOpen, setIsDialogOpen] = React.useState(false);
return (
<div>
<PrimaryButton text="Abrir Confirmação" onClick={() => setIsDialogOpen(true)} />
<Dialog
hidden={!isDialogOpen}
onDismiss={() => setIsDialogOpen(false)}
dialogContentProps={{
type: DialogType.normal,
title: 'Confirmação',
subText: 'Tem certeza que deseja continuar?'
}}
>
<DialogFooter>
<PrimaryButton text="Sim" onClick={() => setIsDialogOpen(false)} />
<DefaultButton text="Não" onClick={() => setIsDialogOpen(false)} />
</DialogFooter>
</Dialog>
</div>
);
};
export default DialogExample;
Renderizando os Componentes no SharePoint
No arquivo YourWebPart.tsx, altere o método render() para cada componente que você deseja testar:
public render(): void {
const element: React.ReactElement = React.createElement(TextFieldExample, {}); // ou qualquer outro componente
ReactDom.render(element, this.domElement);
}
Expansão e Personalização
Esses exemplos cobrem os componentes mais comuns do Fluent UI, mas a biblioteca é muito mais rica. Você pode customizar cada componente para atender suas necessidades de design e funcionalidade.
Recursos Adicionais
Agora você tem exemplos para os principais componentes do Fluent UI e pode integrá-los às suas WebParts no SharePoint Framework. Isso proporciona uma experiência de usuário consistente e eficiente dentro do ecossistema Microsoft.
edvaldo b. guimarães filho 
Leave a comment