Linkv1.0.0
لینک متنی سبک با محور رنگ هم‌راستا با بقیهٔ کامپوننت‌ها، حالت‌های زیرخط، و پشتیبانی از لینک خارجی.
این کامپوننت فعلاً برای ۱ فریم‌ورک از ۴ فریم‌ورک آماده است.
این نمونه هنوز برای Vue پورت نشده است؛ آنچه می‌بینید نسخهٔ ری‌اکت است.
این نمونه هنوز برای Svelte پورت نشده است؛ آنچه می‌بینید نسخهٔ ری‌اکت است.
این نمونه هنوز برای Angular پورت نشده است؛ آنچه می‌بینید نسخهٔ ری‌اکت است.
نصب
با CLI اختصاصی digdesign کامپوننت را از رجیستری دیگ نصب کنید؛ وابستگی‌ها و فایل‌ها خودکار اضافه می‌شوند.
npx digdesign@latest add https://docs.digdesign.ir/r/link.jsonpnpm dlx digdesign@latest add https://docs.digdesign.ir/r/link.jsonyarn dlx digdesign@latest add https://docs.digdesign.ir/r/link.jsonbunx --bun digdesign@latest add https://docs.digdesign.ir/r/link.jsonاین کامپوننت هنوز برای Vue پورت نشده است.
نسخهٔ ری‌اکت آماده است؛ پورت این فریم‌ورک در دست کار است.
این کامپوننت هنوز برای Svelte پورت نشده است.
نسخهٔ ری‌اکت آماده است؛ پورت این فریم‌ورک در دست کار است.
این کامپوننت هنوز برای Angular پورت نشده است.
نسخهٔ ری‌اکت آماده است؛ پورت این فریم‌ورک در دست کار است.
استفاده
import { Link } from "@/components/ui/link"
<Link href="/docs">مستندات</Link>این کامپوننت هنوز برای Vue پورت نشده است.
نسخهٔ ری‌اکت آماده است؛ پورت این فریم‌ورک در دست کار است.
این کامپوننت هنوز برای Svelte پورت نشده است.
نسخهٔ ری‌اکت آماده است؛ پورت این فریم‌ورک در دست کار است.
این کامپوننت هنوز برای Angular پورت نشده است.
نسخهٔ ری‌اکت آماده است؛ پورت این فریم‌ورک در دست کار است.
ترکیب اجزا
Link با asChild روی هر عنصر دیگری (مثلاً next/link) می‌نشیند: <Link asChild><NextLink href="/docs">مستندات</NextLink></Link>
پراپ isExternal هم target/rel امن اضافه می‌کند و هم آیکون کوچک؛ اگر فقط آیکون بدون رفتار خارجی می‌خواهید از showAnchorIcon تنها استفاده کنید.
دسترس‌پذیری
- روی a استاندارد سوار است؛ href همیشه بدهید تا با تب قابل‌فوکوس و با کیبورد قابل‌فعال‌سازی بماند.
- isDisabled به‌جای حذف href، aria-disabled و tabIndex=-1 می‌گذارد؛ چون a بدون href اصلاً لینک محسوب نمی‌شود.
- برای لینک خارجی (isExternal)، rel=noopener noreferrer خودکار اضافه می‌شود تا صفحهٔ مقصد به window.opener دسترسی نداشته باشد.
- اگر لینک فقط آیکون دارد، aria-label معنادار روی خودِ Link بگذارید.
مرجع API
Link
| ویژگی | نوع | پیش‌فرض | توضیح |
|---|---|---|---|
| color | "foreground" | "primary" | "success" | "warning" | "destructive" | "primary" | رنگ متن. |
| underline | "none" | "hover" | "always" | "hover" | رفتار زیرخط. |
| size | "sm" | "md" | "lg" | "md" | اندازهٔ متن. |
| isDisabled | boolean | false | غیرفعال کردن با aria-disabled بدون حذف href. |
| isExternal | boolean | false | target=_blank + rel امن + آیکون خودکار. |
| showAnchorIcon | boolean | — | نمایش آیکون بدون رفتار خارجی؛ پیش‌فرض برابر isExternal است. |
| asChild | boolean | false | رندر استایل روی فرزند (مثل next/link). |
این کامپوننت هنوز برای Vue پورت نشده است.
نسخهٔ ری‌اکت آماده است؛ پورت این فریم‌ورک در دست کار است.
این کامپوننت هنوز برای Svelte پورت نشده است.
نسخهٔ ری‌اکت آماده است؛ پورت این فریم‌ورک در دست کار است.
این کامپوننت هنوز برای Angular پورت نشده است.
نسخهٔ ری‌اکت آماده است؛ پورت این فریم‌ورک در دست کار است.
نمونه‌ها
رنگ‌ها
این نمونه هنوز برای Vue پورت نشده است؛ آنچه می‌بینید نسخهٔ ری‌اکت است.
این نمونه هنوز برای Svelte پورت نشده است؛ آنچه می‌بینید نسخهٔ ری‌اکت است.
این نمونه هنوز برای Angular پورت نشده است؛ آنچه می‌بینید نسخهٔ ری‌اکت است.
زیرخط
این نمونه هنوز برای Vue پورت نشده است؛ آنچه می‌بینید نسخهٔ ری‌اکت است.
این نمونه هنوز برای Svelte پورت نشده است؛ آنچه می‌بینید نسخهٔ ری‌اکت است.
این نمونه هنوز برای Angular پورت نشده است؛ آنچه می‌بینید نسخهٔ ری‌اکت است.
اندازه‌ها
این نمونه هنوز برای Vue پورت نشده است؛ آنچه می‌بینید نسخهٔ ری‌اکت است.
این نمونه هنوز برای Svelte پورت نشده است؛ آنچه می‌بینید نسخهٔ ری‌اکت است.
این نمونه هنوز برای Angular پورت نشده است؛ آنچه می‌بینید نسخهٔ ری‌اکت است.
لینک خارجی
این نمونه هنوز برای Vue پورت نشده است؛ آنچه می‌بینید نسخهٔ ری‌اکت است.
این نمونه هنوز برای Svelte پورت نشده است؛ آنچه می‌بینید نسخهٔ ری‌اکت است.
این نمونه هنوز برای Angular پورت نشده است؛ آنچه می‌بینید نسخهٔ ری‌اکت است.
غیرفعال
این نمونه هنوز برای Vue پورت نشده است؛ آنچه می‌بینید نسخهٔ ری‌اکت است.
این نمونه هنوز برای Svelte پورت نشده است؛ آنچه می‌بینید نسخهٔ ری‌اکت است.
این نمونه هنوز برای Angular پورت نشده است؛ آنچه می‌بینید نسخهٔ ری‌اکت است.
کدام نمونه برای کدام موقعیت
| نمونه | کجا به کار می‌آید |
|---|---|
| رنگ‌ها | لینک‌های درون متن که باید معنای هشدار، موفقیت یا خطر بگیرند |
| زیرخط | کنترل میزان برجستگی لینک نسبت به متن اطرافش |
| اندازه‌ها | هم‌ترازی لینک با متن پیرامونش در اندازه‌های مختلف تایپوگرافی |
| لینک خارجی | ارجاع به یک دامنهٔ دیگر که باید امن باز شود و بی‌دسترسی به window.opener بماند |
| غیرفعال | لینکی که به دلیل نداشتن دسترسی یا وضعیت فعلی کاربر نباید طی شود |