Link
ينقل المستخدم إلى صفحة أو قسم آخر. بنمط primary وneutral وللخلفيات الملونة، وحجمان، ومضمّن وخارجي.
الإصدار 0.2.0 ·
التثبيت
bunx --bun shadcn@latest add @dga/linkالاستخدام
import NextLink from "next/link";
import { Link } from "@/components/ui/link";
<Link render={<NextLink href="/services" />}>الخدمات</Link>بلا render يعرض Link عنصر <a> عاديًا. استخدم Button للإجراءات.
البنية
- Root: عنصر
<a>، أو أي عنصر عبرrender. - Label: نص الرابط.
- External icon (للروابط الخارجية): تنقلب في RTL.
أمثلة
المضمّن
داخل النص الجاري، اضبط inline. الروابط المضمّنة تحتها خط دائمًا، فيمكن تمييزها دون الاعتماد على اللون (WCAG 1.4.1).
الخارجي
يفتح external علامة تبويب جديدة مع rel="noopener noreferrer"، ويضيف أيقونة الرابط الخارجي، ويُعلم قارئات الشاشة. ترجم التنبيه عبر externalLabel:
<Link href="https://dga.gov.sa" external externalLabel="(يفتح في علامة تبويب جديدة)">
هيئة الحكومة الرقمية
</Link>اتجاه RTL
يتبع النص وأيقونة الرابط الخارجي اتجاه القراءة؛ وتنقلب الأيقونة في العربية.
إمكانية الوصول
| المفتاح | الإجراء |
|---|---|
| Tab | ينقل التركيز إلى الرابط. |
| Enter | يتبعه. |
- عنصر
<a href>حقيقي: يعمل بلوحة المفاتيح، والنقر الأوسط، و«فتح في علامة تبويب جديدة». - يتغير لون الروابط التي سبقت زيارتها (
link-primary-visited). ويضاف خط تحتها عند التمرير والضغط. - حلقة التركيز على
:focus-visibleفقط: حدborder-blackبسمك 2px، وإزاحة 2px، وبيضاء على تعبئات العلامة. - الرابط المعطّل بلا
href، فلا يتلقى التركيز ويُعلن على أنه معطّل.
مرجع API
Link
رابط نصي بألوان الروابط في DGA. يعمل مع `Link` من Next.js عبر `render`.
| الخاصية | النوع | القيمة الافتراضية |
|---|---|---|
ReactElement | functionيتيح لك استبدال عنصر HTML الخاص بالمكوّن بوسم آخر، أو تركيبه مع مكوّن آخر. يقبل `ReactElement` أو دالة تعيد العنصر المراد عرضه. | لا توجد قيمة افتراضية | |
| ||
"on-color" | "primary" | "neutral"اللون. `on-color` للروابط على خلفيات لون العلامة. | "primary" | |
| ||
"sm" | "md"حجم النص: `sm` 14px، و`md` 16px. | "md" | |
| ||
booleanمسطّر دائمًا، للروابط داخل النص المتصل (WCAG 1.4.1). | false | |
| ||
booleanيفتح في نافذة جديدة، ويضيف rel="noopener noreferrer" وأيقونة الرابط الخارجي. | false | |
| ||
stringنص لقارئ الشاشة يُضاف إلى الروابط الخارجية. ترجمه في الصفحات العربية. | "(opens in a new tab)" | |
| ||
stringالوجهة. | لا توجد قيمة افتراضية | |
| ||
booleanيُعرض بلا href ومع aria-disabled. | false | |
| ||
يقبل أيضًا خصائص العنصر الذي يُصيّره.
الاختلافات عن DGA
| التغيير | السبب |
|---|---|
--link-oncolor-hovered (light) و5 غيرها | Translucent white (60–90%) on the brand fill is 2.73–4.21:1. On-colour links stay white; hovered and pressed are shown by the underline. |
Link: focus ring and disabled | Keyboard-only focus (WCAG 2.4.7). A link without an href cannot be followed or focused. |
Link: external | WCAG 3.2.5: warn before opening a new window. |
عرض جميع الاختلافات (8) لهذا المكوّن أسباب الاختلافات مكتوبة بالإنجليزية.
التباين
96 زوجًا لونيًا فُحص · جميعها تجتاز WCAG 2.1 AAعرض 18 حالةإخفاء
| النمط / الحالة | الفاتح | الداكن |
|---|---|---|
| primary / default | 4.54:1 AA | 7.73:1 AAA |
| primary / hovered | 6.31:1 AA | 10.38:1 AAA |
| primary / pressed | 8.18:1 AAA | 13.05:1 AAA |
| primary / visited | 8.18:1 AAA | 13.05:1 AAA |
| primary / focused | 4.54:1 AA | 7.73:1 AAA |
| primary / focus ring | 17.31:1 3:1 | 17.49:1 3:1 |
| neutral / default | 9.73:1 AAA | 12.04:1 AAA |
| neutral / hovered | 4.57:1 AA | 6.32:1 AA |
| neutral / pressed | 7.04:1 AAA | 6.32:1 AA |
| neutral / visited | 8.18:1 AAA | 13.05:1 AAA |
| neutral / focused | 9.73:1 AAA | 12.04:1 AAA |
| neutral / focus ring | 17.31:1 3:1 | 17.49:1 3:1 |
| on-color / default | 4.74:1 AA | 4.74:1 AA |
| on-color / hovered | 4.74:1 AA | 4.74:1 AA |
| on-color / pressed | 4.74:1 AA | 4.74:1 AA |
| on-color / visited | 4.74:1 AA | 4.74:1 AA |
| on-color / focused | 4.74:1 AA | 4.74:1 AA |
| on-color / focus ring | 4.74:1 3:1 | 4.74:1 3:1 |
يحتاج النص إلى تباين 4.5:1، والأيقونات وحلقات التركيز إلى 3:1. الحالات المعطّلة مستثناة. تقرير التباين الكامل