Schaltflächen

Arrow to label pill

Arrow to label pill: Ein runder Chevron-Knopf, der sich beim Schweben in eine breite beschriftete Pille ausdehnt und die Markierung gegen ein Wort eintauscht, während die flache Füllung zu einer Rampe mit zwei Stopps wird.

Hover the circle, or tab to it, and it opens into a pill.

Arrow to label pill verwenden

Arrow to label pill 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.

Einstellung	Typ	Standardwert	Vorschaugrenzen
`accent`	`color`	`#9BE15D`	Keine weitere Grenze in den Metadaten.
`partner`	`color`	`#F5C542`	Keine weitere Grenze in den Metadaten.
`label`	`text`	`See the roadmap`	Bis zu 24 Zeichen
`expandedWidth`	`number`	`168`	Von 100 bis 280; Schrittweite 4
`duration`	`number`	`300`	Von 100 bis 900; Schrittweite 25

Für welche Frameworks ist Arrow to label pill verfügbar?

Arrow to label pill 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 Arrow to label pill?

Die React-Metadaten nennen keine zusätzlichen npm-Abhängigkeiten neben React.

Welche Details zur Barrierefreiheit sind in Arrow to label pill erkennbar?

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

Wie berücksichtigt Arrow to label pill reduzierte Bewegung?

Arrow to label pill liest die Bewegungseinstellung im React-Quellcode über matchMedia(prefers-reduced-motion). 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

2714Expanding icon pillSchaltflächenEine runde Symbolschaltfläche, die sich beim Schweben in eine beschriftete Pille ausdehnt und bei Eintreffen einer Akzentfüllung ihre Glyphe gegen ein Wort eintauscht.

Standbild der UI-Komponente Amber upload pill von Fieldbook aus der Kategorie Schaltflächen.

2707Amber upload pillSchaltflächenEin warmer Farbverlaufs-Upload-Pill mit einem hellen Rand, der den Farbstich verbreitert und das Etikett beim Schweben von hinten beleuchtet.

Standbild der UI-Komponente Draining fill button von Fieldbook aus der Kategorie Schaltflächen.

2588Draining fill buttonSchaltflächenEine umrissene Pille, die zu Beginn vollständig mit Farbe überflutet ist und beim Schweben zu einem schmalen Band am Fuß abfließt und sich beim Belassen von unten wieder auffüllt.

1827Expanding icon pillSchaltflächenEine runde Symbolschaltfläche, die beim Schweben oder Fokussieren zu einer beschrifteten Pille heranwächst und deren Glyphe eine volle Umdrehung macht, wenn die Beschriftung hineingleitet.

Standbild der UI-Komponente Floating download pill von Fieldbook aus der Kategorie Schaltflächen.

1857Floating download pillSchaltflächenEine vollständig abgerundete Pille, die über der Seite zu schweben scheint und sich beim Bewegen und Drücken näher daran bewegt.

Standbild der UI-Komponente Gap stretch arrow button von Fieldbook aus der Kategorie Schaltflächen.

2585Gap stretch arrow buttonSchaltflächenEine Pille mit fester Breite, deren nachlaufender Pfeil beim Schweben zum äußersten Rand wandert und die Lücke nach einem stationären Etikett erweitert, wobei eine schwache Spurkopie einem Schlag dahinter folgt.