Gallery

Fretebras

Review - 04/11/22

Review - 06/12/2022

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

Explore

Fuel Design

Callout

O componente Callout é um componente que renderiza um bloco de informação com ícone e mensagem.

Props

O componente recebe as seguintes props:

message: string que representa a mensagem a ser exibida no bloco de informação.

style: objeto que representa o estilo do bloco de informação.

isAlignCenter: booleano que define se a mensagem deve ser centralizada no bloco.

Uso

Para utilizar o componente Callout, é necessário importá-lo em um componente React e passar as props necessárias:

import React from 'react';

import { Callout } from './components';

const MyComponent = () => {

return (

<Callout

message="Mensagem de exemplo"

style={{ backgroundColor: '#F5F5F5', padding: '10px' }}

isAlignCenter={true}

);

};

O exemplo acima renderiza um bloco de informação com a mensagem "Mensagem de exemplo", fundo cinza claro e texto centralizado.

Estilos

Os estilos do componente Callout podem ser customizados através da prop style.

Exemplo de customização de estilos:

import React from 'react';

import { Callout } from './components';

const MyComponent = () => {

return (

<Callout

message="Mensagem de exemplo"

style={{

backgroundColor: '#F5F5F5',

padding: '10px',

borderRadius: '5px',

}}

isAlignCenter={true}

);

};

O exemplo acima adiciona bordas arredondadas ao bloco de informação.

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.