ะะพะผะฟะพะฝะตะฝััProะะพะฒะพะต
ะะตัะตัะตะบะฐััะฐั ัะพัะผะฐ ะพัะทัะฒะฐ
ะฃะทะบะฐั ะฟะฐะฝะตะปั ั ะบะฝะพะฟะบะพะน ยซะัะทัะฒยป ะฟะตัะตัะตะบะฐะตั ะฒ ะฟะพะปะต ะดะปั ัะตะบััะฐ. ะัะฟัะฐะฒะบะฐ ะฟะพ Cmd+Enter, ะฟะพัะปะต ะฝะตั ะฟะฐะฝะตะปั ัะฒะพัะฐัะธะฒะฐะตััั ะธ ะผะธะณะฐะตั ัะพัะบะพะน ััะฟะตั ะฐ.
ะะฐัััะพะนะบะธ
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