Fuel Design

Progress bar

O componente ProgressBar é uma barra de progresso utilizada em alguns lugares do app. Este componente possui as seguintes propriedades:

Props

showDetails: uma propriedade booleana que determina se a barra de progresso deve exibir detalhes como o nome da tarefa e o progresso atual. O valor padrão é true.
actualProgress: um número que representa o progresso atual da tarefa.
objective: um número que representa o objetivo ou total da tarefa.
color: uma string que representa a cor da barra de progresso.
label: uma string que representa o nome ou descrição da tarefa.
style: um objeto que representa as propriedades CSS a serem aplicadas no componente.

Funcionamento

A barra de progresso é calculada com base no progresso atual e no objetivo da tarefa, e é exibida na cor especificada pela propriedade color. Se a propriedade showDetails for definida como true, o componente exibe o nome da tarefa e o progresso atual em percentual.

Exemplo de uso

import React from 'react';
import {ProgressBar} from '@vizir-banking/banking-app-core/dist/fuel-design';

function App() {
return (
<View>
<Text>Minha barra de progresso</Text>
<ProgressBar
actualProgress={50}
objective={100}
color="blue"
label="Tarefa 1"
/>
</View>
);
}

export default App;


Este exemplo exibe uma barra de progresso com 50% de progresso, um objetivo de 100 e uma cor azul. O componente também exibe o nome da tarefa "Tarefa 1" e o progresso atual de 50%.
Screenshot from 2023-04-28 15-37-52.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.