البناء · جديد

الروابط

روابط تنقل إلى صفحة أو قسم أو موقع آخر، داخل النص أو وحدها. للأفعال التي تغيّر البيانات استخدم زراً.

المعاينة

المعكوسة هي المحتوى الإنجليزي نفسه من اليمين إلى اليسار، لتفصل خطأ الاتجاه عن خطأ الترجمة.

التثبيت

قريبًايُفتح التثبيت من السجل مع الإطلاق. حتى ذلك الحين، هذا هو الأمر الذي ستستخدمه.

npx shadcn@latest add @ritla/text-link

الاعتماديات التي يضيفها: @phosphor-icons/react

الاستخدام

import { TextLink } from "@/components/ui/text-link";

<p>
  By continuing you agree to our <TextLink href="/terms" size="inline">Terms of service</TextLink>.
</p>
<TextLink href="/transactions" size="md">View all transactions</TextLink>

أمثلة

الأنماط

blue لمعظم الروابط، وgray حيث تكون الروابط هادئة (التذييل، التنقل الثانوي)، وdanger لرابط يقود إلى مسار حذف أو إغلاق، لا للتنقل العادي.

المقاسات

للروابط المستقلة: sm بارتفاع 20px، وmd بارتفاع 24px، وlg بارتفاع 28px، بأيقونات 16 و20 و24px.

الحالات

المرور والتركيز من المؤشر ولوحة المفاتيح. disabled يزيل href فيخرج الرابط من ترتيب Tab ويبقى مرئياً. أزل الخط السفلي فقط حيث يُفهم الرابط من مكانه.

داخل النص

size="inline" يلتف مع الجملة ويأخذ حجمها ووزنها، أياً كان نمط النص. أبقِ الخط السفلي في النص الجاري: اللون وحده لا يكفي لتمييز الرابط.

رابط خارجي

external يفتح تبويباً جديداً بـrel="noopener noreferrer"، ويضيف سهم الرابط الخارجي، ويخبر قارئ الشاشة بأنه يفتح في تبويب جديد بلغة الصفحة.

مع موجّه التطبيق

مرّر <Link> من Next (أو موجّهك) في render: يبقى التنقل داخل التطبيق والتحميل المسبق، ويضيف TextLink الشكل.

مرجع الخصائص

TextLink

يقبل كل خصائص <a> أيضاً. سُمّي TextLink كي لا يتعارض مع Link في موجّه التطبيق.

الخاصية	النوع	الافتراضي	الوصف
`children`	`ReactNode`		خاصية Label.
`href`	`string`		وجهة الرابط.
`variant`	`"blue" \| "gray" \| "danger"`	`"blue"`	خاصية Style.
`size`	`"sm" \| "md" \| "lg" \| "inline"`	`"lg"`	خاصية Size، أو `inline` داخل النص.
`underline`	`boolean`	`true`	خاصية Show underline.
`iconLeading`	`IconComponent`		خاصية Icon leading مع الأيقونة. تنعكس أيقونات الاتجاه في RTL.
`iconTrailing`	`IconComponent`		خاصية Icon trailing مع الأيقونة.
`external`	`boolean`	`false`	تبويب جديد، وسهم خارجي، وتنبيه لقارئ الشاشة.
`disabled`	`boolean`	`false`	خاصية State = Disabled: بلا `href`، وخارج ترتيب Tab.
`render`	`ReactElement`		رابط الموجّه (`<Link href>`) يُعرض بشكل `TextLink`.

إمكانية الوصول

لوحة المفاتيح

المفاتيح مكتوبة للاتجاه من اليسار إلى اليمين. في الاتجاه من اليمين يتبادل السهمان دورهما: السهم المتجه مع اتجاه القراءة ينقلك إلى الأمام.

المفتاح	ما يفعله
`Tab`	ينقل التركيز إلى الرابط، مع حلقة التركيز حوله (حلقة الخطأ في `danger`).
`Enter`	يفتح الرابط.

ARIA

عنصر <a href> حقيقي، فيُعلَن رابطاً ويعمل الفتح في تبويب جديد والنسخ.
الرابط الخارجي يضيف «(يفتح في علامة تبويب جديدة)» لقارئ الشاشة، بالعربية داخل الصفحات العربية.
المعطّل يحمل aria-disabled="true" بلا href، فلا يصل إليه Tab.
الأيقونات زخرفية ومخفية عن قارئ الشاشة؛ النص يسمّي الرابط.

ملاحظات العربية والاتجاه

ينعكس

الأيقونات الاتجاهية تنعكس: سهم «عرض كل المعاملات» يشير إلى اليسار، وسهم الرابط الخارجي إلى أعلى اليسار.
الأيقونة البادئة في بداية السطر (اليمين) والتابعة في نهايته.

لا ينعكس

الأيقونات غير الاتجاهية (المنزل، المساعدة) تبقى كما هي، وكذلك الخط السفلي.

الأرقام: الأرقام في نص الرابط تتبع خاصية numerals كبقية النص.
الخط العربي: الروابط المستقلة بأنماط label بوزن Medium، بارتفاع سطر أطول في العربية؛ الارتفاع حدّ أدنى فلا يُقص النص. الخط السفلي تحت خط الأساس بـ4px فلا يقطع النقاط تحت الحروف العربية كثيراً.
النص ثنائي الاتجاه: داخل الجملة يتبع الرابط اتجاه الفقرة. اسم علامة تجارية لاتينية داخل رابط عربي يوضع في <bdi>.

كل المكونات ›