Éléments d’interface utilisateur interactifs – composants du bouton Kendoreact

Le premier élément interactif que vous inclurez dans votre application est probablement un bouton. Jetons un coup d’œil aux composants du bouton Kendoreact.

Boutons sont des blocs de construction fondamentaux dans les applications Web modernes. Ce sont les principaux éléments interactifs qui permettent aux utilisateurs de déclencher des actions, de soumettre des formulaires et de naviguer dans différentes vues. Que ce soit une action simple comme la sauvegarde de données ou une opération complexe comme le lancement d’un flux de travail, les boutons offrent aux utilisateurs un moyen clair et reconnaissable d’interagir avec une application.

Dans cet article, nous explorerons le React Bouton Composants Disponible dans le Bibliothèque d’interface utilisateur React De Progress Kendoreact, leurs caractéristiques clés et comment les intégrer dans une application React.

En mars 2025, certains composants du package de boutons Kendoreact sont maintenant gratuits avec leur pleine fonctionnalité, ainsi que plus de 50 autres composants de réaction essentiels! Cela fait partie d’une initiative visant à rendre un ensemble sélectionné de composants Kendoreact librement accessibles sans obligations. Découvrez le Commencez avec Kendoreact gratuit Documentation pour plus de détails.

Types de bouton dans les applications Web modernes

Dans le développement Web moderne, les boutons sont disponibles en différents types et styles, chacun servant différentes fins dans une interface utilisateur. Des boutons standard qui déclenchent des actions immédiates à des variantes plus complexes comme les boutons déroulants qui offrent plusieurs options, le type de bouton droit peut améliorer l’expérience utilisateur en rendant les interactions plus intuites.

Les boutons diffèrent de liaisons hypertexes en ce qu’ils sont conçus spécifiquement pour exécuter des actions plutôt que pour la navigation. Les boutons bien conçus peuvent améliorer l’expérience utilisateur en:

• Fournir des indices visuels clairs pour les éléments interactifs
• Offrir des commentaires immédiats à travers des états visuels (comme flotter, actif, désactivé)
• Créer une hiérarchie parmi les actions disponibles
• Regrouper les fonctionnalités connexes de manière cohérente

Les composants du package de boutons Kendoreact offrent des options complètes pour implémenter divers types de bouton dans nos applications React, des boutons d’action simples aux éléments interactifs plus complexes.

Le package des boutons Kendoreact

Le Package de boutons Kendoreact est une collection de composants d’interface utilisateur personnalisables, réactifs et interactifs que nous pouvons utiliser pour déclencher des actions ou afficher le contenu dans nos applications React. Les composants sont distribués à travers le @ Progress / Kendo-React-Buttons Package NPM.

npm install @progress/kendo-react-buttons

Une fois installé, nous pouvons importer des composants comme la norme <Button /> Composant dans notre application React:

import { Button } from "@progress/kendo-react-buttons";

Voici un exemple simple qui démontre l’utilisation de base du Kendoreact <Button /> composant:

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

const App = () => {
  return (
    <div>
      <Button type="button">Click Me</Button>
    </div>
  );
};

export default App;

Dans l’exemple ci-dessus, nous avons créé un bouton simple qui rend avec le texte «cliquez sur moi». Par défaut, le bouton apparaît avec le style standard, afin que les utilisateurs puissent l’identifier rapidement comme un élément interactif.

Dans les sections suivantes, nous explorerons les différents styles et fonctionnalités que les composants du bouton Kendoreact offrent.

Variations de bouton standard

Mode de remplissage

Le composant du bouton Kendoreact offre plusieurs options de style via le Propriété FillModenous permettant de créer des boutons qui correspondent à différentes exigences et contextes de conception.

import * as React from "react";
import { Button } from "@progress/kendo-react-buttons";
import { plusIcon } from "@progress/kendo-svg-icons";

const App = () => {
  return (
    <div>
      <Button svgIcon={plusIcon} type="button">
        Default
      </Button>

      <Button svgIcon={plusIcon} type="button" fillMode={"outline"}>
        Outline
      </Button>

      <Button svgIcon={plusIcon} type="button" fillMode={"flat"}>
        Flat
      </Button>

      <Button svgIcon={plusIcon} type="button" fillMode={"clear"}>
        Clear
      </Button>

      <Button svgIcon={plusIcon} type="button" fillMode={"link"}>
        Link
      </Button>
    </div>
  );
};

export default App;

Dans l’exemple ci-dessus, nous avons créé cinq boutons avec différents modes de remplissage:

• Défaut: A un fond solide avec une bordure
• Contour: A un fond transparent avec une bordure visible
• Plat: A un fond solide sans bordure
• Clair: A un fond transparent sans bordure
• Lien: Apparaît comme un hyperlien

Couleurs du thème

Le composant du bouton Kendoreact prend également en charge différentes couleurs de thème à travers le Propriété de ThemeColor:

import * as React from "react";
import { Button } from "@progress/kendo-react-buttons";
import { pencilIcon } from "@progress/kendo-svg-icons";

const App = () => {
  return (
    <div>
      <Button svgIcon={pencilIcon} type="button" themeColor={"base"}>
        Base
      </Button>

      <Button svgIcon={pencilIcon} type="button" themeColor={"primary"}>
        Primary
      </Button>

      <Button svgIcon={pencilIcon} type="button" themeColor={"secondary"}>
        Secondary
      </Button>

      <Button svgIcon={pencilIcon} type="button" themeColor={"dark"}>
        Dark
      </Button>

      <Button svgIcon={pencilIcon} type="button" themeColor={"light"}>
        Light
      </Button>
    </div>
  );
};

export default App;

Les couleurs du thème nous permettent de créer une hiérarchie visuelle entre les actions des bouton, ce qui facilite l’identification des actions primaires et secondaires. Et il y a une variété d’autres Couleurs du thème – voir l’API ou le démo dans les documents.

Icônes

Le composant du bouton kendorect supporte inclut les icônes avec le propriété SVGICON:

import * as React from "react";
import { Button } from "@progress/kendo-react-buttons";
import { heartIcon } from "@progress/kendo-svg-icons";

const App = () => {
  return (
    <div>
      <Button svgIcon={heartIcon} type="button" />

      {}
      <Button svgIcon={heartIcon} type="button">
        Like
      </Button>
    </div>
  );
};

export default App;

Dans l’exemple ci-dessus, nous affichons des boutons avec l’icône du cœur du @ Progress / Kendo-Svg-Icons bibliothèque.

Boutons indemniques

Le composant du bouton Kendoreact prend également en charge un état intentionnelce qui est utile pour les actions qui peuvent être activées et désactivées:

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

const App = () => {
  const [isDarkMode, setIsDarkMode] = React.useState(false);

  return (
    <div>
      <Button
        togglable={true}
        selected={isDarkMode}
        onClick={() => setIsDarkMode(!isDarkMode)}
        themeColor={isDarkMode ? "dark" : "light"}
      >
        {isDarkMode ? "Dark Mode Enabled" : "Light Mode Enabled"}
      </Button>
    </div>
  );
};

export default App;

Dans l’exemple ci-dessus, nous avons créé un bouton délemable qui bascule entre les modes clairs et sombres. L’apparence du bouton change en fonction de l’état sélectionné, fournissant des commentaires visuels à l’utilisateur.

Boutons d’action flottants

Boutons d’action flottants Dans Kendoreact, un type spécial de bouton qui représente l’action principale ou la plus courante dans une application. Ils apparaissent généralement comme des boutons circulaires qui flottent au-dessus de l’interface, les rendant facilement accessibles, quel que soit le lieu de l’utilisateur sur la page.

Le composant Kendoreact FloatingActionButton est également distribué à travers le @ Progress / Kendo-React-Buttons Package NPM:

import * as React from "react";
import { FloatingActionButton } from "@progress/kendo-react-buttons";
import { plusIcon } from "@progress/kendo-svg-icons";

const App = () => {
  return (
    <div>
      <FloatingActionButton svgIcon={plusIcon} />
    </div>
  );
};

export default App;

Le FloatingActionButton peut être positionné n’importe où dans notre application en utilisant le positionnement CSS mais, par défaut, est souvent positionné dans le coin inférieur droit.

Le Kendoreact FloatingActionButton est libre à utiliser dans le cadre du Kendoreact gratuit bibliothèque.

Splitbutton

Le Kendoreact Splitbutton est un composant premium qui combine un bouton standard avec un menu déroulant. Il permet aux utilisateurs d’exécuter une action par défaut en cliquant sur la zone du bouton principal ou en choisissant un ensemble d’actions connexes dans la liste déroulante.

Le composant SplitButton de Kendoreact est également distribué à travers le @ Progress / Kendo-React-Buttons Package NPM:

import * as React from "react";
import { SplitButton } from "@progress/kendo-react-buttons";
import {
  clipboardHtmlIcon,
  clipboardTextIcon,
} from "@progress/kendo-svg-icons";

const App = () => {
  const items = [
    {
      text: "Keep Text Only",
      svgIcon: clipboardTextIcon,
    },
    {
      text: "Paste as HTML",
      svgIcon: clipboardHtmlIcon,
    },
    {
      text: "Paste Markdown",
      svgIcon: clipboardHtmlIcon,
    },
    {
      text: "Set Default Paste",
    },
  ];

  const handleClick = () => {
    console.log("Default paste action executed");
  };

  const handleItemClick = (event) => {
    console.log(`Selected option: ${event.item.text}`);
  };

  return (
    <div>
      <SplitButton
        text="Paste"
        items={items}
        onClick={handleClick}
        onItemClick={handleItemClick}
      />
    </div>
  );
};

export default App;

Dans cet exemple, nous avons créé un bouton fendu pour les opérations de pâte. Cliquer sur la zone du bouton principal exécute l’action de paste par défaut, tandis que le clic sur la flèche déroulante révèle des options de pâte supplémentaires.

Le Kendoreact Splitbutton fait partie de Kendoreact Premium.

Dropdownbutton

Le Kendoreact Dropdownbutton est un autre composant premium qui affiche une liste contextuelle avec des éléments d’action. Contrairement au SplitButton, le Dropdownbutton n’a pas de zone d’action par défaut distincte; Cliquer n’importe où sur le bouton ouvre le menu déroulant.

import * as React from "react";
import { DropDownButton } from "@progress/kendo-react-buttons";

const App = () => {
  const items = [
    "My Profile",
    "Friend Requests",
    "Account Settings",
    "Support",
    "Log Out",
  ];

  const handleItemClick = (event) => {
    console.log(`Selected option: ${event.item.text}`);
  };

  return (
    <div>
      <DropDownButton
        text="User Settings"
        items={items}
        onItemClick={handleItemClick}
      />
    </div>
  );
};

export default App;

Dans l’exemple ci-dessus, nous avons créé un bouton déroulant pour les paramètres utilisateur. Cliquer sur le bouton ouvre une liste déroulante avec diverses options liées à l’utilisateur.

Le Kendoreact Dropdownbutton fait partie de Kendoreact Premium.

Comme les autres composants du bouton Kendoreact, le Splitbutton et DropdownButton prennent en charge différents modes de remplissage et couleurs de thème. Et le React Buttongroup Composant est une belle fonctionnalité pour le regroupement des boutons.

Conclure

Les boutons sont des éléments interactifs essentiels dans les applications Web modernes, permettant aux utilisateurs de déclencher des actions et de faire des choix. Bien que nous ayons exploré plusieurs composants clés du package de boutons Kendoreact dans cet article, la bibliothèque offre encore plus d’options, notamment Couple, Barre d’outils, Ébrécher et Liste de puces—Soyez sûr de vérifier la documentation officielle pour découvrir tous les composants disponibles pour créer des interfaces utilisateur intuitives et visuellement attrayantes.

Consultez Kendoreact par vous-même:

Commencez avec Kendoreact