Ajout de contexte à votre interface utilisateur avec Kendoreact Info-tools

Explorons l’info-bulle Kendoreact, qui peut fournir des conseils à vos utilisateurs sur Hover. Découvrez comment l’intégrer dans une application React avec différentes options de personnalisation.

Les info-bulleurs sont de petits éléments contextuels qui fournissent des informations supplémentaires lorsqu’un utilisateur plane, se concentre sur ou interagit avec un élément spécifique. Ils sont largement utilisés dans les applications Web pour améliorer l’expérience utilisateur en affichant des conseils, descriptions ou des instructions utiles liés aux éléments d’interface utilisateur.

Dans cet article, nous explorerons le Info-bulle réagi Composant de Progress Kendoreact, ses fonctionnalités et comment l’intégrer dans une application React avec différentes options de personnalisation.

Le Composant d’info-bulle réagi Le package 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!

Le composant Info-tools Kendoreact fait partie d’un Bibliothèque d’interface utilisateur Reactqui fournit des composants natifs pour l’écosystème React. Le composant Info-toolt Kendoreact est distribué via le @ Progress / Kendo-React-Tooltip Package NPM et peut être importé directement.

npm install @progress/kendo-react-tooltip

Une fois installé, nous pouvons importer le composant Info-Toolp dans notre application React:

import { Tooltip } from "@progress/kendo-react-tooltip";

Voici un exemple simple qui démontre l’utilisation de base du composant Info-toolt Kendoreact en enveloppe un bouton à l’intérieur:

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

const App = () => {
  return (
    <Tooltip anchorElement="target" position="right" parentTitle>
      <Button title="This is a tooltip message!">Button</Button>
    </Tooltip>
  );
};

export default App;

Ci-dessus, le composant info-bulle s’enroule autour d’un élément de bouton, en fixant l’influence à l’élément enfant à l’aide anchorElement="target". Et position="right" positionne l’info-bulle à droite de l’élément cible.

Lors de l’exécution de l’exemple ci-dessus, nous remarquerons un petit message d’info-bulle qui indique, "This is a tooltip message!" est montré lorsque le bouton est survolé.

Positionnement

Le position La propriété nous permet de régler la position de l’info-bulle. Les valeurs disponibles sont top, bottom, left et right.

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

const App = () => {
  return (
    <div>
      <Tooltip anchorElement="target" position="top" parentTitle>
        <Button title="Tooltip on top">Top</Button>
      </Tooltip>
      <Tooltip anchorElement="target" position="bottom" parentTitle>
        <Button title="Tooltip on bottom">Bottom</Button>
      </Tooltip>
      <Tooltip anchorElement="target" position="left" parentTitle>
        <Button title="Tooltip on left">Left</Button>
      </Tooltip>
      <Tooltip anchorElement="target" position="right" parentTitle>
        <Button title="Tooltip on right">Right</Button>
      </Tooltip>
    </div>
  );
};

export default App;

Dans l’exemple ci-dessus, différentes positions d’info-bulle sont spécifiées à l’aide du position soutenir. Chaque bouton est enveloppé à l’intérieur d’un composant d’info-bulle avec une valeur de position unique (top, bottom, left, right). Nous remarquerons que chaque info-bulle apparaît dans la direction respective lors de la survol des boutons.

Éléments d’ancrage

Nous pouvons cibler des éléments spécifiques Pour afficher une info-bulle à l’aide du filter propriété, permettant à des info-bulles d’apparaître uniquement sur des éléments désignés. Par exemple, nous pouvons faire apparaître uniquement des info-bulles sur <strong> Éléments:

import * as React from "react";
import { Tooltip } from "@progress/kendo-react-tooltip";

const App = () => {
  const filterElements = (element) => element.tagName === "STRONG";

  return (
    <Tooltip filter={filterElements} anchorElement="target" parentTitle>
      <div>
        <p>
          Hover over this
          <strong title="KendoReact Tooltip"> Tooltip </strong>
          to see it in action.
        </p>
        <p>
          Other elements, such as
          <em title="Default browser tooltip"> this italicized text</em>, will only
          display the default browser tooltip.
        </p>
      </div>
    </Tooltip>
  );
};

export default App;

Le filter la propriété ci-dessus définit les info-bullets pour apparaître uniquement lorsqu’il oscille <strong> Éléments. L’info-bulle ne s’affichera pas pour d’autres éléments, même s’ils ont un title attribut. Cette technique nous permet de contrôler quels éléments reçoivent des info-bulleurs.

Mode contrôlé

Par défaut, les info-bulleurs apparaissent sur planant. Cependant, nous pouvons contrôler par programme leur visibilité en utilisant le open et targetElement propriétés. Ceci est utile lorsque nous voulons que l’info-bulle apparaisse uniquement sur des actions utilisateur spécifiques comme les clics du bouton.

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

const App = () => {
  const wrapper = React.useRef(null);
  const firstElement = React.useRef(null);
  const secondElement = React.useRef(null);
  const [open, setOpen] = React.useState(false);
  const [targetElement, setTargetElement] = React.useState(null);

  const showTooltip = (element) => {
    setOpen(true);
    setTargetElement(element.current);
  };

  return (
    <Tooltip
      anchorElement="target"
      open={open}
      targetElement={targetElement}
      appendTo={wrapper.current}
    >
      <div ref={wrapper}>
        <p>
          Click the button to show the tooltip with
          <a ref={firstElement} href="#" title="Tooltip for first link">
            {" "}
            first link
          </a> as an anchor.
          <Button onClick={() => showTooltip(firstElement)}>
            Show Tooltip
          </Button>
        </p>
        <p>
          Click the button to show the tooltip with
          <a ref={secondElement} href="#" title="Tooltip for second link">
            {" "}
            second link
          </a> as an anchor.
          <Button onClick={() => showTooltip(secondElement)}>
            Show Tooltip
          </Button>
        </p>
        <Button
          onClick={() => {
            setOpen(false);
            setTargetElement(null);
          }}
        >
          Hide Tooltip
        </Button>
      </div>
    </Tooltip>
  );
};

export default App;

Dans l’exemple ci-dessus, le useRef Hook fait référence à l’élément bouton qui déclenche l’info-bulle et le hook usestate gère la visibilité de l’info-bulle. Quand le "Show Tooltip" le bouton est cliqué, le open L’état est réglé sur trueet le targetElement est affecté à la référence du bouton, faisant apparaître l’info-bulle. Inversement, en cliquant "Hide Tooltip" réinitialisation open à falsecachant l’info-bulle.

Personnalisation

L’infultification de Kendorect offre beaucoup flexibilité. Cependant, il peut y avoir des moments où nous voulons réutiliser des fonctionnalités spécifiques dans notre application. Par exemple, nous pouvons souhaiter que toutes les infractions soient représentées par un ? Icône que les utilisateurs peuvent planer pour plus d’informations.

Nous pouvons y parvenir en créant un réutilisable TooltipWrapper Composant qui rend systématiquement des info-bulleurs à travers l’application. Ce composant peut accepter un message d’info-bulle en tant qu’hélice et afficher une infraction à ouvrages standardisée lorsqu’il a survolé.

Voici un pseudo-exemple de la façon dont nous pouvons implémenter quelque chose comme ceci:

.tooltip-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  font-size: 10px;
  font-weight: bold;
  color: #fff;
  background-color: #000;
  border-radius: 50%;
  text-align: center;
  cursor: help;
  margin-left: 4px;
  vertical-align: middle;
  line-height: 16px;
}

import * as React from "react";
import { Tooltip } from "@progress/kendo-react-tooltip";
import "./TooltipWrapper.css";

const TooltipWrapper = ({ message }) => {
  return (
    <Tooltip anchorElement="target" position="top">
      <span title={message} className="tooltip-icon">
        ?
      </span>
    </Tooltip>
  );
};

const App = () => {
  return (
    <div>
      <p>
        This is some text with additional information
        <TooltipWrapper message="This is a helpful tooltip message!" />.
      </p>
      <p>
        Here’s another tooltip example
        <TooltipWrapper message="Another informative tooltip!" />.
      </p>
    </div>
  );
};

export default App;

Le <TooltipWrapper /> Le composant ci-dessus résume le kendoreact <Tooltip /> Logique et assure la cohérence dans l’application. L’info-bulle est déclenchée lorsqu’il oscille sur un ? icône, un indicateur universel pour plus d’informations. Le message L’approprié permet la personnalisation du texte de l’info-bulle sans modifier la structure des composants.

Les info-bulleurs de Kendoreact ne se limitent pas aux boutons et aux éléments autonomes – ils s’étendent également à d’autres composants plus sophistiqués comme ceux de la Bibliothèque des graphiques React. La bibliothèque des graphiques propose des graphiques et des séries de visualisation des données étendues et dans le contexte des info-bulles, les graphiques KendoreAct prennent en charge trois types d’info-bulleurs:

• Infraction de série – Affiche des informations lorsqu’il oscille sur un point de données spécifique.
• Info-bulle partagée – Affiche une info-bulle pour la catégorie planée, aidant les utilisateurs à comparer plusieurs points de données.
• Info-bulle de croix – apparaît sur les axes du graphique pour indiquer des valeurs exactes.

Nous pouvons activer l’influence de la série dans le composant du graphique Kendoreact en utilisant le ChartTooltip composant à l’échelle mondiale ou configurer des séries individuelles avec le ChartSeriesItemTooltip composant. Vous trouverez ci-dessous un exemple de démonstration de la configuration de l’infiltration de la série pour un graphique particulier:

import * as React from "react";
import {
  Chart,
  ChartTooltip,
  ChartSeries,
  ChartSeriesItem,
  ChartSeriesItemTooltip,
} from "@progress/kendo-react-charts";

const seriesData = [1, 2, 3];

const ChartContainer = () => (
  <Chart>
    <ChartTooltip />
    <ChartSeries>
      <ChartSeriesItem data={seriesData} />
      <ChartSeriesItem data={seriesData}>
        <ChartSeriesItemTooltip background="green" />
      </ChartSeriesItem>
    </ChartSeries>
  </Chart>
);

export default ChartContainer;

Dans l’exemple ci-dessus, le <ChartTooltip /> Aide à fournir des informations sur chaque point de données, ce qui facilite la compréhension des tendances, la comparaison des valeurs et la prise de décisions basées sur les données en un coup d’œil.

La bibliothèque de graphiques Kendoreact aide à fournir de puissants composants de visualisation de données pour créer des graphiques interactifs et visuellement attrayants dans les applications React. Pour plus de détails, consultez le Documentation officielle de la bibliothèque des graphiques.

Conclure

Les infractions améliorent l’expérience utilisateur en fournissant des informations contextuelles sans encombrer l’interface utilisateur. Ils aident les utilisateurs à comprendre les fonctionnalités, à naviguer sur les applications et à améliorer l’accessibilité. Le composant Info-toolt Kendoreact offre un moyen flexible et personnalisable d’ajouter des info-bulles pour réagir des applications, en prenant en charge diverses options de positionnement, des éléments d’ancrage, des modes contrôlés et plus encore.

Pour plus de détails, assurez-vous de consulter l’officiel Documentation info-bulle!

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