ReactJS UI Ant Design Composant statistique

Afficher la discussion

Améliorer l’article

Enregistrer l’article

J’aime l’article

Afficher la discussion

Améliorer l’article

Enregistrer l’article

J’aime l’article

Ant Design Library a ce composant pré-construit, et il est également très facile à intégrer. Le composant statistique est utilisé lorsque nous voulons dafficher la statistique Nombres. Ça peut être utilisé dans applications qui doivent afficher des données statistiques comme les jeux applications pour les scores, le site Web des scores de cricket, etc. Nous pouvons utiliser l’approche suivante dans ReactJS pour utiliser le composant statistique de conception Ant.

Accessoires statistiques :

  • séparateur décimal: Il est utilisé pour désigner le séparateur décimal.
  • formateur : Il est utilisé pour personnaliser la logique d’affichage des valeurs.
  • groupeSéparateur : Il est utilisé pour désigner le séparateur de groupe.
  • Chargement en cours: Il est utilisé pour indiquer l’état de chargement de Statistic.
  • précision: Il est utilisé pour définir la précision de la valeur d’entrée.
  • préfixe: Il est utilisé pour désigner le nœud de préfixe de valeur.
  • suffixe: Il est utilisé pour désigner le nœud suffixe de valeur.
  • Titre: Il est utilisé pour décrire le titre de l’affichage.
  • évaluer: Il est utilisé pour indiquer la valeur d’affichage.
  • stylevaleur : Il est utilisé pour définir la valeur CSS style.

Statistic.Countdown Props :

  • format: Il est utilisé pour désigner le format comme moment.
  • préfixe: Il est utilisé pour désigner le nœud de préfixe de valeur.
  • suffixe: Il est utilisé pour désigner le nœud suffixe de valeur.
  • Titre: Il est utilisé pour décrire le titre de l’affichage.
  • évaluer: Il est utilisé pour définir le temps de compte à rebours cible.
  • stylevaleur : Il est utilisé pour définir la valeur CSS style.
  • à la fin : C’est une fonction de rappel qui se déclenche lorsque le temps est écoulé.
  • sur le changement: Il se déclenche lorsque l’heure change.

Création de l’application React et installation du module :

  • Étape 1: Créez une application React à l’aide de la commande suivante :

    npx create-react-app foldername
  • Étape 2: Après avoir créé votre dossier de projet, c’est-à-dire le nom du dossier, déplacez-vous dessus à l’aide de la commande suivante :

    cd foldername
  • Étape 3: Après avoir créé l’application ReactJS, installez le obligatoire module à l’aide de la commande suivante :

    npm install antd

Structure du projet : Cela ressemblera à ce qui suit.

ProjectStructure

Structure du projet

Exemple: Maintenant, écrivez le code suivant dans le App.js dossier. Ici, App est notre composant par défaut où nous avons écrit notre code.

App.js

import React from 'react'

import "antd/dist/antd.css";

import { Statistic } from 'antd';

 

const { Countdown } = Statistic;

const deadline = Date.now() + 1000 * 60 ; 

 

export default function App() {

  return (

    <div style={{

      display: 'block', width: 700, padding: 30

    }}>

      <h4>ReactJS Ant-Design Statistic Component</h4>

      <Countdown title="1 Minute Timer:"

        value={deadline} 

      format="HH:mm:ss:SSS" />

    </div>

  );

}

Étape pour exécuter l’application : Exécutez l’application à l’aide de la commande suivante à partir du répertoire racine du projet :

npm start

Production: Ouvrez maintenant votre navigateur et accédez à http://localhost:3000/vous verrez la sortie suivante :

ReactApp3

Référence: https://ant.design/components/statistic/

Laisser un commentaire

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *