لینک با فلش
arrow-linkانیمیشنلینک «بیشتر بخوانید» که فلشش در فارسی رو به چپ نگاه میکنه؛ با هاور به همان سمت سُر میخوره، دو بازوش باز میشن و یک خط از پشت کشیده میشه تا فلش کامل بشه.
نصب
با CLI
اگر هنوز init نکردید، اول از راهنمای نصب پروژه را آماده کنید. بعد این دستور کامپوننت و وابستگیهاش را مینویسه.
$ npx vibefarsi add arrow-linkنصب دستی
محتوای تب «کد» را در
components/animations/arrow-link.tsxبگذارید.$ npm i lucide-reactکپی کل فایلregistry json
استفاده
usage.tsx
1import { ArrowLink } from "@/components/animations/arrow-link"23<ArrowLink href="/docs">بیشتر بخوانید</ArrowLink>پراپها
| پراپ | نوع | پیشفرض | توضیح |
|---|---|---|---|
| href | string | - | مقصد؛ بقیهی props به <a> میرسن. |
نکتهها
- فقط با CSS کار میکنه. کیبورد و لمس همان حالت ساکن را میبینن، پس هیچ اطلاعی فقط با حرکت منتقل نمیشه.