ReactJS UI Ant Design Skeleton Component

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. Composant squelette est utilisé chaque fois que les données sont pas chargé. Il est utilisé pour pfournissez un espace réservé pendant le chargement du contenu. Nous pouvons utiliser l’approche suivante dans ReactJS pour utiliser le composant Ant Design Skeleton.

Accessoires de squelette :

  • actif: Il est utilisé pour montrer l’effet d’animation.
  • avatar: Il est utilisé pour afficher l’espace réservé de l’avatar.
  • Chargement en cours: Il est utilisé pour afficher le squelette lorsqu’il est défini sur vrai.
  • paragraphe: Il est utilisé pour afficher l’espace réservé du paragraphe.
  • tour: Il est utilisé pour afficher le paragraphe et le rayon du titre lorsqu’il est défini sur vrai.
  • Titre: Il est utilisé pour afficher l’espace réservé du titre.

Accessoires Skeleton.Avatar :

  • actif: Il est utilisé pour montrer l’effet d’animation.
  • forme: Il est utilisé pour définir la forme d’un avatar.
  • Taille: Il est utilisé pour définir la taille de l’avatar.

Squelette.Titre Accessoires :

  • largeur: Il est utilisé pour définir la largeur du titre.

Squelette.Paragraphe Accessoires :

  • Lignes: Il est utilisé pour définir le nombre de lignes des paragraphes.
  • largeur: Il est utilisé pour définir la largeur du paragraphe.

Accessoires Skeleton.Button :

  • actif: Il est utilisé pour montrer l’effet d’animation.
  • forme: Il est utilisé pour définir la forme du bouton.
  • Taille: Il est utilisé pour définir la taille du bouton.

Squelette.Accessoires d’entrée :

  • actif: Il est utilisé pour montrer l’effet d’animation.
  • Taille: Il est utilisé pour définir la taille de l’entrée.

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 { Skeleton } from 'antd';

 

export default function App() {

  return (

    <div style={{

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

    }}>

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

      Non Active State: <Skeleton avatar paragraph={{ rows: 2 }} /> <br />

      Active State: <Skeleton active />  <br />

    </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 :

ReactApp

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

Laisser un commentaire

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