רכיביםProחדש

טופס משוב מתעצב

סרגל צר עם כפתור משוב מתעצב לשדה טקסט. שולחים ב-Cmd+Enter, ואז הסרגל נסגר ומהבהב בנקודת הצלחה.

התאמה

labeltriggerLabelplaceholderanimationSpeed1.0collapsedWidth360pxexpandedWidth360pxexpandedHeight200px

accentColor

glowColor

highlightColor

מבוסס על Morph Surface (MIT רישיון) · תנאי שימוש

מאפיינים

20 מאפיינים

מאפיין	סוג	ברירת מחדל	תיאור
label	string	`"Morph Surface"`	טקסט ליד הנקודה בסרגל המכווץ.
triggerLabel	string	`"Feedback"`	טקסט הכפתור שפותח את הטופס.
placeholder	string	`"What's on your mind?"`	רמז בשדה הריק.
submitLabel	string	`"⌘ Enter"`	תווית קיצור השליחה.
animationSpeed	number	`1`	מכפיל משך: גבוה יותר איטי יותר.
collapsedWidth	number \| 'auto'	`360`	רוחב הסרגל המכווץ.
collapsedHeight	number	`44`	גובה הסרגל המכווץ.
expandedWidth	number	`360`	רוחב הטופס הפתוח.
expandedHeight	number	`200`	גובה הטופס הפתוח.
triggerIcon	ReactNode	—	אייקון לפני טקסט הכפתור.
onSubmit	(data: FormData) => void \| Promise<void>	—	שליחת הטופס; הטקסט נמצא בשדה message.
isOpen / onOpenChange	boolean / (open: boolean) => void	—	שליטה במצב הפתיחה מבחוץ.
onOpen / onClose / onSuccess	() => void	—	נקראים בפתיחה, בסגירה ובשליחה מוצלחת.
springConfig	{ type: 'spring'; stiffness: number; damping: number; mass?: number }	—	קפיץ מותאם להתעצבות.
renderTrigger / renderContent / renderIndicator	(props) => ReactNode	—	החלפת הכפתור, הטופס או הנקודה בסימון משלכם.
triggerClassName / contentClassName	string	—	מחלקות לכפתור ולטופס.
accentColor	string	`"#ffffff"`	הצבע הראשי: נקודת המחוון, סמן הטקסט ומסגרת השדה בפוקוס.
glowColor	string	`"rgba(255,255,255,0.08)"`	זוהר רך מתחת למשטח.
highlightColor	string	`"rgba(255,255,255,0.25)"`	מסגרת בהירה ודקה סביב המשטח.
className	string	—	מחלקות נוספות.

תלויות

3 חבילות נדרשות

npm install motion clsx tailwind-merge

רכיבים דומים

לכל הרכיבים

טופס בשלבים אקורדיון עם וילון דוק כמו ב-macOSPro