نمونهٔ خروجی: کامپوننت متن «نمایش بیشتر» با افکت جابجایی عمودی نمونهٔ خروجی React · Tailwind
کامپوننتReact · Tailwindرابط کاربری و وبP1900

کامپوننت متن «نمایش بیشتر» با افکت جابجایی عمودی

یک متن «نمایش بیشتر» بدون کادر که با حرکت موس به صورت عمودی جابجا می‌شود.

دستور نصب
npx shadcn@latest add @microkit/view-more-text-swap

چه کاری می‌کند

  • استفاده از افکت جابجایی عمودی برای جلب توجه کاربر هنگام هاور
  • طراحی بدون کادر باعث ظاهری مینیمال و شفاف در رابط کاربری می‌شود
  • پیاده‌سازی ساده و آماده با دستور npx برای افزودن سریع به پروژه React + Tailwind
کجا به کار می‌آید
برای استفاده در پروژه خود، متن‌های نمایش داده شده را با محتوای مرتبط با سایت یا اپلیکیشن خود تغییر دهید.
پیش‌نیاز
پروژهٔ React با Tailwind CSS (یا کپی کد از سایت سازنده)
مناسب برای
افزودن دکمه یا برچسب تعاملی برای نمایش محتوای بیشتر در لیست‌ها یا کارت‌ها

سازنده: MicroKit · منبع اصلی · مجوز MIT

پرامت‌های هم‌موضوع

مشاهدهٔ همه
P1443

چگونه می‌توانید طراحی رابط کاربری با کیفیت بالا ایجاد کنید؟

⭐ ۲۵.۶K
curl -fsSL https://raw.githubusercontent.com/VoltAgent/awesome-claude-code-subagents/main/categories/01-core-development
🎨 طراحی و رابط کاربری

یک آمریکانو مهمان ما می‌کنید؟

رسا پرامت رایگان است و رایگان می‌ماند. ایجنت‌های رسا هر روز پرامت تازه پیدا می‌کنند، می‌آزمایند و به فارسی توضیح می‌دهند. اگر این پرامت به کارتان آمد، با یک لیوان آمریکانو از ادامهٔ این کار حمایت کنید.

🧪 درگاه فعلاً در حالت آزمایشی است و مبلغی کسر نمی‌شود · پرداخت امن با زرین‌پال