Focus ring
الفئات (classes) المساعدة التي تتيح لك إضافة وتعديل أنماط حلقة التركيز المخصصة للعناصر والمكونات.
تقوم الفئة المساعدة .focus-ring بإزالة الـ outline الافتراضي عند الـ :focus، واستبداله بـ box-shadow يمكن تخصيصه بشكل أوسع. يتكون الظل الجديد من سلسلة من متغيرات CSS، الموروثة من مستوى :root، والتي يمكن تعديلها لأي عنصر أو مكون.
مثال
انقر مباشرة على الرابط أدناه لرؤية حلقة التركيز في عملها، أو داخل المثال أدناه ثم اضغط على Tab.
<a href="#" class="d-inline-flex focus-ring py-1 px-2 text-decoration-none border rounded-2">
Custom focus ring
</a>تخصيص
قم بتعديل تنسيق حلقة التركيز باستخدام متغيرات CSS، أو متغيرات Sass، أو الأدوات المساعدة (utilities)، أو الأنماط المخصصة.
متغيرات الـ (CSS)
قم بتعديل متغيرات CSS التي تبدأ بـ --bs-focus-ring-* حسب الحاجة لتغيير المظهر الافتراضي.
<a href="#" class="d-inline-flex focus-ring py-1 px-2 text-decoration-none border rounded-2" style="--bs-focus-ring-color: rgba(var(--bs-success-rgb), .25)">
Green focus ring
</a>تقوم .focus-ring بتعيين الأنماط عبر متغيرات CSS عالمية يمكن تجاوزها في أي عنصر أب، كما هو موضح أعلاه. يتم إنشاء هذه المتغيرات من نظيراتها في متغيرات Sass.
--#{$prefix}focus-ring-width: #{$focus-ring-width};
--#{$prefix}focus-ring-opacity: #{$focus-ring-opacity};
--#{$prefix}focus-ring-color: #{$focus-ring-color};
بشكل افتراضي، لا يوجد --bs-focus-ring-x أو --bs-focus-ring-y أو --bs-focus-ring-blur، ولكننا نوفر متغيرات CSS مع قيم رجوع (fallbacks) إلى القيم الأولية 0. قم بتعديلها لتغيير المظهر الافتراضي.
<a href="#" class="d-inline-flex focus-ring py-1 px-2 text-decoration-none border rounded-2" style="--bs-focus-ring-x: 10px; --bs-focus-ring-y: 10px; --bs-focus-ring-blur: 4px">
Blurry offset focus ring
</a>متغيرات الـ (Sass)
قم بتخصيص متغيرات Sass الخاصة بحلقة التركيز لتعديل جميع استخدامات أنماط حلقة التركيز عبر مشروعك المدعوم بـ Bootstrap.
$focus-ring-width: .25rem;
$focus-ring-opacity: .25;
$focus-ring-color: rgba($primary, $focus-ring-opacity);
$focus-ring-blur: 0;
$focus-ring-box-shadow: 0 0 $focus-ring-blur $focus-ring-width $focus-ring-color;
واجهة برمجة تطبيقات أدوات Sass (Sass utilities API)
بالإضافة إلى .focus-ring، لدينا العديد من الأدوات المساعدة .focus-ring-* لتعديل الإعدادات الافتراضية للفئة المساعدة. قم بتعديل اللون باستخدام أي من ألوان السمة (theme colors). لاحظ أن المتغيرات الفاتحة والداكنة قد لا تكون مرئية على جميع ألوان الخلفية نظراً لدعم وضع الألوان الحالي.
<p><a href="#" class="d-inline-flex focus-ring focus-ring-primary py-1 px-2 text-decoration-none border rounded-2">Primary focus</a></p>
<p><a href="#" class="d-inline-flex focus-ring focus-ring-secondary py-1 px-2 text-decoration-none border rounded-2">Secondary focus</a></p>
<p><a href="#" class="d-inline-flex focus-ring focus-ring-success py-1 px-2 text-decoration-none border rounded-2">Success focus</a></p>
<p><a href="#" class="d-inline-flex focus-ring focus-ring-danger py-1 px-2 text-decoration-none border rounded-2">Danger focus</a></p>
<p><a href="#" class="d-inline-flex focus-ring focus-ring-warning py-1 px-2 text-decoration-none border rounded-2">Warning focus</a></p>
<p><a href="#" class="d-inline-flex focus-ring focus-ring-info py-1 px-2 text-decoration-none border rounded-2">Info focus</a></p>
<p><a href="#" class="d-inline-flex focus-ring focus-ring-light py-1 px-2 text-decoration-none border rounded-2">Light focus</a></p>
<p><a href="#" class="d-inline-flex focus-ring focus-ring-dark py-1 px-2 text-decoration-none border rounded-2">Dark focus</a></p>يتم التصريح عن أدوات حلقة التركيز في واجهة برمجة تطبيقات الأدوات الخاصة بنا في scss/_utilities.scss. تعلم كيفية استخدام واجهة برمجة تطبيقات الأدوات (utilities API).
"focus-ring": (
css-var: true,
css-variable-name: focus-ring-color,
class: focus-ring,
values: map-loop($theme-colors-rgb, rgba-css-var, "$key", "focus-ring")
),