الرابط (Link)
تُستخدم أدوات الروابط لتنسيق الروابط الخاصة بك لضبط لونها، وشفافيتها، وإزاحة التسطير، ولون التسطير، والمزيد.
شفافية الرابط (Link opacity)
قم بتغيير شفافية ألفا (alpha opacity) لقيمة لون الرابط rgba() باستخدام الأدوات. يرجى العلم أن التغييرات في شفافية اللون قد تؤدي إلى روابط ذات تباين غير كافٍ (contrast).
<p><a class="link-opacity-10" href="#">Link opacity 10</a></p>
<p><a class="link-opacity-25" href="#">Link opacity 25</a></p>
<p><a class="link-opacity-50" href="#">Link opacity 50</a></p>
<p><a class="link-opacity-75" href="#">Link opacity 75</a></p>
<p><a class="link-opacity-100" href="#">Link opacity 100</a></p>يمكنك أيضاً تغيير مستوى الشفافية عند التمرير (hover).
<p><a class="link-opacity-10-hover" href="#">Link hover opacity 10</a></p>
<p><a class="link-opacity-25-hover" href="#">Link hover opacity 25</a></p>
<p><a class="link-opacity-50-hover" href="#">Link hover opacity 50</a></p>
<p><a class="link-opacity-75-hover" href="#">Link hover opacity 75</a></p>
<p><a class="link-opacity-100-hover" href="#">Link hover opacity 100</a></p>تسطير الروابط
تسطير ملون
قم بتغيير لون التسطير بشكل مستقل عن لون نص الرابط.
<p><a href="#" class="link-underline-primary">Primary underline</a></p>
<p><a href="#" class="link-underline-secondary">Secondary underline</a></p>
<p><a href="#" class="link-underline-success">Success underline</a></p>
<p><a href="#" class="link-underline-danger">Danger underline</a></p>
<p><a href="#" class="link-underline-warning">Warning underline</a></p>
<p><a href="#" class="link-underline-info">Info underline</a></p>
<p><a href="#" class="link-underline-light">Light underline</a></p>
<p><a href="#" class="link-underline-dark">Dark underline</a></p>تسطير مع إزاحة (offset)
قم بتغيير مسافة التسطير عن النص. يتم ضبط الإزاحة (Offset) بوحدات em لتتوسع تلقائياً مع font-size الحالي للعنصر.
<p><a href="#">Default link</a></p>
<p><a class="link-offset-1" href="#">Offset 1 link</a></p>
<p><a class="link-offset-2" href="#">Offset 2 link</a></p>
<p><a class="link-offset-3" href="#">Offset 3 link</a></p>تسطير مع شفافية (opacity)
قم بتغيير شفافية التسطير. يتطلب ذلك إضافة .link-underline لتعيين لون rgba() أولاً، والذي نستخدمه بعد ذلك لتعديل شفافية ألفا.
<p><a class="link-offset-2 link-underline link-underline-opacity-0" href="#">Underline opacity 0</a></p>
<p><a class="link-offset-2 link-underline link-underline-opacity-10" href="#">Underline opacity 10</a></p>
<p><a class="link-offset-2 link-underline link-underline-opacity-25" href="#">Underline opacity 25</a></p>
<p><a class="link-offset-2 link-underline link-underline-opacity-50" href="#">Underline opacity 50</a></p>
<p><a class="link-offset-2 link-underline link-underline-opacity-75" href="#">Underline opacity 75</a></p>
<p><a class="link-offset-2 link-underline link-underline-opacity-100" href="#">Underline opacity 100</a></p>متغيرات التمرير (Hover variants)
تماماً مثل أدوات .link-opacity-*-hover تتضمن أدوات .link-offset و .link-underline-opacity متغيرات :hover بشكل افتراضي. يمكنك المزج والمطابقة لإنشاء أنماط روابط فريدة.
<a class="link-offset-2 link-offset-3-hover link-underline link-underline-opacity-0 link-underline-opacity-75-hover" href="#">
Underline opacity 0
</a>الروابط الملونة
تم تحديث مساعدات الروابط الملونة لتتناسب مع أدوات الروابط الخاصة بنا. استخدم الأدوات الجديدة لتعديل شفافية الرابط، وشفافية التسطير، وإزاحة التسطير.
<p><a href="#" class="link-primary link-offset-2 link-underline-opacity-25 link-underline-opacity-100-hover">Primary link</a></p>
<p><a href="#" class="link-secondary link-offset-2 link-underline-opacity-25 link-underline-opacity-100-hover">Secondary link</a></p>
<p><a href="#" class="link-success link-offset-2 link-underline-opacity-25 link-underline-opacity-100-hover">Success link</a></p>
<p><a href="#" class="link-danger link-offset-2 link-underline-opacity-25 link-underline-opacity-100-hover">Danger link</a></p>
<p><a href="#" class="link-warning link-offset-2 link-underline-opacity-25 link-underline-opacity-100-hover">Warning link</a></p>
<p><a href="#" class="link-info link-offset-2 link-underline-opacity-25 link-underline-opacity-100-hover">Info link</a></p>
<p><a href="#" class="link-light link-offset-2 link-underline-opacity-25 link-underline-opacity-100-hover">Light link</a></p>
<p><a href="#" class="link-dark link-offset-2 link-underline-opacity-25 link-underline-opacity-100-hover">Dark link</a></p>
<p><a href="#" class="link-body-emphasis link-offset-2 link-underline-opacity-25 link-underline-opacity-75-hover">Emphasis link</a></p>نصيحة حول إمكانية الوصول: استخدام اللون لإضافة معنى يوفر إشارة بصرية فقط، والتي لن يتم نقلها إلى مستخدمي التقنيات المساعدة مثل قارئات الشاشة. يرجى التأكد من أن المعنى واضح من المحتوى نفسه (على سبيل المثال، النص المرئي مع كافٍ تباين الألوان) أو مدرج عبر وسائل بديلة، مثل نص إضافي مخفي باستخدام الفئة (class) .visually-hidden.
الـ (CSS)
بالإضافة إلى وظائف الـ Sass التالية، يرجى القراءة عن خصائص CSS المخصصة (المعروفة أيضاً باسم CSS variables) المضمنة لدينا للألوان والمزيد.
واجهة برمجة تطبيقات أدوات Sass (Sass utilities API)
يتم التصريح عن أدوات الروابط في الـ API الخاصة بالأدوات في scss/_utilities.scss. تعلم كيفية استخدام الـ API الخاصة بالأدوات.
"link-opacity": (
css-var: true,
class: link-opacity,
state: hover,
values: (
10: .1,
25: .25,
50: .5,
75: .75,
100: 1
)
),
"link-offset": (
property: text-underline-offset,
class: link-offset,
state: hover,
values: (
1: .125em,
2: .25em,
3: .375em,
)
),
"link-underline": (
property: text-decoration-color,
class: link-underline,
local-vars: (
"link-underline-opacity": 1
),
values: map-merge(
$utilities-links-underline,
(
null: rgba(var(--#{$prefix}link-color-rgb), var(--#{$prefix}link-underline-opacity, 1)),
)
)
),
"link-underline-opacity": (
css-var: true,
class: link-underline-opacity,
state: hover,
values: (
0: 0,
10: .1,
25: .25,
50: .5,
75: .75,
100: 1
),
),