Link
لینک متنی سبک با محور رنگ همراستا با بقیهٔ کامپوننتها، حالتهای زیرخط، و پشتیبانی از لینک خارجی.
این کامپوننت فعلاً برای ۱ فریمورک از ۴ فریمورک آماده است.
این نمونه هنوز برای Vue پورت نشده است؛ آنچه میبینید نسخهٔ ریاکت است.
این نمونه هنوز برای Svelte پورت نشده است؛ آنچه میبینید نسخهٔ ریاکت است.
این نمونه هنوز برای Angular پورت نشده است؛ آنچه میبینید نسخهٔ ریاکت است.
نصب
با CLI اختصاصی dig-ui کامپوننت را از رجیستری دیگ نصب کنید؛ وابستگیها و فایلها خودکار اضافه میشوند.
pnpm dlx dig-ui@latest add https://design-system-tau-green.vercel.app/r/link.jsonnpx dig-ui@latest add https://design-system-tau-green.vercel.app/r/link.jsonyarn dlx dig-ui@latest add https://design-system-tau-green.vercel.app/r/link.jsonbunx --bun dig-ui@latest add https://design-system-tau-green.vercel.app/r/link.jsonاین کامپوننت هنوز برای Vue پورت نشده است.
نسخهٔ ریاکت آماده است؛ پورت این فریمورک روی Reka UI در دست کار است.
این کامپوننت هنوز برای Svelte پورت نشده است.
نسخهٔ ریاکت آماده است؛ پورت این فریمورک روی Bits UI در دست کار است.
این کامپوننت هنوز برای Angular پورت نشده است.
نسخهٔ ریاکت آماده است؛ پورت این فریمورک روی Angular CDK در دست کار است.
استفاده
import { Link } from "@/components/ui/link"
<Link href="/docs">مستندات</Link>این کامپوننت هنوز برای Vue پورت نشده است.
نسخهٔ ریاکت آماده است؛ پورت این فریمورک روی Reka UI در دست کار است.
این کامپوننت هنوز برای Svelte پورت نشده است.
نسخهٔ ریاکت آماده است؛ پورت این فریمورک روی Bits UI در دست کار است.
این کامپوننت هنوز برای Angular پورت نشده است.
نسخهٔ ریاکت آماده است؛ پورت این فریمورک روی Angular CDK در دست کار است.
ترکیب اجزا
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 پورت نشده است.
نسخهٔ ریاکت آماده است؛ پورت این فریمورک روی Reka UI در دست کار است.
این کامپوننت هنوز برای Svelte پورت نشده است.
نسخهٔ ریاکت آماده است؛ پورت این فریمورک روی Bits UI در دست کار است.
این کامپوننت هنوز برای Angular پورت نشده است.
نسخهٔ ریاکت آماده است؛ پورت این فریمورک روی Angular CDK در دست کار است.
نمونهها
رنگها
زیرخط
این نمونه هنوز برای Vue پورت نشده است؛ آنچه میبینید نسخهٔ ریاکت است.
این نمونه هنوز برای Svelte پورت نشده است؛ آنچه میبینید نسخهٔ ریاکت است.
این نمونه هنوز برای Angular پورت نشده است؛ آنچه میبینید نسخهٔ ریاکت است.
اندازهها
لینک خارجی
این نمونه هنوز برای Vue پورت نشده است؛ آنچه میبینید نسخهٔ ریاکت است.
این نمونه هنوز برای Svelte پورت نشده است؛ آنچه میبینید نسخهٔ ریاکت است.
این نمونه هنوز برای Angular پورت نشده است؛ آنچه میبینید نسخهٔ ریاکت است.
غیرفعال
این نمونه هنوز برای Vue پورت نشده است؛ آنچه میبینید نسخهٔ ریاکت است.
این نمونه هنوز برای Svelte پورت نشده است؛ آنچه میبینید نسخهٔ ریاکت است.
این نمونه هنوز برای Angular پورت نشده است؛ آنچه میبینید نسخهٔ ریاکت است.
کدام نمونه برای کدام موقعیت
| نمونه | کجا به کار میآید |
|---|---|
| رنگها | لینکهای درون متن که باید معنای هشدار، موفقیت یا خطر بگیرند |
| زیرخط | کنترل میزان برجستگی لینک نسبت به متن اطرافش |
| اندازهها | همترازی لینک با متن پیرامونش در اندازههای مختلف تایپوگرافی |
| لینک خارجی | ارجاع به یک دامنهٔ دیگر که باید امن باز شود و بیدسترسی به window.opener بماند |
| غیرفعال | لینکی که به دلیل نداشتن دسترسی یا وضعیت فعلی کاربر نباید طی شود |