مستندات کامل برای ساخت رابطهای مدرن
نحوه استفاده از کامپوننتها، انیمیشنها، ساختار پروژه و الگوهای طراحی مدرن را یاد بگیرید و سریعتر رابطهای حرفهای بسازید.
معرفی
این کتابخانه مجموعهای از کامپوننتها، بلاکها و الگوهای طراحی مدرن برای React و Next.js ارائه میدهد. تمامی بخشها با تمرکز روی تجربه توسعهدهنده، مقیاسپذیری و طراحی حرفهای ساخته شدهاند.
نصب وابستگیها
قبل از استفاده از کامپوننتها، پکیجهای موردنیاز را نصب کنید.
npm install framer-motion tailwindcss react-icons
آموزش Framer Motion
Framer Motion یکی از قدرتمندترین کتابخانههای انیمیشن برای React است که به شما اجازه میدهد انیمیشنهای نرم، حرفهای و مدرن بسازید. بسیاری از کامپوننتهای AAUI از این کتابخانه برای hover animation، page transition و micro interaction ها استفاده میکنند.
چه چیزهایی یاد میگیرید؟
• ساخت انیمیشنهای ورود
• Hover و Tap animation
• Scroll animation
• Layout transition
• ساخت interaction های مدرن
مثال ساده انیمیشن
کامپوننتها از Framer Motion برای ساخت انیمیشنهای نرم و مدرن استفاده میکنند.
<motion.div
initial={{ opacity: 0, y: 20 }}
animate={{ opacity: 1, y: 0 }}
>
Content
</motion.div>پیدا کردن کامپوننتها
کامپوننتها بر اساس کاربرد دستهبندی شدهاند؛ مانند فرمها، navigation، overlay و layout ها. هر صفحه شامل پیشنمایش زنده، سورس کد و قابلیت شخصیسازی است تا بتوانید سریعتر آنها را داخل پروژههای خود استفاده کنید.