Layout

Progressive edge blur

Progressive edge blur: Ein Band, das an einer Kante eines Bildlauffelds befestigt ist und dessen Inhalt allmählich in den Hintergrund tritt, anstatt ihn an einer harten Linie abzuschneiden.

Ridgeline trail report

Ridgeline closed above the second switchback until the crew clears last week's blowdown. Everything below that point is dry and in good shape.

Water is running at the creek crossing near mile 2.4, ankle deep and cold. Bring trekking poles if you are unsteady on wet rock.

The overlook at mile 4 lost its guardrail section to the spring runoff. Stay back from the edge; the crumbling is worse than it looks from the trail.

Rangers report two black bear sightings near the lower meadow this week, both in the early morning. Store food properly at the backcountry sites.

Permit quotas for the north loop reset on the first of the month. Walk-up spots open at the trailhead kiosk starting at 6am on a first-come basis.

Cell service is unreliable past the ridge junction. The emergency phone at the junction shelter is solar powered and tested monthly.

Progressive edge blur verwenden

Progressive edge blur verwendet das Vorschauformat „Karte“ 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
`position`	`select`	`bottom`	Optionen: top, bottom, left, right
`strength`	`number`	`2`	Von 0.5 bis 6; Schrittweite 0.5
`thickness`	`number`	`96`	Von 32 bis 200; Schrittweite 8
`layers`	`number`	`6`	Von 2 bis 12; Schrittweite 1
`curve`	`select`	`linear`	Optionen: linear, easeIn, easeOut, smooth

Für welche Frameworks ist Progressive edge blur verfügbar?

Progressive edge blur 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 Progressive edge blur?

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

Welche Details zur Barrierefreiheit sind in Progressive edge blur erkennbar?

Der React-Quellcode von Progressive edge blur enthält: 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 Progressive edge blur reduzierte Bewegung?

Progressive edge blur liest die Bewegungseinstellung im React-Quellcode über useReducedMotion(). Von der Einstellung abhängige Ausdrücke in index.tsx: transitionMs: reduceMotion ? 0 : 220. 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 Overlay scroll panel von Fieldbook aus der Kategorie Layout.

2396Overlay scroll panelLayoutEin begrenztes Panel, das die Bildlaufleiste der Plattform verbirgt und eine eigene schlanke Overlay-Spur zeichnet, die in Daumengröße dem Inhalt entspricht.

Standbild der UI-Komponente Focus scroll list von Fieldbook aus der Kategorie Layout.

2357Focus scroll listLayoutEine scrollbare Warteschlange, deren Zeilen in voller Größe und opacity erscheinen, wenn sie die Mitte der Ansicht erreichen, mit Hover und Tastaturauswahl.

Standbild der UI-Komponente Masked reveal disclosure von Fieldbook aus der Kategorie Layout.

2384Masked reveal disclosureLayoutEine Offenlegung, deren Panel auf seine natürliche Höhe anwächst, während ein weicher Verlaufsrand den Inhalt von oben ins Blickfeld wischt und beim Schließen dann rückwärts läuft.

Standbild der UI-Komponente Masonry flow von Fieldbook aus der Kategorie Layout.

1532Masonry flowLayoutEine Mauerwerkswand, die Kacheln unterschiedlicher Höhe in Säulen packt, jede einzelne anhebt, während sie ins Blickfeld gescrollt wird, und das gesamte Raster neu positioniert, wenn sich die Anzahl der Säulen ändert.

Standbild der UI-Komponente Blur fade reveal von Fieldbook aus der Kategorie Scrollen.

1843Blur fade revealScrollenInhalte, die unscharf und transparent ankommen, werden dann beim ersten Scrollen in die Ansicht geschärft, ohne dass sich ein einziges Pixel verschiebt.

Standbild der UI-Komponente Curved Scroll Wall von Fieldbook aus der Kategorie Layout.

2330Curved Scroll WallLayoutEine horizontal scrollende Wand aus Fotos, die auf einer sanft gekrümmten, gebogenen Ebene gerendert wird und endlos in beide Richtungen scrollt.