Construire des dialogues interactifs à Kendoreact

Consultez la boîte de dialogue Kendoreact, qui peut fournir à vos utilisateurs une interaction sans perturber leur flux de travail. Apprenez à l’implémenter dans votre application React.

Les boîtes de dialogue sont des composants essentiels dans les applications Web modernes. Ils fournissent aux utilisateurs une interface ciblée pour des interactions importantes sans perturber leur flux de travail. Que ce soit la confirmation d’une action, la collecte des entrées utilisateur ou l’affichage d’informations supplémentaires, les boîtes de dialogue aident à rationaliser les interactions utilisateur tout en maintenant le contexte.

Dans cet article, nous explorerons le Composant de dialogue réagi De Progress Kendoreact, ses principales caractéristiques et comment l’intégrer dans une application React.

Le package de dialogue Kendoreact est disponible gratuitement avec sa pleine fonctionnalité dans le cadre de Kendoreact gratuit—Une initiative pour rendre un ensemble limité de composants de réaction librement accessibles, sans obligations jointes!

Dialogues et modaux

Dans le développement d’applications Web modernes, les boîtes de dialogue et les modaux servent d’éléments d’interface critiques qui interrompent temporairement le flux de travail de l’utilisateur pour concentrer l’attention sur un contenu ou des actions spécifiques. Ces composants de superposition apparaissent au-dessus du contenu principal, créant une hiérarchie visuelle qui indique leur importance.

Les boîtes de dialogue et les modaux diffèrent de la navigation de page standard en ce qu’ils maintiennent le contexte de la page sous-jacente tout en obligeant l’utilisateur à interagir avec le contenu présenté avant retour à l’interface principale. Cette préservation contextuelle est précieuse lorsque les utilisateurs doivent:

• Terminez les soumissions de formulaires sans s’éloigner de leur vue actuelle.
• Confirmez des actions essentielles telles que les suppressions ou les changements permanents.
• Affichez des informations ou des détails supplémentaires qui complètent le contenu principal.
• Etc.

Les boîtes de dialogue bien conçues améliorent souvent l’expérience utilisateur en réduisant la charge cognitive – les utilisateurs restent orientés dans l’application tout en abordant des tâches spécifiques ou en examinant des informations importantes.

Le composant de dialogue Kendoreact

La boîte de dialogue Kendoreact fait partie d’un Bibliothèque d’interface utilisateur React qui fournit des composants de réaction natifs. Le composant de dialogue Kendoreact est distribué via le @ Progress / kendo-réact-dialogues Package NPM et peut être importé directement.

npm install @progress/kendo-react-dialogs

Une fois installé, nous pouvons importer le composant de dialogue dans notre application React:

import { Dialog } from "@progress/kendo-react-dialogs";

Voici un exemple simple qui démontre l’utilisation de base du composant de dialogue Kendoreact:

import * as React from "react";
import { Dialog } from "@progress/kendo-react-dialogs";

const App = () => {
  return (
    <div>
      <Dialog>
        <p>Hi! This is a Dialog!</p>
      </Dialog>
    </div>
  );
};

export default App;

Dans l’exemple ci-dessus, nous avons créé une boîte de dialogue simple qui rend un message dans le composant de dialogue. Par défaut, la boîte de dialogue apparaît comme une superposition modale, les utilisateurs se concentrent donc sur le contenu présenté avant d’interagir avec d’autres éléments sur la page.

Dans les sections suivantes, nous explorerons des fonctionnalités supplémentaires que le composant de dialogue Kendoreact prend en charge.

Titre

Le <Dialog /> Le composant offre des options pour afficher et personnaliser les titres avec l’utilisation du title propriété:

import * as React from "react";
import { Dialog } from "@progress/kendo-react-dialogs";

const App = () => {
  return <Dialog title="Awesome title goes here" />;
};

export default App;

Ce qui précède rend un simple Dialog avec le titre de "Awesome title goes here".

Pour des exigences de titre plus complexes, nous pouvons transmettre des composants, des fonctions ou des éléments HTML pour créer des barres de titre personnalisées:

import * as React from "react";
import { Dialog } from "@progress/kendo-react-dialogs";
import { SvgIcon } from "@progress/kendo-react-common";
import { printIcon } from "@progress/kendo-svg-icons";

const CustomTitleBar = () => {
  return (
    <div
      className="custom-title"
      style={{ fontSize: "18px", lineHeight: "1.3em" }}
    >
      <SvgIcon icon={printIcon} /> Print this page
    </div>
  );
};

const App = () => {
  return (
    <Dialog title={<CustomTitleBar />}>
      <p style={{ margin: "30px", textAlign: "center" }}>
        A sample print dialog.
      </p>
    </Dialog>
  );
};

export default App;

Dans l’exemple ci-dessus, nous avons créé un titre personnalisé avec une icône, fournissant une interface plus intuitive pour une boîte de dialogue d’impression. Les utilisateurs verront l’icône d’impression suivie du texte "Print this page" dans la zone de titre de la boîte de dialogue lors de la visualisation de cette boîte de dialogue.

Visibilité

Il est important de contrôler la visibilité des composants de dialogue pour créer une expérience utilisateur interactive. Le composant de dialogue est visible par défaut, mais nous pouvons contrôler sa visibilité en utilisant simple État Variables:

import * as React from "react";
import { Dialog, DialogActionsBar } from "@progress/kendo-react-dialogs";
import { Button } from "@progress/kendo-react-buttons";

const App = () => {
  const [visible, setVisible] = React.useState(false);

  const toggleDialog = () => {
    setVisible(!visible);
  };

  return (
    <div>
      <Button type="button" onClick={toggleDialog} id="open-dialog">
        Open Dialog
      </Button>
      {visible && (
        <Dialog title={"Please confirm"} onClose={toggleDialog}>
          <p style={{ margin: "25px", textAlign: "center" }}>
            Are you sure you want to continue?
          </p>
          <DialogActionsBar>
            <Button type="button" onClick={toggleDialog}>
              No
            </Button>
            <Button type="button" onClick={toggleDialog}>
              Yes
            </Button>
          </DialogActionsBar>
        </Dialog>
      )}
    </div>
  );
};

export default App;

Dans l’exemple ci-dessus, nous utilisons le visible Indiquez pour contrôler si la boîte de dialogue est rendue dans le DOM. En cliquant sur le bouton «Ouvrir la boîte de dialogue», basculera la visibilité de la boîte de dialogue en modifiant la valeur de l’état.

La boîte de dialogue comprend également un onClose le gestionnaire qui appelle la même chose toggleDialog() Fonction Lorsque l’utilisateur clique sur le bouton Fermer (x) dans la barre de titre de la boîte de dialogue.

Lors de l’exécution de cet exemple, la boîte de dialogue sera initialement cachée. En cliquant sur le bouton «Ouvrir la boîte de dialogue», il y aura l’apparence, et en cliquant sur les boutons «Non» ou «Oui» ou le bouton Fermer dans la barre de titre le masquera à nouveau. Cette approche de rendu conditionnel est un modèle standard dans les applications React pour gérer l’affichage des composants modaux.

Notez que dans l’exemple de code ci-dessus, nous avons utilisé le React dialogactions barre Composant du package de dialogue pour ajouter et personnaliser les boutons d’action. Le layout propriété du DialogActionsBar Le composant permet de contrôler le positionnement des boutons d’action de dialogue avec la valeur par défaut étant le stretched mise en page.

Dimensions

Le composant de la boîte de dialogue nous permet de personnaliser ses dimensions pour différentes exigences de contenu. Nous pouvons spécifier la largeur et la hauteur de la boîte de dialogue en utilisant le width et height propriétés:

import * as React from "react";
import { Dialog, DialogActionsBar } from "@progress/kendo-react-dialogs";
import { Button } from "@progress/kendo-react-buttons";

const App = () => {
  const [visible, setVisible] = React.useState(false);

  const toggleDialog = () => {
    setVisible(!visible);
  };

  return (
    <div>
      <Button type="button" onClick={toggleDialog} id="open-dialog">
        Open Dialog
      </Button>
      {visible && (
        <Dialog
          title={"Status"}
          onClose={toggleDialog}
          width={200}
          height={250}
        >
          <p style={{ margin: "25px", textAlign: "center" }}>
            Your escape pod is now ready.
          </p>
          <DialogActionsBar>
            <Button themeColor={"primary"} onClick={toggleDialog}>
              Launch
            </Button>
          </DialogActionsBar>
        </Dialog>
      )}
    </div>
  );
};

export default App;

Dans cet exemple, nous avons créé une boîte de dialogue avec des dimensions spécifiques (200px largeur, 250px de hauteur) plus petites que les exemples que nous avons vus plus tôt dans cet article.

Kendoreact

KendoreAct propose une solide suite de composants d’interface utilisateur pour les applications React, couvrant tout, des éléments constitutifs essentiels comme Boutons et Dialogue aux composants avancés et hautement spécialisés comme Graphiques et Grilles de données.

Cet écosystème diversifié de composants – des éléments de forme (Entrées, Cocher les cases et Listes déroulantes) aux composants d’utilité et d’animation (Ondulation, Chargeur et Infraction) – Intégre les développeurs pour créer des applications de qualité professionnelle avec un langage de conception cohérent. Que vous ayez besoin d’éléments d’interface utilisateur simples ou de composants plus axés sur les services publics, KendoreAct offre une intégration fluide et une expérience utilisateur poli dans votre application.

Pour plus de détails, consultez le Documentation officielle de la bibliothèque Kendoreact.

Conclure

Les boîtes de dialogue sont essentielles pour capturer l’entrée des utilisateurs et afficher des informations importantes dans les applications Web modernes. Le composant de dialogue Kendoreact offre une approche simple mais flexible pour implémenter les boîtes de dialogue dans les applications React, avec la prise en charge des configurations de titre, des mécanismes de contrôle de la visibilité, des dispositions de bouton d’action et des spécifications dimensionnelles.

Pour plus de détails, assurez-vous de consulter l’officiel Documentation des composants de dialogue!

Et pour l’essayer par vous-même, installez Kendoreact gratuit maintenant. Il est entièrement gratuit à utiliser dans la production sans avoir à passer par des formes.