Bei der Softwareentwicklung ist eine gute Benutzererfahrung normalerweise eines der wichtigsten Dinge, die beim Erstellen von Software berücksichtigt werden müssen. Sie müssen Ihre Benutzer nicht raten lassen, wie sie Ihre Softwareanwendung verwenden; Dies k?nnte die Benutzerfreundlichkeit Ihrer Anwendung beeintr?chtigen, was nicht Ihren Wünschen entspricht.

Die meisten Benutzer sind ungeduldig. Sie haben m?glicherweise nicht die Geduld, sich mit der Funktionsweise Ihrer App vertraut zu machen, aber mit einem Tooltip k?nnen Sie sie ganz einfach wie ein Reiseführer durch Ihre Anwendung führen.

Heute besprechen wir, wie Sie mit Floating UI ganz einfach einen Tooltip erstellen k?nnen.

Tooltip

Tooltips sind kleine, aber informative Popups, die angezeigt werden, wenn ein Benutzer mit der Maus über ein Element f?hrt, darauf klickt oder sich darauf konzentriert. Für einige Tooltips ist es m?glicherweise nicht erforderlich, dass ein Benutzer sie ausl?st. Stattdessen k?nnen sie als Leitfaden dienen, wenn ein Benutzer Ihre Anwendung zum ersten Mal besucht, und automatisch Kontext und Anweisungen bereitstellen.

Floating UI

Floating UI ist eine erstaunliche Bibliothek, mit der Sie tolle Tooltips erstellen k?nnen, deren Position je nach Bildschirmgr??e einfach angepasst werden kann. Sie müssen sich keine Sorgen um die Reaktionsf?higkeit machen, Floating UI übernimmt das für Sie.

Manchmal kann das Erstellen effizienter Tooltips zeitaufw?ndig sein. Es erfordert einige Schritte, die Sie m?glicherweise langweilig finden. Deshalb müssen Sie Bibliotheken wie Floating UI verwenden.

Voraussetzungen, die Sie ben?tigen, um diesen Artikel zu verstehen

1. Grundkenntnisse von React js.
2. Grundlegendes Verst?ndnis von Javascript.
3. Auf Ihrem Computer muss Node js installiert sein (damit Ihre React-Anwendung ausgeführt werden kann)
4. Und schlie?lich ein Webbrowser wie Google Chrome.

Lassen Sie uns Floating UI installieren

Wir müssen Floating UI in unserer React js-Anwendung installieren. Und das k?nnen wir tun, indem wir diesen Befehl ausführen.

npm install @floating-ui/react

Wir müssen viele Funktionen aus der Floating UI-Bibliothek importieren. Mit diesen Funktionen k?nnen wir mühelos einen Tooltip erstellen.

`
importieren {
verwendenKlick,
verwendenFloating,
useInteractions,
umdrehen,
Offset,
useDismiss,
} von '@floating-ui/react';

`

Destructure useFloating

`
const {
Refs: Calendar1Refs,
FloatingStyles: Calendar1FloatingStyles,
Kontext: Calendar1Context,
} = useFloating({
offen: isOpen1,
onOpenChange: setIsOpen1,
Platzierung: 'bottom-end',
Middleware: [
flip({
fallbackPlacements: ['right'],
}),

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

Referenzen

Dadurch k?nnen wir unseren Tooltip mühelos mit seiner Referenz verknüpfen. Unsere Referenz sollte so aussehen.

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

Unser Tooltip sollte dabei so aussehen.

{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.

FloatingStyles

FloatingStyles ist ein Objekt, das CSS-Stile enth?lt, die die genaue Position und Abmessungen Ihres schwebenden Elements (wie ein Tooltip) im Verh?ltnis zu seinem Referenzelement bestimmen.

{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);

Ge?ffnet

Die offene Requisite ist sehr wichtig für die Sichtbarkeit unseres Tooltips. Es hilft uns, die Sichtbarkeit unseres Tooltips basierend auf dem internen Status einer Komponente zu verwalten.

Wir erstellen zun?chst einen useState mit dem Standardwert false, damit wir den Tooltip ausblenden k?nnen, bis ein Benutzer darauf klickt. Dieser useState verfolgt, ob der Tooltip derzeit ge?ffnet ist oder nicht.

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

onOpenChange

Dieser Rückruf hilft uns, den setIsOpen-Wert zu aktualisieren. Wenn also ein Benutzer auf ein Ereignis klickt oder es ausl?st, setzen wir den Wert ?false“ in ?isOpen“ auf ?true“ und umgekehrt.

Platzierung

Dies hilft zu bestimmen, wo unser Tooltip im Verh?ltnis zu seiner Referenz platziert werden soll. Wir k?nnen entscheiden, unseren Tooltip an einer dieser Positionen zu platzieren;

1. unten
2. unteres Ende
3. Untenstart
4. links
5. linkes Ende
6. Linksstart
7. richtig
8. rechtes Ende
9. Rechtsstart
10. oben
11. Top-End
12. Top-Start

Flip

Die Flip-Middleware, die sich im Middleware-Array befindet, passt die Position des schwebenden Elements automatisch an, wenn in der angegebenen Richtung nicht genügend Platz vorhanden ist. Wenn unten nicht genügend Platz vorhanden ist, wird versucht, ihn mithilfe der Fallback-Platzierungen (['bottom-end']) zu positionieren. Wir k?nnen je nach verfügbarem Platz jede gewünschte Position w?hlen.

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

    ],

Offset

Diese Middleware erstellt einen Abstand zwischen der Referenz und dem schwebenden Element. mainAxis: 20 erzeugt eine 20-Pixel-Lücke in der Prim?rrichtung (in diesem Fall unter der Referenz), w?hrend crossAxis: 50 einen 50-Pixel-Versatz entlang der senkrechten Achse erstellt.

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

So sollte die Konfiguration aussehen

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]);

Die Demo

Klicken Sie auf diesen Link, um das Demovideo anzusehen.

Im Video k?nnen Sie deutlich sehen, dass unser Tooltip seine Position anpasst, wenn der Platz nicht ausreicht, um es aufzunehmen. Es verwendet die Position der von uns definierten FallbackPlacements.

Fazit

Floating UI bietet eine leistungsstarke und flexible M?glichkeit, Tooltips in React-Anwendungen zu implementieren. Mit der automatischen Positionierung und den umfangreichen Anpassungsoptionen k?nnen Sie Tooltips erstellen, die das Benutzererlebnis Ihrer Anwendung verbessern und gleichzeitig zuverl?ssige Funktionalit?t auf verschiedenen Ger?ten und Bildschirmgr??en aufrechterhalten.

Es umfasst so viele Funktionen und Objekte wie; refs, FloatingStyles, Kontext, useState für Zustandsverwaltung, onOpenChange, Platzierung, Flip und Offset.

Wenn Sie dieser Anleitung folgen, verfügen Sie nun über das Wissen, reaktionsf?hige und benutzerfreundliche Tooltips in Ihre React-Anwendungen zu implementieren. Experimentieren Sie mit verschiedenen Konfigurationen und Middleware, um das perfekte Tooltip-Erlebnis für Ihre Benutzer zu schaffen.

Viel Spa? beim Codieren?

Das obige ist der detaillierte Inhalt vonSo erstellen Sie einen Tooltip mit schwebender Benutzeroberfl?che. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!