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
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 ;
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!
Que signifient les faces C et B ?
méthode de mise à niveau Win10
Pourquoi mon téléphone portable ne peut-il pas passer d'appels mais ne peut pas surfer sur Internet ?
Que signifie le serveur racine ?
Que signifie le réseau maillé ?
Introduction au contenu technologique de base Java
Qu'est-ce que CONNECTION_REFUSED ?
Processus d'achat et de vente de Bitcoin sur Huobi.com
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
