Eingabefelder
Natural Language Date Field
Natural Language Date Field: Ein Textfeld, das Sätze wie „in 2 Tagen“ oder „nächsten Freitag“ als echtes Datum liest, mit einem Kalender-Popover und einem Live-Vorschausatz darunter.
Natural Language Date Field verwenden
Natural Language Date Field 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 | #38BDF8 | Keine weitere Grenze in den Metadaten. |
label | text | Schedule Date | Bis zu 30 Zeichen |
phrase | text | In 2 days | Bis zu 24 Zeichen |
previewPrefix | text | Your post will be published on | Bis zu 60 Zeichen |
Für welche Frameworks ist Natural Language Date Field verfügbar?
Natural Language Date Field 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 Natural Language Date Field?
Die React-Metadaten nennen diese zusätzlichen npm-Abhängigkeiten: motion, radix-ui, clsx.
Welche Details zur Barrierefreiheit sind in Natural Language Date Field erkennbar?
Der React-Quellcode von Natural Language Date Field enthält: native Elemente (button, input, label); Attribute und Ereignisbehandler (aria-describedby, aria-expanded, aria-hidden, aria-label, onKeyDown); Tastenvergleiche (ArrowDown). Dies sind Beobachtungen am Quellcode. Prüfe zugängliche Namen, Fokusreihenfolge und Tastaturverhalten auf der zusammengesetzten Seite.
Wie berücksichtigt Natural Language Date Field reduzierte Bewegung?
Natural Language Date Field liest die Bewegungseinstellung im React-Quellcode über useReducedMotion(). Von der Einstellung abhängige Ausdrücke in index.tsx: duration: reduced ? 0.08 : 0.16; reduced ? { opacity: 0 } : { opacity: 0, scale: 0.94, y: -4 }; reduced ? { opacity: 0 } : { opacity: 0, scale: 0.94, y: -4, transition: { duration: 0.1, ease: EASE } }. Prüfe die vollständige Implementierung, gemeinsame Stile und die gewählte Portierung mit aktivierter Bewegungsreduktion; diese Beobachtungen belegen keinen vollständigen Animationsstopp.
