Zum Inhalt springen
Fieldbook
Menü
Anmelden
DE

Typografie

Stretch type headline

Stretch type headline: Eine fette, schmale Überschrift, deren Buchstaben sich nahe dem Zeiger verbreitern und ihre Nachbarn zusammendrücken, um die Zeilenlänge zu halten, bevor sie mit einer benannten Kurve zurückfedern.

Stretch type headline verwenden

Stretch type headline verwendet das Vorschauformat „breit“ 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
texttextLoose type, tight line.Bis zu 60 Zeichen
stretchnumber0.6Von 0.2 bis 1; Schrittweite 0.05
feelselectelasticOptionen: elastic, spring, snap
capsbooleantrueKeine weitere Grenze in den Metadaten.
accentcolor#FF3A22Keine weitere Grenze in den Metadaten.
autoplaybooleantrueKeine weitere Grenze in den Metadaten.
showLabelbooleantrueKeine weitere Grenze in den Metadaten.
Für welche Frameworks ist Stretch type headline verfügbar?

Stretch type headline 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 Stretch type headline?

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

Welche Details zur Barrierefreiheit sind in Stretch type headline erkennbar?

Der React-Quellcode von Stretch type headline enthält: 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 Stretch type headline reduzierte Bewegung?

Stretch type headline 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

Standbild der UI-Komponente Easing curve lab von Fieldbook aus der Kategorie Animation.
2918Easing curve labAnimationSechs Bewegungskurven lassen Punkte von A nach B gegen einen gleichmäßig laufenden Takt antreten; Spuren und Livewerte zeigen Beschleunigung, Abbremsen und Überschwingen. Eine gewählte Kurve spielt erneut ab.
Standbild der UI-Komponente Jello squash button von Fieldbook aus der Kategorie Schaltflächen.
2556Jello squash buttonSchaltflächenEin umrissener Knopf, der beim Schweben mit Farbe überflutet wird und durch eine Squash- und Stretch-Sequenz wackelt, bevor er zur Ruhe kommt.
Standbild der UI-Komponente Letterpress proof card von Fieldbook aus der Kategorie Texteffekte.
2912Letterpress proof cardTexteffekteEin Buchdruckabzug einer kurzen Überschrift wird erneut eingefärbt und gedruckt; längeres Drücken sorgt für mehr Farbe und eine tiefere Prägung im Papier, und jeder Abzug wird nummeriert.
Standbild der UI-Komponente Particle drift von Fieldbook aus der Kategorie Hintergründe.
1536Particle driftHintergründeEin Leinwandfeld aus langsam treibenden Partikeln, die sich an den Rändern umhüllen, sich mit schwachen Linien verbinden und an der Stelle verschwinden, an der der Zeiger vorbeiläuft.
Standbild der UI-Komponente Pointer angle sweep von Fieldbook aus der Kategorie Hintergründe.
1732Pointer angle sweepHintergründeEin Panel, das durch eine konische Kurve beleuchtet wird, deren Ursprung unter dem Zeiger liegt und deren helle Kante darauf zurückzeigt und die sich langsam im Leerlauf dreht, wenn der Zeiger weggeht.
Standbild der UI-Komponente Pointer tilt photo card von Fieldbook aus der Kategorie Karten.
1877Pointer tilt photo cardKartenEine beschriftete Fotokarte, die sich auf einer Feder in Richtung des Zeigers neigt und bei der Drehung ein sanfter Glanz über die Vorderseite gleitet.