Comment créer une info-bulle avec une interface utilisateur flottante

Dans le développement de logiciels, une bonne expérience utilisateur est généralement l'une des choses les plus importantes à prendre en compte lors de la création de logiciels. Vous n'êtes pas obligé de faire deviner à vos utilisateurs comment utiliser votre logiciel ; cela pourrait affecter la convivialité de votre application, ce qui n'est pas ce que vous souhaitez.

La plupart des utilisateurs sont impatients, ils ne sont peut-être pas assez patients pour explorer et voir comment fonctionne votre application, mais avec une info-bulle, vous pouvez facilement les guider à travers votre application comme un guide touristique.

Aujourd'hui, nous allons discuter de la façon de créer facilement une info-bulle avec l'interface utilisateur flottante.

Info-bulle

Les info-bulles sont des fenêtres contextuelles petites mais informatives qui apparaissent lorsqu'un utilisateur survole, clique ou se concentre sur un élément. Certaines info-bulles peuvent ne pas nécessiter qu'un utilisateur les déclenche ; au lieu de cela, ils peuvent servir de guides lorsqu'un utilisateur visite votre application pour la première fois, fournissant automatiquement un contexte et des instructions.

UI flottante

Floating UI est une bibliothèque étonnante qui vous permettra de créer de superbes info-bulles qui pourront facilement ajuster leur position en fonction de la taille de l'écran. Vous n'avez pas à vous soucier de la réactivité, l'interface utilisateur flottante s'en chargera pour vous.

Parfois, créer des info-bulles efficaces peut prendre du temps, cela implique certaines étapes que vous pourriez trouver ennuyeuses à suivre, c'est pourquoi vous devez utiliser des bibliothèques comme Floating UI.

Prérequis nécessaires pour comprendre cet article

1. Connaissance de base de React js.
2. Compréhension de base de javascript.
3. Node js doit être installé sur votre ordinateur (pour que votre application React s'exécute)
4. Et enfin, un navigateur Web comme Google Chrome.

Installons l'interface utilisateur flottante

Nous devons installer Floating UI dans notre application React js. Et nous pouvons le faire en exécutant cette commande.

npm installer @floating-ui/react

Nous devons importer de nombreuses fonctions de la bibliothèque Floating UI, ces fonctions nous permettront de créer une info-bulle sans effort.

`
importer {
utiliserCliquez,
utiliserFlottant,
utiliserInteractions,
retourner,
décalage,
utiliserRejeter,
} de '@floating-ui/react';

`

Utilisation de déstructurationFlottant

`
const {
références : calendrier1Réfs,
FloatingStyles : calendrier1FloatingStyles,
contexte : calendrier1Contexte,
} = utiliserFlottant({
ouvert : isOpen1,
onOpenChange : setIsOpen1,
placement : 'bas de gamme',
middleware : [
retourner({
Emplacements de secours : ['right'],
}),

offset({ mainAxis : 20, crossAxis : 70 }),
],
});
`

Réfs

Cela nous permet de connecter notre info-bulle à sa référence sans effort. Notre référence devrait ressembler à ceci.

<i
      className="fa-light fa-calendar cursor-pointer text-gray-500"
            ref={calendar1Refs.setReference}
           ></i>

Alors que notre info-bulle devrait ressembler à ceci.

{isOpen1 && (
            <div
             className="absolute z-10 bg-white"
             ref={calendar1Refs.setFloating}

            >
             <Calendar onChange={handleSelectDate1} />
            </div>
           )}The difference here is that our tooltip reference has “setReference” while our tooltip has “setFloating”. This will enable them to be connect, making sure that the tooltip floats around it`s reference.

Styles flottants

Le floatStyles est un objet qui contient des styles CSS qui déterminent la position et les dimensions exactes de votre élément flottant (comme une info-bulle) par rapport à son élément de référence.

{isOpen2 && (
          <div
           className="z-[9999]"
           ref={calendar1Refs.setFloating}
          >



<p><strong>Context</strong></p>

<p>In Floating UI, context (like calendar1Context in this case) provides a way to manage and share state and interactions across multiple hooks. This helps us to share events like click, hover etc. It also helps to dismiss the interactions seamlessly, ensuring that each tooltip or floating element behaves consistently.<br>
</p>

<pre class="brush:php;toolbar:false">const click1 = useClick(calendar1Context);
 const dismissCalendar1ToolTip = useDismiss(calendar1Context);

Ouvrir

L'open prop est très important pour la visibilité de notre info-bulle. Cela nous aide à gérer la visibilité de notre info-bulle en fonction de l'état interne d'un composant.

Nous créons d'abord un useState avec une valeur par défaut de false afin de pouvoir masquer l'info-bulle jusqu'à ce qu'un utilisateur clique dessus. Cet useState permet de savoir si l'info-bulle est actuellement ouverte ou non.

const [isOpen, setIsOpen] = useState(false);

surOpenChange

Ce rappel nous aide à mettre à jour la valeur setIsOpen. Ainsi, chaque fois qu'un utilisateur clique ou déclenche un événement, nous définirons la valeur false dans isOpen sur true, vice versa.

Placement

Cela permet de déterminer où placer notre info-bulle par rapport à sa référence. Nous pouvons décider de placer notre info-bulle dans n'importe laquelle de ces positions ;

1. en bas
2. bas de gamme
3. départ par le bas
4. à gauche
5. extrémité gauche
6. départ à gauche
7. c'est vrai
8. extrémité droite
9. bon départ
10. haut
11. haut de gamme
12. top-start

Retourner

Le middleware flip qui se trouve à l’intérieur du tableau middleware ajuste automatiquement la position de l’élément flottant s’il n’y a pas assez d’espace dans la direction spécifiée. Ici, s'il n'y a pas assez d'espace en dessous, il tentera de le positionner en utilisant les emplacements de secours (['bottom-end']). Nous pouvons choisir n'importe quelle position que nous voulons en fonction de l'espace disponible.

middleware: [
   flip({
    fallbackPlacements: ['bottom-end'],
   }),

    ],

Décalage

Ce middleware crée un espacement entre la référence et l'élément flottant. mainAxis : 20 crée un espace de 20 px dans la direction principale (en dessous de la référence, dans ce cas), tandis que crossAxis : 50 crée un décalage de 50 px le long de l'axe perpendiculaire.

middleware: [
   offset({ mainAxis: 20, crossAxis: 50 }),
  ],

Voici à quoi devrait ressembler la configuration

const [isOpen, setIsOpen] = useState(false);
 const {
  refs: calendar1Refs,
  floatingStyles: calendar1FloatingStyles,
  context: calendar1Context,
 } = useFloating({
  open: isOpen,
  onOpenChange: setIsOpen,
  placement: 'bottom-end',

  middleware: [
   flip({
    fallbackPlacements: ['bottom-end'],
   }),

   offset({ mainAxis: 20, crossAxis: 50 }),
  ],
 });

 const click = useClick(calendar1Context);
 const dismissImageToolTip = useDismiss(calendar1Context);

 const {
  getReferenceProps: calendar1TooltipReference,
  getFloatingProps: calendar1TooltipFloatingProps,
 } = useInteractions([click, dismissImageToolTip]);

La démo

Cliquez sur ce lien pour regarder la vidéo de démonstration.

Dans la vidéo, vous pouvez clairement voir que notre info-bulle ajuste sa position si l'espace n'est pas suffisant pour la contenir. Il utilise la position des emplacements de secours que nous avons définis.

Conclusion

L'interface utilisateur flottante offre un moyen puissant et flexible d'implémenter des info-bulles dans les applications React. Grâce à son positionnement automatique et à ses riches options de personnalisation, vous pouvez créer des info-bulles qui améliorent l'expérience utilisateur de votre application tout en conservant des fonctionnalités fiables sur différents appareils et tailles d'écran.

Cela implique tellement de fonctions et d'objets comme ; refs, floatStyles, context, useState pour la gestion de l'état, onOpenChange, placement, flip et offset.

En suivant ce guide, vous disposez désormais des connaissances nécessaires pour implémenter des info-bulles réactives et conviviales dans vos applications React. Expérimentez avec différentes configurations et middleware pour créer l'expérience d'info-bulle parfaite pour vos utilisateurs.

Bon codage ?

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!