JavaScript required
We’re sorry, but Coda doesn’t work properly without JavaScript enabled.
Skip to content
Gallery
Fretebras
Review - 04/11/22
Review - 06/12/2022
Review - 06/01/2023
Review - 03/02/2023
Review - 09/03/2023
Review - 10/04/2023
Passagem de Conhecimento
Suportes - Conta Core
Conta PF
Conta PJ
Experiencia Crédito PJ
Risco, crédito e cobrança PJ e PF
Rede Credênciada
Vizir Bank - Core
Curiosidades
More
Share
Explore
Fuel Design
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 ⋯ next to your doc name or using a keyboard shortcut (
Ctrl
P
) instead.