Explore

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%.

⁠

⁠

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

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

CtrlP

) instead.