Explore

Header

Este documento descreve o componente React Header do Fuel Design.

Props

O componente Header aceita as seguintes props:

customSupportComponent: componente customizado para ser exibido no canto direito do header.

withCloseIcon (default false): determina se o ícone de fechar deve ser exibido no lugar do ícone de voltar.

supportIconPress: função a ser executada ao clicar no ícone de suporte.

supportIconName: nome do ícone de suporte.

withBorder: determina se o header deve ter uma borda inferior.

goBack: função a ser executada ao clicar no botão de voltar.

testID: para testes automatizados/QA.

title: título do header.

style: estilo personalizado.

Exemplo de uso

import React from 'react';

import {Header} from './Header';

const MyComponent = () => {

return (

<Header

title="Meu Header"

withCloseIcon={true}

supportIconName="help"

supportIconPress={() => console.log('Clicou no ícone de suporte')}

goBack={() => console.log('Clicou no botão de voltar')}

testID="header-test"

style={{backgroundColor: 'blue'}}

);

};

⁠

⁠

Exemplo de uso 1

<Header

title="Título do Header"

Este exemplo cria um Header com título "Título do Header" e sem nenhuma outra prop definida.

Exemplo de uso 2

<Header

title="Header com borda"

withBorder={true}

Este exemplo cria um Header com título "Header com borda" e uma borda na parte inferior.

Exemplo de uso 3

<Header

title="Header com ícone de suporte"

supportIconName="help"

supportIconPress={() => console.log('Clicou no ícone de suporte')}

Este exemplo cria um Header com título "Header com ícone de suporte" e um ícone de suporte à direita do título.

Exemplo de uso 4

<Header

title="Header customizado"

customSupportComponent={<CustomSupportComponent />}

Este exemplo cria um Header com título "Header customizado" e um componente customizado à direita do título.

Exemplo de uso 5

<Header

title="Header com ícone de voltar"

goBack={() => console.log('Clicou no botão de voltar')}

Este exemplo cria um Header com título "Header com ícone de voltar" e um ícone de voltar à esquerda do título.

Exemplo de uso 6

<Header

title="Header com ícone de fechar"

withCloseIcon={true}

Este exemplo cria um Header com título "Header com ícone de fechar" e um ícone de fechar à esquerda do título.

Exemplo de uso 7

<Header

title="Header com estilo personalizado"

style={{backgroundColor: 'blue'}}

Este exemplo cria um Header com título "Header com estilo personalizado" e um fundo azul personalizado.

Want to print your doc?
This is not the way.

Try clicking the ··· in the right corner or using a keyboard shortcut (

CtrlP

) instead.