Fermer

décembre 21, 2018

Ajouter une grille, une liste déroulante et plus


Bienvenue dans notre série Bien démarrer avec KendoReact ! Dans la troisième entrée de cette série, Eric Bishard montre comment utiliser certains de nos composants les plus populaires de KendoReact dans une application React. Découvrez ce que KendoReact peut faire pour vous, développeur de React!

Retour au deuxième message de la série.


Je souhaite aborder les composants que nous prévoyons d'utiliser dans ce projet.
Tout d'abord, nous allons créer un endroit où les utilisateurs peuvent ajouter un objectif sain et une valeur pour le nombre d'itérations pour une habitude saine.
Un peu comme une liste de choses à faire, mais avec un certain nombre de fois à compléter, pour le nombre de fois où nous ajoutons que nous souhaitons effectuer cette tâche, nous obtiendrons un bouton radio que nous pourrons vérifier.

Nous allons ensuite créer une grille contenant des informations nutritionnelles sur les fruits et légumes, que nous allons ensuite filtrer de différentes manières.
Commençons par les formulaires et les composants nécessaires à la liste de tâches. Nous allons d’abord jouer avec les fonctions Grid, DropDowns, NumericTextBox et Buttons.

Documentation pour chaque composant

Grille DropDowns NumericTextBox Button

Importons les composants dans nos pages. Premièrement, nous allons ajouter la grille et ses composants associés dans notre fichier App.js . Liste déroulante DropDownList NumericTextBox Les grilles et Les colonnes de grille . En parcourant la documentation, il est évident que j'aurai besoin des instructions d'importation suivantes:

 import {DropDownList} depuis '@ progress / kendo-react-dropdowns'; importer {NumericTextBox} à partir de '@ progress / kendo-react-input'; importer {Button} depuis '@ progress / kendo-react-buttons'; import {Grid, GridColumn} à partir de '@ progress / kendo-react-grid'; 

Maintenant que nous avons les importations dont nous avons besoin, obtenons également des données (informations nutritionnelles) pour nourrir notre Grid, le json avec ces données peut être trouvé ici: nutrition.json copiez ce code dans un fichier nommé nutrition.json et ajoutez-le à notre répertoire src .

un fichier GitHub peut être délicat. Visitez le lien nutrition.json GitHub ci-dessus et cliquez sur l'icône d'édition sur la page. Cela créera un fork du fichier et l'ouvrira en mode édition, c'est le meilleur moyen de copier une grande quantité de code à l'intérieur sans obtenir de formatage supplémentaire dont nous n'avons pas besoin.

Après avoir ajouté le fichier nutrition.json nous devons l'importer dans notre App.js .

 importer la nutrition de './nutrition.json';[19659009hnNextnousajoutonsunconstructeurnousdonnantuneplaceaffecternosdonnéesdenutritionàunepropriétésituéedansl'état de notre projet  ainsi que certaines options pour notre liste déroulante. Le constructeur va juste au-dessus de la fonction de rendu dans notre classe App: 
 constructor (props) {
  super (accessoires)
  this.state = {
    données: nutrition,
    habitudesOptions: [
      'Drink 1 cup of water',
      '1 Hour of Coding',
      '10 pushups',
      'Eat Your Fruits and veggies',
      '1 hour of Reading',
      '10 minutes of Meditation',
    ]
  }
} 

Mettons à jour notre code HTML en prévision de notre grille d’information nutritionnelle:

 
.   

Des objets sains

  
  
                                               

Ajoutons également un peu de remplissage à notre classe App entrez dans notre App.css et ajoutez-vous-en pour que le seul fichier CSS que nous ayons dans ce fichier pour l'instant est le CSS ci-dessous:

 .App {
  rembourrage: 1em;
  text-align: center;
}
.healthy-habitudes ul {
  type de style de liste: aucun;
} 

Nous devrions maintenant avoir une liste déroulante, une zone de texte numérique et un bouton "Ajouter une habitude" au-dessus de notre grille qui est maintenant renseignée avec nos données de nutrition. Notez également comment nos données sont mappées sur chaque attribut de GridColumn en utilisant l'attribut du champ .

Les choses avancent, alors jetons un coup d'œil à ce que nous avons jusqu'à présent .. [19659022] Version 1 de la grille "title =" Version 1 de la grille "/>


Restez à l'écoute pour le quatrième prochain message de la série— il n'est pas encore bien vivant, mais vous pourrez le faire pour le trouver bientôt!


Les commentaires sont désactivés en mode aperçu.




Source link