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

Toast

Figma

⁠
https://www.figma.com/file/ZyjX1N95LswyRecxKwg9Xs/Componentes-Fintech---Alinhamento-Dev?node-id=12-1549&t=mnnbsDJ0SvxRKrQE-0
⁠
⁠

Utilização

Importação
import {Toast} from '@vizir-banking/banking-app-core/dist/fuel-design';
import {
SizeTypes,
ToastTypes,
} from '@vizir-banking/banking-app-core/dist/fuel-design/toast/types';

Variação

O Toast possui dois tamanhos o small e medium, que podem ser selecionados com a proriedade SizeTypes.small e SizeTypes.medium
E possui 3 tipos: o danger, neutral e success, podendo ser selecionado com a propriedade ToastTypes.danger , ToastTypes.neutral e ToastTypes.success
Danger, tamanho small
<Toast
title="Titulo do Toast"
message="Texto"
isOpen={show}
size={SizeTypes.small}
type={ToastTypes.danger}
onClose={() => setShow(false)}
/>
⁠
Screenshot from 2023-04-27 15-03-34.png
⁠
⁠
Success, tamanho medium
<Toast
title="Texto de Sucesso"
message="Sucesso"
isOpen={show}
size={SizeTypes.medium}
type={ToastTypes.success}
onClose={() => setShow(false)}
/>
⁠
Screenshot from 2023-04-27 15-07-00.png
⁠
⁠
Neutral, tam small
<Toast
title="Texto Neutro"
message="Mensagem Neutra"
isOpen={show}
size={SizeTypes.small}
type={ToastTypes.neutral}
onClose={() => setShow(false)}
/>
⁠
Screenshot from 2023-04-27 15-08-59.png
⁠
⁠
Danger com timer, ao passar a propriedade timer é selecionado o toast com um progressbar e ao passar o timerToClose é possivel setar o tempo em que esse toast vai ser fechado automaticamente
<Toast
title="Texto de Erro"
message="Mensagem de Erro"
timer
timerToClose={4000}
isOpen={show}
size={SizeTypes.small}
type={ToastTypes.danger}
onClose={() => setShow(false)}
/>
⁠
Screenshot from 2023-04-28 08-56-49.png
⁠
/

ToastFailRequest e ToastSuccessRequest

Componentes utilizado em screen.base do banking-app-core para ser utilizado precisa ser disparado a action abaixo que habilita a exibição do toast:
const dispatch = useDispatch();
useEffect((), {
dispatch(setToastSuccessRequest({show: true, subtitle: 'Sucesso documentado', title: 'Teste'}));
dispatch(setToastFailRequest({show: true, subtitle: 'documentando', title: 'Teste'}));
},[])

⁠
Screenshot from 2023-04-28 13-35-43.png
⁠
⁠
⁠
Screenshot from 2023-04-28 13-36-38.png
⁠
⁠
Want to print your doc?
This is not the way.
Try clicking the ⋯ next to your doc name or using a keyboard shortcut (
CtrlP
) instead.