5 composants KendoReact pour que vous ne demandiez jamais comment puis-je construire cela

Explorons cinq composants essentiels de KendoReact qui vous aideront à rationaliser le développement de votre interface utilisateur afin que vous n’ayez jamais à vous demander « Comment puis-je créer cela ? » encore.

Une expérience utilisateur exceptionnelle est la base d’une application Web réussie. Mais créer une application Web conviviale et performante peut constituer un défi de taille. Combien de fois vous êtes-vous demandé : « Comment puis-je construire cela ? »

La bonne nouvelle, c’est qu’il existe des solutions spécifiques conçues pour vous faciliter la vie. Utiliser une bibliothèque commerciale comme Progress KendoRéagir pourrait vraiment changer la donne, vous permettant d’économiser énormément de temps et d’efforts. La bibliothèque KendoReact comprend plus de 120 composants d’interface utilisateur natifs, vous offrant tout ce dont vous avez besoin pour créer une application Web moderne et performante. Des simples contrôles et éléments de navigation aux outils de mise en page et aux grilles de données complexes, nous avons ce qu’il vous faut.

Explorons cinq composants essentiels de KendoReact qui vous aideront à accélérer et à simplifier le développement de votre interface utilisateur.

1. Grille de données

Développer une grille de données complexe à partir de zéro peut prendre des mois de développement, tandis que sa maintenance peut prendre encore plus de temps. Mais il n’est pas nécessaire qu’il en soit ainsi.

Le Grille de données KendoReact offre tout ce dont vous avez besoin en termes de fonctionnalité, de style et de maintenance, avec juste un petit code. Vous pouvez choisir les fonctionnalités à utiliser et personnaliser complètement le composant en fonction de vos besoins.

La capture d’écran ci-dessous montre bon nombre des éléments essentiels Grille de données KendoReact fonctionnalités en action, comme la pagination, le filtrage, le regroupement, l’exportation, etc., dont la plupart peuvent être activées avec une simple propriété.

Pour vous montrer à quel point la mise en œuvre est simple, examinons un scénario de mise en œuvre typique. Dans cette capture d’écran, vous pouvez voir quelques fonctionnalités populaires, notamment le filtrage et la pagination.

Et tout ce dont vous avez besoin est le code suivant :

import * as React from "react";
import * as ReactDOM from "react-dom";
import { process } from "@progress/kendo-data-query";
import { Grid, GridColumn as Column } from "@progress/kendo-react-grid";
import { ColumnMenu, ColumnMenuCheckboxFilter } from "./columnMenu";
import products from "./products.json";
const createDataState = (dataState) => {
  return {
    result: process(products.slice(0), dataState),
    dataState: dataState,
  };
};
const App = () => {
  let initialState = createDataState({
    take: 8,
    skip: 0,
  });
  const [result, setResult] = React.useState(initialState.result);
  const [dataState, setDataState] = React.useState(initialState.dataState);
  const dataStateChange = (event) => {
    let updatedState = createDataState(event.dataState);
    setResult(updatedState.result);
    setDataState(updatedState.dataState);
  };
  return (
    <Grid
      data={result}
      {...dataState}
      onDataStateChange={dataStateChange}
      sortable={true}
      pageable={true}
      pageSize={8}
    >
      <Column
        field="ProductID"
        title="Product Id"
        filter={"numeric"}
        columnMenu={ColumnMenu}
      />
      <Column field="ProductName" columnMenu={ColumnMenuCheckboxFilter} />
      <Column field="UnitPrice" filter={"numeric"} columnMenu={ColumnMenu} />
      <Column
        field="Discontinued"
        filter={"boolean"}
        columnMenu={ColumnMenuCheckboxFilter}
      />
    </Grid>
  );
};
ReactDOM.render(<App />, document.querySelector("my-app"));

Vérifiez démo complète ici.

Pour des scénarios plus avancés, vous pouvez consulter le Grille pivotante KendoReact.

Vous souhaitez en savoir plus ?

2. Graphiques

Les graphiques jouent un rôle essentiel dans tout scénario de visualisation de données. Le Graphiques KendoReact La bibliothèque comprend une large gamme de graphiques, des simples graphiques à barres aux graphiques financiers et scientifiques sophistiqués, tous entièrement créés dans React sans dépendances tierces. Chaque graphique est hautement personnalisable, vous aidant à comprendre facilement les tendances des données grâce à des représentations visuelles convaincantes.

Voici un exemple de graphique boursier utilisé pour visualiser l’évolution du prix d’un instrument financier sur une certaine période.

Utilisez le code suivant pour créer le graphique :

import * as React from "react";
import * as ReactDOM from "react-dom";
import {
  StockChart,
  ChartTitle,
  ChartSeries,
  ChartSeriesItem,
  ChartNavigator,
  ChartNavigatorSelect,
  ChartNavigatorSeries,
  ChartNavigatorSeriesItem,
} from "@progress/kendo-react-charts";
import "hammerjs";
import stockData from "./stock-data.json";
const from = new Date("2009/02/05");
const to = new Date("2011/10/07");
const StockChartContainer = () => (
  <StockChart>
    <ChartTitle text="The Boeing Company NYSE:BA" />
    <ChartSeries>
      <ChartSeriesItem
        data={stockData}
        type="candlestick"
        openField="Open"
        closeField="Close"
        lowField="Low"
        highField="High"
        categoryField="Date"
      />
    </ChartSeries>
    <ChartNavigator>
      <ChartNavigatorSelect from={from} to={to} />
      <ChartNavigatorSeries>
        <ChartNavigatorSeriesItem
          data={stockData}
          type="area"
          field="Close"
          categoryField="Date"
        />
      </ChartNavigatorSeries>
    </ChartNavigator>
  </StockChart>
);
ReactDOM.render(<StockChartContainer />, document.querySelector("my-app"));

Voici quelques ressources utiles pour vous aider à démarrer avec les graphiques KendoReact :

Planificateur (calendrier des événements)

De nos jours, un nombre important de projets Web nécessitent un composant de planification. Que vous ayez besoin de gérer des réunions, des salles, des projets, des rendez-vous, des événements ou tout ce qui nécessite de réserver un créneau horaire, le Planificateur KendoReact Le composant est là pour vous aider. Il prend en charge les conversions de fuseaux horaires, la visualisation des ressources, le regroupement, l’édition et les événements récurrents, vous permettant de répondre à des exigences de planification complexes avec seulement quelques lignes de code.

Voici un exemple de vue de calendrier classique construite avec le KendoReact Scheduler :

Et voici tout le code nécessaire à son implémentation :

import * as React from "react";
import * as ReactDOM from "react-dom";
import { Scheduler, DayView, WeekView } from "@progress/kendo-react-scheduler";
import { sampleData, displayDate } from "./events-utc";
const App = () => {
  return (
    <Scheduler data={sampleData} defaultDate={displayDate}>
      <DayView />
      <WeekView />
    </Scheduler>
  );
};
ReactDOM.render(<App />, document.querySelector("my-app"));

Examinons maintenant un scénario plus avancé, incluant un codage couleur basé sur les ressources de l’événement (par exemple, une salle de réunion ou une liste d’invités).

Pour des scénarios encore plus avancés, vous pouvez utiliser le Diagramme de Gantt KendoReact composant.

Vous souhaitez en savoir plus ?

4. Éditeur de texte enrichi

Les utilisateurs aiment toujours créer et modifier du texte dans l’application Web. Alors que certains ont besoin d’une édition de texte de base, d’autres recherchent plus de flexibilité, notamment en matière de formatage, de style, d’édition d’images, etc.

Le Éditeur KendoReact Le composant prend en charge un large éventail d’options d’édition et de formatage en un seul endroit, permettant aux utilisateurs de créer du texte enrichi dans votre application React. Il contient tout ce qu’un éditeur peut offrir, y compris une barre d’outils, une vue code et bien plus encore. De plus, vous avez la possibilité d’activer ou de désactiver des fonctionnalités spécifiques, garantissant ainsi à vos utilisateurs de bénéficier uniquement des fonctionnalités dont ils ont besoin.

La capture d’écran ci-dessous montre la majorité des fonctionnalités activées.

Intégration du Éditeur KendoReact dans son état par défaut, c’est incroyablement simple :

import * as React from "react";
import * as ReactDOM from "react-dom";
import { Editor, EditorTools } from "@progress/kendo-react-editor";
import content from "./content-overview";
const {
  Bold,
  Italic,
  Underline,
  Strikethrough,
  Subscript,
  Superscript,
  AlignLeft,
  AlignCenter,
  AlignRight,
  AlignJustify,
  Indent,
  Outdent,
  OrderedList,
  UnorderedList,
  Undo,
  Redo,
  FontSize,
  FontName,
  FormatBlock,
  Link,
  Unlink,
  InsertImage,
  ViewHtml,
  InsertTable,
  AddRowBefore,
  AddRowAfter,
  AddColumnBefore,
  AddColumnAfter,
  DeleteRow,
  DeleteColumn,
  DeleteTable,
  MergeCells,
  SplitCell,
} = EditorTools;
const App = () => {
  return (
    <Editor
      tools={[
        [Bold, Italic, Underline, Strikethrough],
        [Subscript, Superscript],
        [AlignLeft, AlignCenter, AlignRight, AlignJustify],
        [Indent, Outdent],
        [OrderedList, UnorderedList],
        FontSize,
        FontName,
        FormatBlock,
        [Undo, Redo],
        [Link, Unlink, InsertImage, ViewHtml],
        [InsertTable],
        [AddRowBefore, AddRowAfter, AddColumnBefore, AddColumnAfter],
        [DeleteRow, DeleteColumn, DeleteTable],
        [MergeCells, SplitCell],
      ]}
      contentStyle={{
        height: 630,
      }}
      defaultContent={content}
    />
  );
};
ReactDOM.render(<App />, document.querySelector("my-app"));

Ressources plus utiles :

5. Entrées de dates

Enfin, nous examinerons les composants de saisie de date, essentiels mais souvent difficiles, surtout si vous devez concevoir un calendrier entièrement fonctionnel dans une liste déroulante ou adapté à un écran compact.

KendoRéagir offre une large gamme de entrées de date pour n’importe quel scénario, permettant aux utilisateurs de sélectionner facilement des dates, des heures et des plages.

Jetons un coup d’œil aux populaires Sélecteur de dates KendoReact. Hautement personnalisable et extrêmement facile à intégrer, le composant vous évitera des difficultés avec les formats de date et l’accessibilité.

Vous pouvez le configurer avec seulement quelques lignes de code :

import * as React from "react";
import * as ReactDOM from "react-dom";
import { DatePicker } from "@progress/kendo-react-dateinputs";
import "./styles.css";
const App = () => {
  return (
    <div className="food-demo card-container">
      <div className="k-card custom-card">
        <div className="card-row">
          <div className="card-column">
            <h4 className="k-h4">Schedule Your Visit</h4>
            <div className="component-container">
              <form className="k-form" onSubmit={(e) => e.preventDefault()}>
                <fieldset>
                  <DatePicker placeholder="Choose a date..." />
                </fieldset>
              </form>
            </div>
            <div className="skeleton-container top">
              <div className="k-skeleton skeleton-box-small" />
              <div className="k-skeleton skeleton-box-large" />
            </div>
            <div className="skeleton-container bottom">
              <div className="k-skeleton skeleton-box-medium" />
              <div className="k-skeleton skeleton-box-medium" />
            </div>
          </div>
          <div className="card-column image-container">
            <div className="k-skeleton skeleton-image">
              <span className="k-icon k-i-image" />
            </div>
          </div>
        </div>
        <div className="card-row">
          <div className="k-skeleton skeleton-box-half" />
        </div>
      </div>
    </div>
  );
};
ReactDOM.render(<App />, document.querySelector("my-app"));

Vous souhaitez en savoir plus ?

Résumé

Et voilà, cinq incroyables KendoRéagir des composants qui peuvent vous aider à créer une interface utilisateur esthétique et hautement fonctionnelle avec un minimum d’effort. Créer une excellente UX est facilité grâce à notre concentration unique sur la conception et les outils associés. Associé au meilleur support du secteur, à une documentation détaillée et à une bibliothèque complète de ressources d’apprentissage, vous disposez de tout ce dont vous avez besoin pour augmenter la productivité et accélérer le développement.

Ne nous croyez pas sur parole…essayez KendoReact gratuitement pendant 30 jours et accédez à une assistance professionnelle tout en le vérifiant. Essayez-le et voyez par vous-même à quel point il est facile de créer de superbes applications React !

Essayez maintenant