Schaltflächen

Tracing edge button

Tracing edge button: Eine durchgezogene Schaltfläche, bei der vier Haarlinien an gegenüberliegenden Ecken beginnen und beim Schweben den gesamten Umfang zeichnen und sich genau dann treffen, wenn der Umriss endet.

Tracing edge button verwenden

Tracing edge button 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
`label`	`text`	`Read more`	Bis zu 20 Zeichen
`accent`	`color`	`#38BDF8`	Keine weitere Grenze in den Metadaten.
`traceMs`	`number`	`350`	Von 150 bis 900; Schrittweite 25
`cornerRadius`	`number`	`5`	Von 0 bis 16; Schrittweite 1

Für welche Frameworks ist Tracing edge button verfügbar?

Tracing edge button 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 Tracing edge button?

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

Welche Details zur Barrierefreiheit sind in Tracing edge button erkennbar?

Der React-Quellcode von Tracing edge button 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 Tracing edge button reduzierte Bewegung?

Die Quellcode-Analyse fand in der index.tsx von Tracing edge button keine direkte Abfrage über useReducedMotion() oder matchMedia. 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 Perimeter draw button von Fieldbook aus der Kategorie Schaltflächen.

2484Perimeter draw buttonSchaltflächenEine kurze, dicke Stange, die unter dem Etikett geparkt ist, dehnt sich aus und bewegt sich beim Schweben um alle vier Seiten, bis sie sich zu einem vollständigen Umriss schließt, und zieht sich dann beim Verlassen wieder in die Stange zurück.

Standbild der UI-Komponente Corner bracket frame button von Fieldbook aus der Kategorie Schaltflächen.

2596Corner bracket frame buttonSchaltflächenEin leeres Etikett in Großbuchstaben, das von zwei L-förmigen Klammern umschlossen wird, die von gegenüberliegenden Seiten her eingeschoben werden und dann wachsen, um den Rahmen zu schließen.

Standbild der UI-Komponente Corner bracket seal button von Fieldbook aus der Kategorie Schaltflächen.

2644Corner bracket seal buttonSchaltflächenZwei kurze Eckwinkel wachsen an den Kanten entlang, bis sie beim Schweben einen vollständigen Rahmen um das Etikett bilden.

Standbild der UI-Komponente Dashed outline tooltip button von Fieldbook aus der Kategorie Schaltflächen.

2536Dashed outline tooltip buttonSchaltflächenEine gestrichelte Geisterschaltfläche, die beim Schweben oder Fokussieren mit ihrem Akzent überflutet, während sich ein spitzer Tooltip aus dem Rand entfaltet, der der Schaltfläche am nächsten liegt.

Standbild der UI-Komponente Diagonal blob flood button von Fieldbook aus der Kategorie Schaltflächen.

2538Diagonal blob flood buttonSchaltflächenEin umrissener Knopf, der von einem großen runden Klecks überflutet ist, der von der oberen Ecke diagonal nach innen gleitet und beim Halten dunkler wird.

Standbild der UI-Komponente Diagonal swipe button von Fieldbook aus der Kategorie Schaltflächen.

1850Diagonal swipe buttonSchaltflächenEin umrissener Knopf, der eine dünne, schräge Klinge hält, die sich aufrichtet und verbreitert, bis sie beim Schweben den Rahmen überschwemmt.