Zum Inhalt springen
Fieldbook
Menü
Anmelden
DE

Schaltflächen

Ringing bell badge

Ringing bell badge: Ein Benachrichtigungsklingelknopf aus schlichten Formen, der mit einem kleinen Tritt in beide Richtungen schwingt und eine Live-Zählung der ungelesenen Nachrichten anzeigt.

Ringing bell badge verwenden

Ringing bell badge verwendet das Vorschauformat „Inline“ mit der Theme-Einstellung „hell/dunkel“.

Vorschau anpassen

Diese Einstellungen werden an die Demo übergeben. Standardwerte und Grenzen gelten für die Vorschau; die vollständige Props-API steht in der Implementierung.

EinstellungTypStandardwertVorschaugrenzen
countnumber3Von 0 bis 99; Schrittweite 1
accentcolor#FF4D4DKeine weitere Grenze in den Metadaten.
sizenumber46Von 32 bis 72; Schrittweite 2
ringbooleantrueKeine weitere Grenze in den Metadaten.
Für welche Frameworks ist Ringing bell badge verfügbar?

Ringing bell badge ist für React, Vue, Svelte, Astro, HTML verfügbar. Die Live-Vorschau verwendet React; die folgenden Quellcode-Beobachtungen beziehen sich auf index.tsx. Prüfe die gewählte Portierung auf die benötigten Interaktionen.

Welche Abhängigkeiten hat Ringing bell badge?

Die React-Metadaten nennen diese zusätzlichen npm-Abhängigkeiten: motion, clsx, tailwind-merge.

Welche Details zur Barrierefreiheit sind in Ringing bell badge erkennbar?

Der React-Quellcode von Ringing bell badge enthält: native Elemente (button); Attribute und Ereignisbehandler (aria-hidden, aria-label). Dies sind Beobachtungen am Quellcode. Prüfe zugängliche Namen, Fokusreihenfolge und Tastaturverhalten auf der zusammengesetzten Seite.

Wie berücksichtigt Ringing bell badge reduzierte Bewegung?

Ringing bell badge liest die Bewegungseinstellung im React-Quellcode über useReducedMotion(). Von der Einstellung abhängige Ausdrücke in index.tsx: reduced ? NUDGE : SWING. Prüfe die vollständige Implementierung, gemeinsame Stile und die gewählte Portierung mit aktivierter Bewegungsreduktion; diese Beobachtungen belegen keinen vollständigen Animationsstopp.

Verbinde deinen Agenten

Verwandte offene Komponenten

Standbild der UI-Komponente Captioned Like Button von Fieldbook aus der Kategorie Schaltflächen.
2550Captioned Like ButtonSchaltflächenEine nur aus Symbolen bestehende Herzschaltfläche, die beim Schweben oder Fokussieren eine Beschriftung anzeigt, die von unten aufsteigt und sich bei Bedarf schnell ausfüllt.
Standbild der UI-Komponente Counting follow chip von Fieldbook aus der Kategorie Schaltflächen.
2472Counting follow chipSchaltflächenEin umrissener Chip, der ein Etikett mit einer Follower-Zählung verbindet und die geänderten Ziffern beim Einrasten durch ein maskiertes Fenster nach oben und beim Loslassen wieder nach unten rollt.
Standbild der UI-Komponente Follow count swipe von Fieldbook aus der Kategorie Schaltflächen.
2492Follow count swipeSchaltflächenEin umrissenes Follow-Plugin, dessen rundes Akzentabzeichen beim Schweben an das andere Ende gleitet und ein Band malt, das die Follower-Anzahl anzeigt; Durch Klicken wird die Folge mit einem Stempel festgeschrieben und die Zählung erhöht.
Standbild der UI-Komponente Icon badge send von Fieldbook aus der Kategorie Schaltflächen.
2716Icon badge sendSchaltflächenEine abgerundete Sendeschaltfläche, deren Glyphe sich in einem durchscheinenden kreisförmigen Abzeichen befindet, das heller wird und sich dreht, während die gesamte Schaltfläche beim Schweben angehoben und beim Drücken zur Ruhe kommt.
Standbild der UI-Komponente Outset ring tilt button von Fieldbook aus der Kategorie Schaltflächen.
2544Outset ring tilt buttonSchaltflächenEin Knopf im Abzeichen-Stil mit einem dicken Ring, der an der Außenseite schwebt, der wächst, sich um ein paar Grad neigt und beim Schweben einen harten Schatten wirft.
Standbild der UI-Komponente Travelling knob follow button von Fieldbook aus der Kategorie Schaltflächen.
2488Travelling knob follow buttonSchaltflächenEine umrissene Pille, deren runder Knopf beim Schweben zum anderen Ende rollt, eine Akzentspur dahinter malt und eine Follower-Zählung ins Blickfeld schiebt; Durch Klicken bleibt der verfolgte Status erhalten und die Anzahl erhöht sich.