Travailler avec le composant de fenêtre KendoReact

Équipez votre application React de fenêtres conteneurs flottantes et redimensionnables pour des fonctionnalités telles que les panneaux d’outils et les listes de configuration de propriétés.

Les fenêtres sont des composants d’interface utilisateur qui affichent le contenu dans des conteneurs mobiles et redimensionnables qui flottent au-dessus de l’application principale. Ils sont parfaits pour créer des panneaux de propriétés, des fenêtres d’outils et des interfaces multidocuments dans lesquels les utilisateurs doivent interagir simultanément avec plusieurs vues.

Dans cet article, nous examinerons les progrès Composant de fenêtre KendoReact et voyez comment il fournit une solution pour implémenter ces panneaux flottants avec un support intégré pour le glisser, le redimensionnement, la réduction et l’agrandissement.

Le composant KendoReact Window fait partie de KendoReact Gratuitce qui signifie que vous pouvez l’utiliser dans vos projets sans aucune condition de licence ou d’enregistrement !

Le composant de fenêtre React

Alors que les deux Boîte de dialogue KendoReact et Fenêtre les composants font partie du même paquet de boîtes de dialogueils servent des objectifs légèrement différents.

Le composant Dialog crée des superpositions modales qui nécessitent une interaction de l’utilisateur avant de continuer (pensez aux invites de confirmation ou aux alertes importantes). Le composant Window, quant à lui, crée des panneaux non modaux que les utilisateurs peuvent librement déplacer, redimensionner et continuer à travailler avec différentes parties de l’application.

Si nous devons bloquer l’interaction jusqu’à ce que l’utilisateur réponde, nous utiliserions un dialogue. Si nous voulons des panneaux flottants que les utilisateurs peuvent organiser comme ils le souhaitent tout en effectuant plusieurs tâches, Windows devrait être notre choix privilégié.

Le composant KendoReact Window est distribué via le @progress/kendo-react-dialogs package npm et peut être importé directement :

import { Window } from '@progress/kendo-react-dialogs';

Voici un exemple de base de la façon dont nous pouvons utiliser le composant Window :

import * as React from 'react';
import { Window } from '@progress/kendo-react-dialogs';
import { Button } from '@progress/kendo-react-buttons';

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

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

  return (
    <div>
      <Button onClick={toggleWindow}>
        {visible ? 'Hide Window' : 'Show Window'}
      </Button>
      {visible && (
        <Window title="My First Window" onClose={toggleWindow}>
          <p>This is window content!</p>
          <p>Windows can contain any React components.</p>
        </Window>
      )}
    </div>
  );
};

export default App;

Lorsque nous exécutons ce code, nous verrons un bouton bascule qui affiche ou masque une fenêtre intitulée « Ma première fenêtre ». La fenêtre apparaît au centre de l’écran avec un exemple de contenu à l’intérieur, et cliquer sur le bouton bascule la fera apparaître ou disparaître en douceur.

La visibilité du composant Window est contrôlée via le rendu conditionnel. Lorsque nous voulons afficher la fenêtre, nous la rendons ; quand nous voulons le cacher, nous ne le restituons pas du tout. Cette approche maintient notre arborescence de composants propre et empêche Windows de consommer des ressources lorsqu’elles ne sont pas nécessaires.

Dimensions et redimensionnement

Une fonctionnalité utile du composant KendoReact Window est son système de dimensionnement flexible. Nous pouvons définir les dimensions initiales, contrôler le comportement de redimensionnement et même définir des tailles minimales pour éviter que les fenêtres ne deviennent trop petites.

Définition des dimensions initiales

Pour spécifier la taille initiale d’une fenêtre, on peut utiliser le largeurinitiale et hauteurinitiale accessoires :

import { Window } from '@progress/kendo-react-dialogs';

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

  return (
    <>
      {visible && (
        <Window
          title="Product Details"
          initialWidth={600}
          initialHeight={400}
          onClose={() => setVisible(false)}
        >
          <div className="product-content">
            <h3>Premium Headphones</h3>
            <p>High-quality audio equipment for professionals.</p>
          </div>
        </Window>
      )}
    </>
  );
};

L’exemple de code ci-dessus génère une fenêtre « Détails du produit » qui s’ouvre aux dimensions spécifiées de 600 x 400 pixels.

Contrôle du comportement de redimensionnement

Par défaut, les fenêtres peuvent être redimensionnées en faisant glisser leurs bords ou coins. Nous pouvons contrôler ce comportement en utilisant le redimensionnable étayez et définissez les dimensions minimales avec minLargeur et minHauteur:

import * as React from 'react';
import { Window } from '@progress/kendo-react-dialogs';
import { Button } from '@progress/kendo-react-buttons';

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

  const handleClose = () => {
    setVisible(false);
  };

  return (
    <>
      {visible && (
        <Window
          title="Configuration Panel"
          resizable={allowResize}
          minWidth={300}
          minHeight={200}
          onClose={handleClose}
        >
          <p>Minimum size: 300x200 pixels</p>
          <p>Try resizing this window!</p>
          <Button onClick={() => setAllowResize(!allowResize)}>
            {allowResize ? 'Disable Resize' : 'Enable Resize'}
          </Button>
        </Window>
      )}
    </>
  );
};

export default App;

Dans cet exemple, nous verrons une fenêtre avec un bouton « Désactiver le redimensionnement » à l’intérieur. Lorsque le redimensionnement est activé, nous pouvons faire glisser les bords de la fenêtre pour l’agrandir ou la réduire, mais elle cessera de rétrécir une fois qu’elle aura atteint la taille minimale de 300 x 200 pixels.

Positionnement et déplacement

Les fenêtres doivent apparaître au bon endroit et être mobiles afin que les utilisateurs puissent organiser leur espace de travail. Le composant Window propose plusieurs options pour contrôler la position et le mouvement.

Positionnement initial

Nous pouvons définir l’endroit où une fenêtre apparaît en premier en utilisant le initialTop et initialeGauche accessoires :

import * as React from 'react';
import { Window } from '@progress/kendo-react-dialogs';
import { Button } from '@progress/kendo-react-buttons';

const App = () => {
  const [windows, setWindows] = React.useState([
    { id: 1, visible: true, left: 50, top: 50 },
    { id: 2, visible: true, left: 300, top: 100 }
  ]);

  const handleClose = (windowId) => {
    setWindows(windows.map(window => 
      window.id === windowId 
        ? { ...window, visible: false }
        : window
    ));
  };

  const showAllWindows = () => {
    setWindows(windows.map(window => ({ ...window, visible: true })));
  };

  return (
    <>
      <Button onClick={showAllWindows}>Show All Windows</Button>
      {windows.map(window => (
        window.visible && (
          <Window
            key={window.id}
            title={`Window ${window.id}`}
            initialLeft={window.left}
            initialTop={window.top}
            onClose={() => handleClose(window.id)}
          >
            <p>Window content here for Window {window.id}</p>
            <p>Position: {window.left}, {window.top}</p>
          </Window>
        )
      ))}
    </>
  );
};

export default App;

L’exemple ci-dessus montre deux fenêtres s’ouvrant à des positions différentes. Nous verrons la « Fenêtre 1 » apparaître en haut à gauche (50, 50) et la « Fenêtre 2 » apparaître plus en bas et à droite (300, 100). Le bouton « Afficher toutes les fenêtres » restaurera toutes les fenêtres fermées, démontrant comment plusieurs fenêtres peuvent coexister à des positions prédéterminées.

États de la fenêtre : réduire, maximiser et restaurer

Les systèmes de fenêtres modernes permettent aux utilisateurs de minimiser les fenêtres pour économiser de l’espace ou de les maximiser pour un travail ciblé. Le composant Window prend en charge ces états via le scène soutenir.

import * as React from 'react';
import { Window } from '@progress/kendo-react-dialogs';
import { Button } from '@progress/kendo-react-buttons';

const App = () => {
  const [visible, setVisible] = React.useState(true);
  const [stage, setStage] = React.useState('DEFAULT');

  const handleStageChange = (e) => {
    setStage(e.stage);
  };

  const handleClose = () => {
    setVisible(false);
  };

  return (
    <>
      {visible && (
        <Window
          title="Document Editor"
          stage={stage}
          onStageChange={handleStageChange}
          onClose={handleClose}
        >
          <div className="editor-toolbar">
            <Button onClick={() => setStage('MINIMIZED')}>
              Minimize
            </Button>
            <Button onClick={() => setStage('FULLSCREEN')}>
              Maximize
            </Button>
            <Button onClick={() => setStage('DEFAULT')}>
              Restore
            </Button>
          </div>
          <textarea 
            className="editor-content" 
            style={{ width: '100%', height: '150px', resize: 'none' }}
            placeholder="Start typing your document..."
          />
        </Window>
      )}
    </>
  );
};

export default App;

L’exécution du code ci-dessus affiche une fenêtre « Éditeur de documents » avec une barre d’outils contenant les boutons Réduire, Agrandir et Restaurer. En cliquant sur « Réduire », la fenêtre se réduit à sa barre de titre, « Maximiser » l’agrandit pour remplir l’écran et « Restaurer » la ramène à sa taille standard.

Ajout de boutons d’action

Windows a souvent besoin de boutons d’action pour enregistrer, annuler ou effectuer d’autres opérations. Le composant Window fournit le Barre d’actions de fenêtre composant prévu à cet effet :

import * as React from 'react';
import { Window, WindowActionsBar } from '@progress/kendo-react-dialogs';
import { Button } from '@progress/kendo-react-buttons';

const App = () => {
  const [visible, setVisible] = React.useState(true);
  const [formData, setFormData] = React.useState({ name: '', email: '' });

  const handleSave = () => {
    
    console.log('Saving:', formData);
    setVisible(false);
  };

  const handleInputChange = (field, value) => {
    setFormData(prev => ({ ...prev, [field]: value }));
  };

  return (
    <>
      {visible && (
        <Window title="Edit Profile" onClose={() => setVisible(false)}>
          <div className="form-content">
            <label>
              Name:
              <input 
                type="text" 
                value={formData.name}
                onChange={(e) => handleInputChange('name', e.target.value)}
              />
            </label>
            <label>
              Email:
              <input 
                type="email" 
                value={formData.email}
                onChange={(e) => handleInputChange('email', e.target.value)}
              />
            </label>
          </div>
          <WindowActionsBar layout="end">
            <Button onClick={() => setVisible(false)}>
              Cancel
            </Button>
            <Button themeColor="primary" onClick={handleSave}>
              Save Changes
            </Button>
          </WindowActionsBar>
        </Window>
      )}
    </>
  );
};

export default App;

Dans l’exemple de code ci-dessus, nous remarquerons Cancel et Save Changes boutons d’action situés en bas de la fenêtre.

Conclure

Le Composant de fenêtre KendoReact fournit tout ce dont nous avons besoin pour créer des interfaces de fenêtrage dans les applications React. Des simples boîtes de dialogue modales aux interfaces multidocuments complexes, sa combinaison de fonctionnalités intégrées et d’options de personnalisation le rend adapté à un large éventail d’applications.

N’oubliez pas que vous pouvez essayer ce composant par vous-même avec KendoReact Free.

Commencez avec KendoReact gratuit