Créer des barres de progression avec KendoReact

Apprenez à créer des barres de progression dynamiques dans vos applications React avec les composants KendoReact ProgressBar et ChunkProgressBar.

Les barres de progression sont des éléments essentiels de l’interface utilisateur qui fournissent un retour visuel aux utilisateurs sur l’état des processus en cours. Ils sont largement utilisés dans les applications pour indiquer la progression d’une opération, comme les chargements de fichiers, les téléchargements ou les tâches de traitement de données.

Dans cet article, nous explorerons comment créer des barres de progression dynamiques dans vos applications React à l’aide de la barre de progression. KendoRéagir Composants ProgressBar et ChunkProgressBar.

Le composant KendoReact ProgressBar

Le KendoReact Barre de progression Le composant affiche la progression d’une tâche sous forme de pourcentage d’achèvement. Il est distribué à travers le barres de progression kendo-react npm et peut être importé directement à partir de ce package.

import { ProgressBar } from '@progress/kendo-react-progressbars';

Pour créer une barre de progression simple, nous pouvons spécifier le value prop, qui représente les progrès actuels. Le max et min les accessoires définissent la plage de la barre de progression, avec max par défaut à 100 et min par défaut à 0.

import * as React from "react";
import { createRoot } from "react-dom/client";
import { ProgressBar } from "@progress/kendo-react-progressbars";

const App = () => {
  const value = 55; 

  return (
    <div className="container">
      <ProgressBar value={value} />
    </div>
  );
};

const domNode = document.querySelector("my-app");
const root = createRoot(domNode);
root.render(<App />);

Ce qui précède affichera une barre de progression terminée à 55 %.

Nous pouvons personnaliser l’apparence et le comportement de la barre de progression à l’aide de divers accessoires. Par exemple, pour inverser le sens de la progression, on peut définir le reverse accessoire à true.

const App = () => {
  const value = 55;

  return (
    <div className="container">
      <ProgressBar value={value} reverse={true} />
    </div>
  );
};

Pour afficher la barre de progression dans une orientation verticale, nous pouvons définir le orientation accessoire à "vertical".

const App = () => {
  const value = 55;

  return (
    <div className="container">
      <ProgressBar value={value} orientation="vertical" />
    </div>
  );
};

Le animation prop permet la personnalisation de l’animation de la barre de progression. Nous pouvons activer ou personnaliser l’animation en définissant cet accessoire sur une valeur booléenne ou un objet avec une option de durée personnalisable. Par exemple, pour activer une animation par défaut, nous pouvons simplement définir animation à true.

Nous définirons l’accessoire d’animation sur true et nous afficherons également un bouton qui, lorsque vous cliquez dessus, met à jour la valeur qui doit être affichée dans la barre de progression à partir de 0 à 55. Ce changement dans la valeur de la barre de progression aidera à déclencher l’animation.

const App = () => {
  const [progressBarValue, setProgressBarValue] = React.useState(0);

  return (
    <div className="container">
      <ProgressBar value={progressBarValue} animation={true} />
      <button onClick={() => setProgressBarValue(55)}>Trigger animation</button>
    </div>
  );
};

Quand le Trigger animation est cliqué sur le bouton, la barre de progression s’animera à 55 %.

Pour personnaliser la durée de l’animation, nous pouvons à la place fournir une valeur de durée. Voici un exemple de fourniture d’une valeur de durée de 1 000 ms.

const App = () => {
  const [progressBarValue, setProgressBarValue] = React.useState(0);

  return (
    <div className="container">
      <ProgressBar value={progressBarValue} animation={{ duration: 1000 }} />
      <button onClick={() => setProgressBarValue(55)}>Trigger animation</button>
    </div>
  );
};

Ce qui précède entraînera une animation de barre de progression avec une durée personnalisée et plus lente.

Le composant KendoReact ChunkProgressBar

Le ChunkProgressBar Le composant est similaire au composant ProgressBar dans le sens où il représente visuellement la progression d’une tâche pour l’utilisateur. Comme le ProgessBar composant, le ChunkProgressBar Le composant peut être importé du barres de progression kendo-react Paquet npm.

import { ChunkProgressBar } from '@progress/kendo-react-progressbars';

La particularité unique du ChunkProgressBar Ce composant est sa capacité à afficher la progression en morceaux distincts, ce qui le rend particulièrement adapté aux scénarios dans lesquels la progression peut être segmentée en étapes ou étapes claires. Ceci est réalisé grâce à la chunkCount propriété, qui nous permet de spécifier le nombre de morceaux en lesquels la barre de progression sera divisée.

Voici un exemple de base de la façon d’utiliser le ChunkProgressBar composant dans votre application React :

import * as React from "react";
import { createRoot } from "react-dom/client";
import { ChunkProgressBar } from "@progress/kendo-react-progressbars";

const App = () => {
  const value = 60;

  return (
    <div className="container">
      <ChunkProgressBar chunkCount={5} value={value} />
    </div>
  );
};

const domNode = document.querySelector("my-app");
const root = createRoot(domNode);
root.render(<App />);

Le code ci-dessus affichera une barre de progression divisée en cinq morceaux, la progression étant visuellement remplie jusqu’à la valeur proportionnelle de 60 %. Compte tenu du comportement par défaut et en supposant une valeur maximale de 100, cela signifie que la barre de progression affichera plus de la moitié de ses morceaux comme remplis.

Pour simuler la progression d’une tâche en cours d’exécution par morceaux, nous pouvons introduire un bouton qui, lorsqu’on clique dessus, met à jour la valeur de la barre de progression.

const App = () => {
  const [progressBarValue, setProgressBarValue] = React.useState(0);

  const incrementValue = () => {
    setProgressBarValue((prevValue) => prevValue + 20);
  };

  return (
    <div className="container">
      <ChunkProgressBar chunkCount={5} value={progressBarValue} />
      <button onClick={incrementValue}>Increment Chunk</button>
    </div>
  );
};

L’exemple ci-dessus simule la progression d’une tâche en temps réel. Chaque clic sur le bouton remplit une partie supplémentaire de la barre de progression, illustrant un cas d’utilisation courant dans lequel les tâches progressent par incréments discrets plutôt que de manière continue.

Conclure

En conclusion, les composants KendoReact ProgressBar et ChunkProgressBar fournissent aux développeurs des outils utiles pour afficher la progression des tâches dans les applications React. Que vous ayez besoin d’une barre de progression traditionnelle ou d’un indicateur de progression segmenté, ces composants offrent la flexibilité et les options de personnalisation nécessaires pour répondre aux exigences de votre application.

Pour plus de détails, assurez-vous de consulter le composant officiel Documentation!

Et si vous ne l’avez pas encore essayé, télécharger un essaigratuit pendant 30 jours.